首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

将动态添加的html表行作为参数发布到控制器- ASP.NET核心/MVC

将动态添加的HTML表行作为参数发布到控制器是ASP.NET核心/MVC中的一个常见需求,可以通过以下步骤实现:

  1. 在前端页面中使用JavaScript或jQuery动态添加HTML表行。这可以通过创建一个包含所需表行元素的HTML字符串,并使用JavaScript的appendChild()或jQuery的append()方法将其添加到表格中。
  2. 在前端页面中创建一个表单,将需要传递给控制器的数据作为表单的输入元素。这可以通过创建适当的表单字段(如文本框、隐藏字段等)来实现。确保为每个动态添加的表行设置正确的name属性,以便在提交表单时可以正确地将数据传递到控制器。
  3. 在控制器中创建一个接收表单数据的动作方法。在ASP.NET核心/MVC中,可以使用模型绑定机制将表单数据绑定到一个模型对象上。在动作方法的参数列表中添加一个与表单字段对应的参数,并使用合适的模型绑定特性(如[FromBody]、[FromForm]等)将表单数据绑定到该参数上。
  4. 在动作方法中对接收到的表单数据进行处理。根据业务需求,可以将数据存储到数据库、发送到其他系统等。

以下是一个示例代码:

前端页面:

代码语言:txt
复制
<table id="myTable">
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
</table>

<button onclick="addRow()">Add Row</button>
<form action="/controller/action" method="post" id="myForm">
  <input type="submit" value="Submit">
</form>

<script>
function addRow() {
  var table = document.getElementById("myTable");
  var row = table.insertRow(table.rows.length);
  var cell1 = row.insertCell(0);
  var cell2 = row.insertCell(1);
  cell1.innerHTML = "<input type='text' name='name'>";
  cell2.innerHTML = "<input type='text' name='age'>";
}

document.getElementById("myForm").addEventListener("submit", function(e) {
  e.preventDefault(); // Prevent form submission
  var formData = new FormData(this); // Get form data
  fetch("/controller/action", {
    method: "POST",
    body: formData
  }).then(function(response) {
    // Handle response
  });
});
</script>

控制器:

代码语言:txt
复制
[HttpPost]
public IActionResult Action([FromForm]List<PersonModel> persons)
{
    // Handle submitted data
    foreach (var person in persons)
    {
        // Process each person
        // ...
    }
    return RedirectToAction("Index");
}

public class PersonModel
{
    public string Name { get; set; }
    public int Age { get; set; }
}

在这个示例中,我们通过JavaScript动态添加表行,并使用FormData对象收集表单数据。然后,我们将表单数据通过fetch函数发送到控制器的动作方法,并使用[FromForm]特性将表单数据绑定到名为"persons"的List<PersonModel>参数上。

对于这个示例,你可以根据具体的业务需求进行适当的修改和扩展。对于ASP.NET核心/MVC中的其他概念和名词,你可以参考官方文档或搜索引擎进行进一步了解和学习。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

ASP.NET MVC学习笔记02控制器和路由

基于MVC模式的应用程序包含: Models: 表示该应用程序的数据并使用验证逻辑来强制实施业务规则的数据类。 Views: 应用程序动态生成 HTML所使用的模板文件。...上述例子中创建HelloController中修改了默认的Index方法,将返回值修改为了一行html代码,开启浏览器调试查看。 Step3:直接访问控制器 ?...当我们在VS中创建一个新的 ASP.NET MVC程序,程序将会自动使用默认的路由表。 默认路由表 默认路由表存放在App_Start/RouteConfig.cs 中。 ?...参数的自动装配 再修改一下welcome方法,将num改为id,输入url时,把id写在开头,用“?”分割,传入name。 ? ASP.NET MVC的路由自动匹配了ID这个参数,为什么呢?...看看上图中的 ASP.NET默认路由表,url: "{controller}/{action}/{id}",这一行已经添加了id这个参数,因此ASP.NET MVC会自动为我们匹配ID参数。

1.5K40

如何在 ASP.NET MVC 中集成 AngularJS(1)

