ASP.NET MVC从视图传递多个模型到Controller
从后台组织好数据然后传递到页面倒是水到渠成很方便,因为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.调试看结果
结果显示我们接收到了前台传过来的每一个数据,完工。
ASP.NET MVC从视图传递多个模型到Controller的更多相关文章
- ASP.NET MVC 5 - 视图
在本节中,你要去修改HelloWorldController类,使用视图模板文件,在干净利索地封装的过程中:客户端浏览器生成HTML. 您将创建一个视图模板文件,其中使用了ASP.NET MVC 3所 ...
- [转]ASP.NET MVC 5 - 视图
在本节中,你要去修改HelloWorldController类,使用视图模板文件,在干净利索地封装的过程中:客户端浏览器生成HTML. 您将创建一个视图模板文件,其中使用了ASP.NET MVC 3所 ...
- Asp.net MVC Razor视图模版动态渲染PDF,Razor模版生成静态Html
Asp.net MVC Razor视图模版动态渲染PDF,Razor模版生成静态Html 1.前言 上一篇文章我开源了轮子,Asp.net Core 3.1 Razor视图模版动态渲染PDF,然后,很 ...
- asp.net mvc 部分视图加载区别
ASP.NET MVC 部分视图 ASP.NET(11) 版权声明:本文为博主原创文章,未经博主允许不得转载. [部分视图] ASP.NET MVC 里的部分视图,相当于 Web Form 里的 ...
- ASP.NET MVC 5 - 给电影表和模型添加新字段
在本节中,您将使用Entity Framework Code First来实现模型类上的操作.从而使得这些操作和变更,可以应用到数据库中. 默认情况下,就像您在之前的教程中所作的那样,使用 Entit ...
- ASP.NET MVC 5 学习教程:添加模型
原文 ASP.NET MVC 5 学习教程:添加模型 起飞网 ASP.NET MVC 5 学习教程目录: 添加控制器 添加视图 修改视图和布局页 控制器传递数据给视图 添加模型 创建连接字符串 通过控 ...
- [转]ASP.NET MVC 5 - 给电影表和模型添加新字段
在本节中,您将使用Entity Framework Code First来实现模型类上的操作.从而使得这些操作和变更,可以应用到数据库中. 默认情况下,就像您在之前的教程中所作的那样,使用 Entit ...
- 【译】ASP.NET MVC 5 教程 - 4:添加模型
原文:[译]ASP.NET MVC 5 教程 - 4:添加模型 在本节中,我们将添加一些管理电影数据库的类,这些类在ASP.NET MVC 应用程序中扮演“Model”的角色. 我们将使用.NET F ...
- ASP.NET MVC之视图生成URL(二)
前言 上一节我们讲述了MVC中从控制器到视图传递数据的四种方式,想必大家早已掌握了,那我们继续往下走. 话题 在MVC的Web应用程序中,我们经常会出现这样的操作,从一个视图跳转到另外一个视图,大部分 ...
随机推荐
- 关于几种编码详解(Unicode,UTF-8,GB系列)
最近学Python,老是被编码的问题搞得晕乎乎的,晚上看了好多篇博客,整理出来一个比较清晰的关于几种编码以及字符集的思路. 主要参考:http://blog.sina.com.cn/s/blog_6d ...
- UIAlertController、UIAlertAction 警告框
NS_CLASS_AVAILABLE_IOS(8_0) @interface UIAlertAction : NSObject <NSCopying> //创建操作 + (instan ...
- JSTL和EL表达式多重if问题
俾人以前在写一个查询功能时,由于结果状态分好几种,于是页面就用<c:if></c:if>写了一大堆来判断,后来上网查了下资料,发现有个语法类似于多重if,挺方便的,语法是 &l ...
- iOS基础之Xcode 8相关
1.屏蔽日志输出 2.注释相关 注释不能使用:命令运行: sudo /usr/libexec/xpccachectl VVDocument方式注释快捷键:option + command + /
- springboot使用之三:springboot使用logback日志
springboot 默认使用的日志就是logback,所以使用logback不需要添加日志相关依赖了,执行 添加logback.xml配置文件,springboot这个聪明的框架便能识处理你的配置. ...
- Mac OS X 访问 Windows 共享文件夹
Mac OS X 访问 Windows 共享文件夹 mac没有网络邻居,但可以使用finder访问局域网中windows共享的文件 1.点击 Finder 前往菜单中的「前往服务器」(或快捷键 com ...
- Linux netstat命令详解
Linux netstat命令详解 一 简介 Netstat 命令用于显示各种网络相关信息,如网络连接,路由表,接口状态 (Interface Statistics),masquerade 连接,多 ...
- 置入式模型inclusion model和显示具现化
1.置入式模型 链接错误: 大多数非模板程序代码的组织如下:A,类声明在头文件中: B:全局变量和非inline函数在cpp文件中定义 但是,如果模板程序也这样组织,则会出错.原因在于:函数模板的定义 ...
- Access 2003下载地址和密钥
电驴下载链接:ed2k://|file|sc_access_2003.iso|645523456|63AA6C30D609FDC22D056C4B424283F9|/ 安装SN: HH74C-P8F7 ...
- 用cookie记住用户名
有时候,我们在做登陆框时会有个复选框选择请记住我,或者有时候会遇到一些弹出框说下次不再提醒,此功能我们可以用js中的cookie实现此功能 下面记录一下如何实现该功能: 利用cookie记录用户名 1 ...