ASP.NET MVC从视图传递多个模型到Controller

从后台组织好数据然后传递到页面倒是水到渠成很方便,因为MVC自身就将这样的需求内建到了这个系统中。我只需要在后台组织好一个List 或IEnumerable类型的变量,将需要传递的数据模型扔进去便可。

http://www.cnblogs.com/Wayou/p/pass_multi_modes_to_controller_in_MVC.html

比如这里我们向视图返回5条product信息在页面进行展示,仅仅是返回这么简单。

然后在页面我们就毫不费力地得到了后台传过来的数据模型,然后进行显示即可。

但问题是,如何又将多个模型传回后台去呢。一个form一般只传递一个模型,我们可以在JavaScript里序列化多个模型然后通过ajax 传递回去。

1.首先改造页面,假设在页面有很多输入框供用户输入模型的相关信息,并且搞一个按扭来提交。

<table>
    @foreach (Product item in Model)
    {
        <tr id="@item.ProductID">
            <td>
                <input name="ProductName" />
            </td>
            <td>
                <input name="SupplierID" />
            </td>
            <td>
                <input name="CategoryID" />
            </td>
        </tr>
    }
</table>
<button id="go">Go</button>

2.然后在JavaScript中获取这些输入值,最后将所有模型整合到一个models变量中。

  var models = [];
    $.each($("table tr"), function(i, item) {
        var ProductName = $(item).find("[name=ProductName]").val();
        var SupplierID = $(item).find("[name=SupplierID]").val();
        var CategoryID = $(item).find("[name=CategoryID]").val();
        models.push({ ProductName: ProductName, SupplierID: SupplierID, CategoryID: CategoryID });
    });

当然这些是写到按扭的单击事件中的。

所以完整的代码看起来应该是这个样子。

<script type="text/javascript">
    $("#go").click(function() {
        var models = [];
        $.each($("table tr"), function(i, item) {
            var ProductName = $(item).find("[name=ProductName]").val();
            var SupplierID = $(item).find("[name=SupplierID]").val();
            var CategoryID = $(item).find("[name=CategoryID]").val();
            models.push({ ProductName: ProductName, SupplierID: SupplierID, CategoryID: CategoryID });
        });
    });
</script>

到这里我们可以加个debugger测试一下有没有有前台代码中成功获取到输入框的值及组织好的模型对不对。

在页面按F12打开开发者工具,然后试着在页面输入一些值,最后单击按扭。

我们看到,在遍历了所有输入框后,以每行为单位当成一个Product模型,压入models变量中。这个时候,models变量中保存了所有信息。

3.准备后台接收数据的Action 。我们当然是接收多个模型,所以接收类型选择为List<Product>

        public ActionResult ReceiveData(List<Product> products)
        {
            string result = products == null ? "Failed" : "Success";
            return Content(result);
        }

4.最后一步,将models变量通过Ajax传送到后台

这一步是最关键的,因为ajax格式没写好后台是无法接收到正确的数据的。经过我颇费心神的研究最后得出的ajax代码大概是下面这个样子的:

  $.ajax({
        url: ‘../../Home/ReceiveData‘,
        data: JSON.stringify(models),
        type: ‘POST‘,
        contentType: ‘application/json; charset=utf-8‘,
        success: function(msg) {
            alert(msg);
        }
    });

最后完整的前台代码大概应该是这个样子的。

<script type="text/javascript">
    $(function() {
        $("#go").click(function() {
            var models = [];
            $.each($("table tr"), function(i, item) {
                var ProductName = $(item).find("[name=ProductName]").val();
                var SupplierID = $(item).find("[name=SupplierID]").val();
                var CategoryID = $(item).find("[name=CategoryID]").val();
                models.push({ ProductName: ProductName, SupplierID: SupplierID, CategoryID: CategoryID });
            });

            $.ajax({
                url: ‘../../Home/ReceiveData‘,
                data: JSON.stringify(models),
                type: ‘POST‘,
                contentType: ‘application/json; charset=utf-8‘,
                success: function(msg) {
                    alert(msg);
                }
            });
        });
    })
</script>

5.调试看结果

结果显示我们接收到了前台传过来的每一个数据,完工。

时间: 2024-10-14 14:28:44

ASP.NET MVC从视图传递多个模型到Controller的相关文章

转:MVC从视图传递多个模型到Controller

