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

简介: 从后台组织好数据然后传递到页面倒是水到渠成很方便,因为MVC自身就将这样的需求内建到了这个系统中。我只需要在后台组织好一个List 或IEnumerable类型的变量,将需要传递的数据模型扔进去便可。   比如这里我们向视图返回5条product信息在页面进行展示,仅仅是返回这么简单。

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

 

比如这里我们向视图返回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.调试看结果

 

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

目录
相关文章
|
2月前
|
设计模式 存储 前端开发
MVC(模型-视图-控制器)是一种在Web应用程序开发中广泛使用的软件设计模式
【5月更文挑战第12天】MVC模式是Web应用开发中的常见设计模式,将逻辑、数据和界面分离,提升代码可维护性和重用性。模型处理数据逻辑,视图展示数据,控制器协调用户输入与模型视图交互。优点包括代码分离、易维护、可扩展和组件重用,促进高效灵活的开发。
32 2
|
25天前
|
设计模式 前端开发 安全
理解最常用的MVC分层模型及其变种
【6月更文挑战第24天】 本文介绍架构模式如MVC、MVVM和MVP是解决软件结构问题的通用方案。。每种模式有其优缺点,适用场景不同。
59 0
理解最常用的MVC分层模型及其变种
|
23天前
|
SQL 开发框架 .NET
(20)ASP.NET Core EF创建模型(必需属性和可选属性、最大长度、并发标记、阴影属性)
(20)ASP.NET Core EF创建模型(必需属性和可选属性、最大长度、并发标记、阴影属性)
|
1月前
|
安全 前端开发 测试技术
安全开发-PHP应用&模版引用&Smarty渲染&MVC模型&数据联动&RCE安全&TP框架&路由访问&对象操作&内置过滤绕过&核心漏洞
安全开发-PHP应用&模版引用&Smarty渲染&MVC模型&数据联动&RCE安全&TP框架&路由访问&对象操作&内置过滤绕过&核心漏洞
|
1月前
|
前端开发 Java Spring
自定义 Spring MVC Controller 方法参数处理
【6月更文挑战第3天】在 Spring MVC Controller 的方法参数,Spring 会自动为我们注入一些特殊的参数值,比如 HttpServletRequest、HttpServletResponse 等对象,或者 HTTP 请求参数。
72 0
|
2月前
|
开发框架 前端开发 JavaScript
JavaScript云LIS系统源码ASP.NET CORE 3.1 MVC + SQLserver + Redis医院实验室信息系统源码 医院云LIS系统源码
实验室信息系统(Laboratory Information System,缩写LIS)是一类用来处理实验室过程信息的软件,云LIS系统围绕临床,云LIS系统将与云HIS系统建立起高度的业务整合,以体现“以病人为中心”的设计理念,优化就诊流程,方便患者就医。
44 0
|
2月前
|
前端开发 Java PHP
信息系统架构模型(1) MVC
信息系统架构模型(1) MVC
41 0
|
2月前
|
开发框架 前端开发 .NET
C# .NET面试系列六:ASP.NET MVC
<h2>ASP.NET MVC #### 1. MVC 中的 TempData\ViewBag\ViewData 区别? 在ASP.NET MVC中,TempData、ViewBag 和 ViewData 都是用于在控制器和视图之间传递数据的机制,但它们有一些区别。 <b>TempData:</b> 1、生命周期 ```c# TempData 的生命周期是短暂的,数据只在当前请求和下一次请求之间有效。一旦数据被读取,它就会被标记为已读,下一次请求时就会被清除。 ``` 2、用途 ```c# 主要用于在两个动作之间传递数据,例如在一个动作中设置 TempData,然后在重定向到另
177 5
|
2月前
|
开发框架 前端开发 .NET
进入ASP .net mvc的世界
进入ASP .net mvc的世界
|
2月前
mvc.net分页查询案例——mvc-paper.css
mvc.net分页查询案例——mvc-paper.css