作为一个微软stack开发者,我也是使用 ASP.NET MVC 平台实现 MVC 设计模式和并进行研究的粉丝,包括它的捆绑和压缩功能以及实现其对 RESTful 服务的 Web API 控制器。...幸运的是,捆绑和压缩是 ASP.NET 4.5 ASP.NET 中的一项功能,可以很容易地将多个文件合并或捆绑到一个文件中。你可以创建 CSS,JavaScript 和其他包。...MVC 路由表中的配置,会将应用路由到 MVC Home 主控制器,并执行主控制器中的索引方法。...如果你还想直接运行这个页面,则需要解决这一问题,给 MVC 路由表增加另外的路由以便告诉 MVC 将所有的请求路由到 MVC 主控制器,并渲染Razor 视图、通过路由引导这个应用。...由于我有三个视图文件夹,主文件夹、客户文件夹和产品文件夹,我增加了一下的 MVC 路由配置类以便将所有的请求路由到主/索引路由中。当应用程序运行时点击 F5,同样也会进入 MVC 路由表。

7.6K60
  • ASP.NET MVC 5 - 将数据从控制器传递给视图

    视图模板将生成动态的HTML,这意味着您需要通过适当的方式把数据从控制器传递给视图,从而才能生成动态的HTML。...您可以把视图模板需要的动态数据 (参数)在控制器中放入到一个ViewBag对象中,然后视图模板可以访问这个对象。...然后视图为用户生成显示所需的HTML。 ? 在上面的示例中,我们使用了ViewBag对象把数据从控制器传递给了视图。在本系列教程后面的文章中,我们将使用视图模型来将数据从一个控制器传递到视图中。...ASP.NET MVC 5 - 将数据从控制器传递给视图 5. ASP.NET MVC 5 - 添加一个模型 6. ...ASP.NET MVC 5 - 验证编辑方法(Edit method)和编辑视图(Edit view) 9. ASP.NET MVC 5 - 给电影表和模型添加新字段 10.

    5K100

    ASP.NET MVC框架(第四部分): 处理表单编辑和提交场景

    然后我们将使用.NET 3.5内置的LINQ to SQL对象关系映射器(ORM)来对Product, Category, 和 Supplier对象进行建模,这些对象代表了我们的数据库数据表中的记录行。...建造我们ProductsController控制器 我们将使用单一控制器类来实现这三个核心用户浏览体验,我们将称这个控制器类为“ProductsController”(在Controllers子目录上右击...在第一个预览版中,只有"ActionLink"方法是内置于System.Web.Extensions(目前实现核心ASP.NET MVC框架的程序集)中的。...而且,上面将所有进来的参数值设置到新的Product对象上的代码有点长,而且单调。...当我们在本贴子的开头创建产品列表网页的时候,我们是这么建造的,Edit action将接受一个作为URL一部分的id参数(譬如,/Products/Edit/5): ?

    5.1K70

    自学MVC看这里——全网最全ASP.NET MVC 教程汇总

    说明:本文摘自InfoQ,是作者Jon Arild Tørresdal于2009年发布的文章,从“不推荐学习”到“所有ASP.NET开发人员都应该学习”,各种不同的观点层出不穷。...5 - 添加一个模型 ASP.NET MVC 5 - 将数据从控制器传递给视图 ASP.NET MVC 5 - 视图 ASP.NET MVC 5 - 控制器 ASP.NET MVC 5 - 开始MVC5...Asp.Net MVC4入门指南(9):查询详细信息和删除记录 Asp.Net MVC4入门指南(8):给数据模型添加校验器 Asp.Net MVC4入门指南(7):给电影表和模型添加新字段 Asp.Net...MVC 框架缺少异步Action功能,因此博主自行编写了扩展:完整,方便,并且非常轻巧——核心逻辑代码只有200行左右,确保了扩展的稳定,高效并且拥有较好的向后兼容性。...它与Visual Studio无缝集成,完全与MVC6和ASP.NET 5.0兼容。将大幅提高效率,能提供从桌面到移动设备的体验,不用任何妥协就能创建触控优先的现代化解决方案。

    9.9K81

    ASP.NET Core MVC 概述

    ASP.NET Core MVC 提供一种基于模式的方式,用于生成可彻底分开管理事务的动态网站。 它提供对标记的完全控制,支持 TDD 友好开发并使用最新的 Web 标准。...因此,控制器逻辑不必找出传入的请求数据;它只需具备作为其操作方法的参数的数据。...验证属性在值发布到服务器前在客户端上进行检查,并在调用控制器操作前在服务器上进行检查。...在模型类型上指定的验证逻辑作为非介入式注释添加到呈现的视图,并使用 jQuery 验证在浏览器中强制执行。 依赖关系注入 ASP.NET Core 内置有对依赖关系注入 (DI) 的支持。...Framework 包括到内置支持通过 HTTP 内容协商支持设置数据的格式作为 JSON 或 XML。 编写自定义格式化程序以添加对自己格式的支持。 使用链接生成启用对超媒体的支持。

    6.4K20

    ASP.NET MVC 5 - 控制器

    基于MVC模式的应用程序包含: · Models: 表示该应用程序的数据并使用验证逻辑来强制实施业务规则的数据类。 · Views: 应用程序动态生成 HTML所使用的模板文件。...你告诉系统只返回一些HTML,系统确实这样做了! ? ASP.NET MVC会调用不同的控制器类(和其内部不同的操作方法)这取决于传入URL。...你可以对参数name 和numtimes 尝试不同的值。 ASP.NET MVC model binding system 会自动将地址栏中URL里的 query string映射到您方法中的参数。...ASP.NET MVC 5 - 将数据从控制器传递给视图 5. ASP.NET MVC 5 - 添加一个模型 6. ...ASP.NET MVC 5 - 验证编辑方法(Edit method)和编辑视图(Edit view) 9. ASP.NET MVC 5 - 给电影表和模型添加新字段 10.

    2.6K80

    ASP.NET MVC5高级编程 ——(5)路由

    构造传出的URL,用来响应控制器操作。 ASP.NET MVC5中有:特性路由和传统路由。 ASP.NET MVC5中的路由机制图解: ?...(); } 路由的核心工作是将一个请求映射到一个操作。...通过添加路由参数可解决这个问题: //id作为一个动态参数 [Route("Person/{id}")] public ActionResult Details(int id)...使用控制器类的一个特性代替每个方法上的所有路由特性。在控制器类上定义路由时,可以使用一个叫做action的特殊路由参数,它可以作为任意操作名称的占位符。...的URL请求映射到Account控制器的Logon动作方法, IE浏览器的用户将得到Account控制器的响应,而其他用户将看到test.html静态页面的内容。

    2.1K40

    Asp.Net MVC3 简单入门第一季(五) 通过Asp.Net MVC的区域功能实现将多个MVC项目部署到一个站点

    引子 本文将主要演示怎么将多个Asp.Net MVC项目部署到一个IIS站点中的例子,主要使用的是Asp.Net MVC提供的区域的功能。...然后我们注册区域路由就会在Global.asax的Application_Start事件方法中去执行注册到主站点的路由表中。...然后,将子项目AreasDemo的Views文件夹拷贝到主项目发布后的文件夹对应的Areas\AreasDemo文件夹下。其中AreasDemo是areaname,此文件夹需要我们自己手动创建。...然后,观察发布后的bin目录下有没有AreasDemo.dll动态链接库【Web子项目】。 然后,我们将此文件夹发布为IIS里的一个网站。...Asp.Net MVC的区域的功能实现了将多个Asp.Net MVC的项目部署的了一个IIS的站点中,这样就可以让我们多个人一块开发的不用局限在一个Web项目中了。

    87310

    .NET MVC简单介绍

    比如ASP.Net MVC的核心类仍然是实现了IHttpHandler接口的MVCHandler。 ASP.net WebForm、和ASP.net MVC的关系?...什么是MVC模式? 模型(Model)、视图(View)、控制器(Controller) ASP.net MVC与“三层架构” ASP.net MVC与“三层架构”没有任何的关系。...控制器的建立、视图的建立 :在Controllers文件夹下点右键→【添加】→【控制器】→选择【MVC5控制器-空】,类的名字以Controller结尾,比如“TestController”,会自动在Views...的Index方法一致):添加→视图 新建一个用来收集用户参数的类:IndexReqModel(类名无所谓)包含Num1、Num2两个属性(只要不重名,大小写都可以)。...发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/154459.html原文链接:https://javaforall.cn

    1.2K10

    Asp.Net MVC4入门指南(2):添加一个控制器

    基于MVC模式的应用程序包含: · Models: 表示该应用程序的数据并使用验证逻辑来强制实施业务规则的数据类。 · Views: 应用程序动态生成 HTML所使用的模板文件。..."; } } } 在这个例子中控制器方法将返回一个字符串的HTML。本控制器被命名HelloWorldController代码中的第一种方法被命名为Index。...你告诉系统只返回一些HTML,系统确实这样做了! ? 根据传入的URL,ASP.NET MVC调用不同的控制器类(和它们之中不同的操作方法)。...你可以对参数name 和numtimes 尝试不同的值。 ASP.NET MVC model binding system 会自动将地址栏中URL里的 query string映射到您方法中的参数。...ComponentOne Studio ASP.NET MVC 是一款针对 MVC 平台的控件包,它与 Visual Studio 无缝集成,完全与 MVC6 和 ASP.NET 5.0 兼容,将大幅提高工作效率

    1K70

    ASP.NET MVC5高级编程——(1)了解MVC模式和第一个MVC程序、认识控制器

    MVC 编程模式 MVC 是一种使用 MVC(Model View Controller 模型-视图-控制器)设计创建 Web 应用程序的模式: Model(模型)表示应用程序核心(比如数据库记录列表)...Controller(控制器)处理输入(写入数据库记录)。 下面,我们将开始第一个MVC程序哦!...Ctrl+F5,就是不调试的启动: 然后可以自己添加方法: 修改Details方法,使其读取和显示一个名为ID的参数,在Asp.Net MVC 5的默认路由约定中:将操作方法名称后面的URL的这个片段作为一个参数...,该参数的名称为ID,如果操作方法中有名为ID的参数,那么Asp.Net MVC 会自动将这个URL片段作为参数传进来,就是ID的值!...3 ,在MVC中,控制器才是核心,每一个请求都必须通过控制器处理,而且有些请求不需要模型和视图! 控制器就是MVC应用程序中的“指挥员”,它紧密的编排用户、模型对象和视图的交互。

    1.9K20

    在ASP.NET MVC5中实现具有服务器端过滤、排序和分页的GridView

    背景 在前一篇文章《【初学者指南】在ASP.NET MVC 5中创建GridView》中,我们学习了如何在 ASP.NET MVC 中实现 GridView,类似于 ASP.NET web 表单的功能。...通过前文,我们已经了解到使用 jQuery 插件的数据表可以很容易地实现具有搜索、排序和分页等重要功能的表格。 ?...这是由于绑定将会提供一个附着在控制器上的强类型的模型,这将有助于我们避免读取请求参数,也会将我们从请求的参数类型转换中解救出来。...现在,在控制器文件夹中添加一个空的名为 AssetController 的控制器,这个控制器件将用于所有 Asset 的相关工作。...我们正在获取 Assets 的引用,以便能够链接到实体框架请求数据,我们可以通过 Count()函数来获取数据集表的数据数目,这个数据将会传递到 DataTablesResponse 构造函数中,成为行为方法的最后一行

    5.5K80

    Asp.Net MVC4入门指南(5):从控制器访问数据模型

    private MovieDBContext db = new MovieDBContext(); 向Movies控制器请求,从而返回Movies电影数据库表中的所有记录,然后将结果传递给Index视图...强类型模型和 @model 关键字 在本系列之前的教程中,您看到了使用ViewBag对象,从控制器传递数据或对象给视图模板。ViewBag是一个动态的对象,提供了方便的后期绑定方法将信息传递给视图。...ASP.NET MVC 还提供了传递强类型数据或对象到视图模板的能力。这种强类型使得更好的在编译时检查您的代码并在Visual Studio 编辑器中提供更加丰富的智能感知。...右键单击Movies表,选择打开表定义查看Entity Framework代码优先所创建表的表结构。 ? ? 请注意,如何将Movies表的表结构映射到您早些时候所创建的Movie类?...并添加一个SearchIndex方法和SearchIndex视图,使您可以在数据库中搜索电影了。从控制器访问数据模型是MVC数据传递中重要的知识部分,深入理解了这部分内容才能更好的进行MVC开发。

    4.2K50

    【ASP.NET Core 基础知识】--路由和请求处理--路由概念(一)

    路由系统将根据路由模板和请求的URL确定要执行的控制器和动作方法。 路由表(Route Table): 路由表是一个数据结构,它存储了应用程序中所有定义的路由规则。...三、控制器和动作方法 3.1 控制器的角色和作用 控制器在MVC(Model-View-Controller)架构中扮演着核心角色,负责接收用户的请求并协调相应的操作,以便正确呈现视图或执行其他逻辑。...协调操作: 一旦控制器接收到请求,它将协调相应的操作,这通常涉及到调用模型(Model)和/或视图(View)。控制器作为中介者,将请求传递给正确的业务逻辑或数据处理单元。...这可能包括将模型数据传递给视图以生成HTML、JSON或其他格式的响应。 路由处理: 控制器与路由系统协同工作,确保将请求映射到正确的控制器和动作方法。它根据路由规则确定应该执行的操作。...通过HTML表单提交: 如果用户通过HTML表单提交了请求,表单的action属性通常指向相应的控制器和动作方法。当用户提交表单时,将触发相应的动作方法。

    48410
    领券