从后台组织好数据然后传递到页面倒是水到渠成很方便,因为MVC自身就将这样的需求内建到了这个系统中.我只需要在后台组织好一个List 或IEnumerable类型的变量,将需要传递的数据模型扔进去便可. 比如这里我们向视图返回5条product信息在页面进行展示,仅仅是返回这么简单. 然后在页面我们就毫不费力地得到了后台传过来的数据模型,然后进行显示即可. 但问题是,如何又将多个模型传回后台去呢.一个form一般只传递一个模型,我们可以在JavaScript里序列化多个模型然后通过ajax 传递回

ASP.NET MVC 5 - 视图

原文:ASP.NET MVC 5 - 视图 在本节中,你要去修改HelloWorldController类,使用视图模板文件,在干净利索地封装的过程中:客户端浏览器生成HTML. 您将创建一个视图模板文件,其中使用了ASP.NET MVC 3所引入的Razor视图引擎(Razor view engine).Razor视图模板文件使用.cshtml文件扩展名,并提供了一个优雅的方式来使用C#语言创建所要输出的HTML.用Razor编写一个视图模板文件时,将所需的字符和键盘敲击数量降到了最低,并实现

ASP.NET MVC 基础--------数据传递

前言 大家好,我是大成子.之前有朋友去面试,面试官问了一个这样的题:在http://ASP.NET MVC 中视图和控制器之间有哪几种数据传递方式?今天大成子就带大家一起来探讨C(控制器)向V(视图)[前端视图向控制器发送请求传输的数据的方式本次这里不做赘述了,有机会再做分析和分享]传输数据有哪几种方式.(ViewData/ViewBag/TempData/model) ViewData 第一个是ViewData,它用来存储存储String Key/Object的值.它是一个继承自ViewDat

Asp.Net Mvc Razor视图语法

    Asp.Net Mvc Razor视图语法 [email protected]符号输出变量值 2.使用C#语法嵌套Html标签循环输出NameList的值:使用@{C#语法代码}: 3.输出@符号使用两个@@ 4.服务器注释使用@*注释内容*@ [email protected]:输出文本,或者使用<text></text> 6.在@()括号进行简单的操作或运算 [email protected]()或@{}可以输出带有html标签的字符串 8.Razor可以智能识别邮箱写

ASP.NET MVC 部分视图

转自http://blog.csdn.net/skyandcode/article/details/22594355 [部分视图] ASP.NET MVC 里的部分视图,相当于 Web Form 里的 User Control.我们的页面往往会有许多重用的地方,可以进行封装重用.使用 部分视图 :  1. 可以简写代码.2. 页面代码更加清晰.更好维护. [如何使用] 在视图里有多种方法可以 加载部分视图,包括: Partial()  Action()  RenderPartial()  Ren

ASP.NET MVC 5 - 给电影表和模型添加新字段

原文:ASP.NET MVC 5 - 给电影表和模型添加新字段 在本节中,您将使用Entity Framework Code First来实现模型类上的操作.从而使得这些操作和变更,可以应用到数据库中. 默认情况下,就像您在之前的教程中所作的那样,使用 Entity Framework Code First自动创建一个数据库,Code First为数据库所添加的表,将帮助您跟踪数据库是否和从它生成的模型类是同步的.如果他们不是同步的,Entity Framework将抛出一个错误.这非常方便的在

ASP.NET MVC 3 配置EF自动生成模型

Tools(工具) =>  扩展工具 => Nuget Tools(工具) => Nuget=>程序包管理器控制台 Nuget 程序包管理器 => Install-Package EntityFramework  (为了安装Efcodefirst) EFCodeFirst => entity framework.dll(控制器用到EF的时候需要添加引用 ,目前版本是6.1) EfPowerTools => 模型生成器 类 => 右键 => entity

[asp.net mvc] 将视图中的表单数据传递到控制器中

在ASP.NET MVC框架中,将视图中的数据传递到控制器中,主要通过发送表单实现的.具体使用中,主要使用以下三种方法. 1.通过Request.Form读取表单数据 表单代码: 1 @using (Html.BeginForm("Person", "Default3")) 2 { 3 @Html.TextBox("tFirstName") 4 <br /> 5 @Html.TextBox("tLastName")

使用asp.net mvc部分视图渲染html

为了提升用户体验,一般我们采用ajax加载数据然后根据数据渲染html,渲染html可以使用前端渲染和服务器端渲染. 前端渲染 使用前端模版引擎或MVC框架,例如underscore.js的template或者是使用angular.js等框架,当然也可以不用任何框架自己拼接html. <!DOCTYPE html> <html> <head> <title>underscore.js的template渲染html</title> </hea