ASP.NET MVC View向Controller提交数据
2015-01-09 16:08
141 查看
我们知道使用MVC的一个很重的的用途就是把Controller和View之间进行解耦,通过控制器来调用不同的视图,这就注定了Controller和View之间的传值是一个很重的知识点,这篇博文主要解释一下View向Controller提交数据的几种形式,认识有限,有不足的地方请各位博友能够给完善。
一、通过Json数据
方法一:使用$.getJSON
方法二:使用$.get
上面这两种方式的到的结果是没有区别的,如果使用$.getJSON,相当于直接指明传递的数据为Json格式;如果使用$.get,则需要在最后加上参数类型"json"即可。
二、通过From表单
方法一:使用Ajax.BeginForm
其中,"Add"是该表单要提交到的Action的名字,OnSuccess="afterAdd"是该表单提交后要执行的js事件,然后再js代码中编写让表单提交的命令即可。
方法二:使用<form></form>
在这里,有一点需要注意的是,easyui中form提交的url是无法传参的,如果你想通过url传参的话,就需要另外一种形式了。
三、通过String字符串
方法一:提交单个字符串
方法二:提交多个字符串
提交字符串实际上是根据路由地址中的格式匹配的,提交的格式要和路由中设置的保持一致。
总结:
刚接触这部分内容的时候,感觉很凌乱,总结粘贴复制别人的代码,在学习的过程中遇到不会的知识点通过查询easyui帮助文档或者自己思考去解决,思路一点一点的清晰,答案也就一步一步地出来了。有一点感触就是,还是在项目中学习到的东西比较牢靠,因为有亲自动手去实践,动脑去思考;同时,在项目中也培养了我们的细心和耐心,在解决问题中渐渐成长。
一、通过Json数据
方法一:使用$.getJSON
//方式一:根据页码 异步请求 数据 function loadPageList(pageIndex) { $.getJSON("/Stu/List/" + pageIndex, null, function (jsonData) { if (jsonData.Statu == "ok") { $("#tbList tr:gt(0)").remove(); $("#trTemp").tmpl(jsonData.Data.PagedData).appendTo("#tbList"); //生成页码条 makePageBar(loadPageList, document.getElementById("pageBar"), jsonData.Data.PageIndex, jsonData.Data.PageCount, 2, jsonData.Data.RowCount); } }); }
方法二:使用$.get
//方式二:根据页码 异步请求 数据 function loadPageList(pageIndex) { $.get("/Stu/List/" + pageIndex, null, function (jsonData) { if (jsonData.Statu == "ok") { $("#tbList tr:gt(0)").remove(); $("#trTemp").tmpl(jsonData.Data.PagedData).appendTo("#tbList"); //生成页码条 makePageBar(loadPageList, document.getElementById("pageBar"), jsonData.Data.PageIndex, jsonData.Data.PageCount, 2, jsonData.Data.RowCount); } }, "json"); }
上面这两种方式的到的结果是没有区别的,如果使用$.getJSON,相当于直接指明传递的数据为Json格式;如果使用$.get,则需要在最后加上参数类型"json"即可。
二、通过From表单
方法一:使用Ajax.BeginForm
<!-------------- 添加对话框--开始-----------------------------------------> <div id="addDiv"> @using (Ajax.BeginForm("Add", new AjaxOptions() { OnSuccess = "afterAdd" })) { <table> <tr> <td>系列名称:</td> <td> @Html.TextBox("SerialName") </td> </tr> </table> } </div>
其中,"Add"是该表单要提交到的Action的名字,OnSuccess="afterAdd"是该表单提交后要执行的js事件,然后再js代码中编写让表单提交的命令即可。
//让表单提交 $("#addDiv form").submit();
方法二:使用<form></form>
<!--导入Word--> <div id="importDiv" style="display: none"> <form id="ff" action="/NotifyManage/ImportWord" method="post" enctype="multipart/form-data"> <div style="margin-bottom: 20px"> <input id="FileUpload" type="file" name="files" data-options="prompt:'请选择一个文件...'" /> </div> </form> </div>然后,使用easyui的jquery提交如下:
$('#ff').form('submit', { url: "/NotifyManage/ImportWord/", onSubmit: function () { // do some check // return false to prevent submit; }, success: function (data) { $("#importDiv").dialog("close"); } });
在这里,有一点需要注意的是,easyui中form提交的url是无法传参的,如果你想通过url传参的话,就需要另外一种形式了。
var fileName = document.getElementById("file").value; $('#add').form('submit'); $.post("/NotifyManage/Add", { fileName: fileName }, function (data) { if (data == "ok") { //关闭对话框,刷新表 $("#addDiv").dialog("close"); //initTable(); $('#tt').datagrid("reload"); } else { $.messager.alert("提示消息", data); } });
三、通过String字符串
方法一:提交单个字符串
function Delete(index) { var id = $('#tt').datagrid("getRows")[index].ID; $.messager.confirm('确认', '您确定要删除?', function (r) { if (r) { $.post("/Administrator/Del"+id, function (data) { if (data == "ok") { //刷新表格,去掉选中状态的 那些行。 $('#tt').datagrid("reload"); $('#tt').datagrid("clearSelections"); } else { $.messager.alert("删除失败~~", data); } }); } }); }
方法二:提交多个字符串
//确认设置互评信息按钮事件 function OK() { //①取得权重的值ID var weightID = $('#cc').combobox('getValue'); //②获取评论人ID var rows = $('#left').datagrid("getRows"); var evaluaterIDs = ""; for (var i = 0; i < rows.length; i++) { evaluaterIDs += rows[i].ID + ","; } evaluaterIDs = evaluaterIDs.substr(0, evaluaterIDs.length - 1); //③获取被评论人ID var rows = $('#right').datagrid("getRows"); var criticsIDs = ""; for (var i = 0; i < rows.length; i++) { criticsIDs += rows[i].ID + ","; } criticsIDs = criticsIDs.substr(0, criticsIDs.length - 1); //④提交到后台 $.post("/SettingEvaluation/SettingEvaluation", { wid: weightID, eids: evaluaterIDs, cids: criticsIDs }); }
提交字符串实际上是根据路由地址中的格式匹配的,提交的格式要和路由中设置的保持一致。
总结:
刚接触这部分内容的时候,感觉很凌乱,总结粘贴复制别人的代码,在学习的过程中遇到不会的知识点通过查询easyui帮助文档或者自己思考去解决,思路一点一点的清晰,答案也就一步一步地出来了。有一点感触就是,还是在项目中学习到的东西比较牢靠,因为有亲自动手去实践,动脑去思考;同时,在项目中也培养了我们的细心和耐心,在解决问题中渐渐成长。
相关文章推荐
- ASP.NET MVC View向Controller提交数据
- ASP.NET MVC C# View下的cshtml 向Controller提交数据
- ASP.NET MVC中从前台页面视图(View)传递数据到后台控制器(Controller)方式
- 【转载】ASP.NET MVC中Controller与View之间的数据传递总结
- 【Asp.Net MVC】Controller和View之间传递数据
- ASP.NET MVC中Controller与View之间的数据传递总结
- ASP.NET MVC中Controller与View之间的数据传递总结 (来自网络)
- Asp.net MVC中 Controller 与 View之间的数据传递
- ASP.NET MVC 中将数据从View传递到控制器中的表单提交法
- ASP.NET MVC中从前台页面视图(View)传递数据到后台控制器(Controller)方式
- ASP.NET MVC中Controller与View之间的数据传递总结
- Asp.net mvc中controller与view间的如何传递数据
- ASP.NET MVC中从后台控制器(Controller)传递数据到前台页面视图(View)方式
- ASP.NET MVC中Controller与View之间的数据传递
- ASP.NET MVC中Controller与View之间的数据传递总结
- asp.net MVC前台View页面向后台Controller控制器传递数据的几种方式
- ASP.NET MVC中从前台页面视图(View)传递数据到后台控制器(Controller)方式
- 浅析ASP.NET MVC中Controller与View数据传递
- 浅析ASP.NET MVC中Controller与View数据传递
- 【转载】ASP.NET MVC中Controller与View之间的数据传递总结