首页
学习
活动
专区
工具
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

    自学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.8K81

    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

    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静态页面的内容。

    2K40

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

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

    86510

    .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.4K80

    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属性通常指向相应控制器和动作方法。当用户提交表单时,触发相应动作方法。

    40410
    领券