ASP.NET MVC View向Controller提交数据

我们知道使用MVC的一个很重的的用途就是把Controller和View之间进行解耦，通过控制器来调用不同的视图，这就注定了Controller和View之间的传值是一个很重的知识点，这篇博文主要解释一下View向Controller提交数据的几种形式，认识有限，有不足的地方请各位博友能够给完善。

一、通过Json数据

方法一：使用$.getJSON

1. //方式一：根据页码 异步请求 数据
2. function loadPageList(pageIndex) {
3. $.getJSON("/Stu/List/" + pageIndex, null, function (jsonData) {
4. if (jsonData.Statu == "ok") {
5. $("#tbList tr:gt(0)").remove();
6. $("#trTemp").tmpl(jsonData.Data.PagedData).appendTo("#tbList");
7. //生成页码条
8. makePageBar(loadPageList, document.getElementById("pageBar"), jsonData.Data.PageIndex, jsonData.Data.PageCount, 2, jsonData.Data.RowCount);
9. }
10. });
11. }

方法二：使用$.get

1. //方式二：根据页码 异步请求 数据
2. function loadPageList(pageIndex) {
3. $.get("/Stu/List/" + pageIndex, null, function (jsonData) {
4. if (jsonData.Statu == "ok") {
5. $("#tbList tr:gt(0)").remove();
6. $("#trTemp").tmpl(jsonData.Data.PagedData).appendTo("#tbList");
7. //生成页码条
8. makePageBar(loadPageList, document.getElementById("pageBar"), jsonData.Data.PageIndex, jsonData.Data.PageCount, 2, jsonData.Data.RowCount);
9. }
10. }, "json");
11. }

上面这两种方式的到的结果是没有区别的，如果使用$.getJSON，相当于直接指明传递的数据为Json格式；如果使用$.get，则需要在最后加上参数类型"json"即可。

 二、通过From表单

方法一：使用Ajax.BeginForm

1. <!-------------- 添加对话框--开始----------------------------------------->
2. <div id="addDiv">
3. @using (Ajax.BeginForm("Add", new AjaxOptions() { OnSuccess = "afterAdd" }))
4. {
5. <table>
6. <tr>
7. <td>系列名称：</td>
8. <td>
9. @Html.TextBox("SerialName")
10. </td>
11. </tr>
12. </table>
13. }
14. </div>

其中，"Add"是该表单要提交到的Action的名字，OnSuccess="afterAdd"是该表单提交后要执行的js事件，然后再js代码中编写让表单提交的命令即可。

1. //让表单提交
2. $("#addDiv form").submit();

方法二：使用<form></form>

1. <!--导入Word-->
2. <div id="importDiv" style="display: none">
3. <form id="ff" action="/NotifyManage/ImportWord" method="post" enctype="multipart/form-data">
4. <div style="margin-bottom: 20px">
5. <input id="FileUpload" type="file" name="files" data-options="prompt:'请选择一个文件...'" />
6. </div>
7. </form>
8. </div>

然后，使用easyui的jquery提交如下：

1. $('#ff').form('submit', {
2. url: "/NotifyManage/ImportWord/",
3. onSubmit: function () {
4. // do some check
5. // return false to prevent submit;
6. },
7. success: function (data) {
8. $("#importDiv").dialog("close");
9. }
10. });

在这里，有一点需要注意的是，easyui中form提交的url是无法传参的，如果你想通过url传参的话，就需要另外一种形式了。

1. var fileName = document.getElementById("file").value;
2. $('#add').form('submit');
3. $.post("/NotifyManage/Add",
4. { fileName: fileName },
5. function (data) {
6. if (data == "ok") {
7. //关闭对话框，刷新表
8. $("#addDiv").dialog("close");
9. //initTable();
10. $('#tt').datagrid("reload");
11. } else {
12. $.messager.alert("提示消息", data);
13. }
14. });

   三、通过String字符串

方法一：提交单个字符串

1. function Delete(index) {
2. var id = $('#tt').datagrid("getRows")[index].ID;
3. $.messager.confirm('确认', '您确定要删除?', function (r) {
4. if (r) {
5. $.post("/Administrator/Del"+id, function (data) {
6. if (data == "ok") {
7. //刷新表格，去掉选中状态的 那些行。
8. $('#tt').datagrid("reload");
9. $('#tt').datagrid("clearSelections");
10. } else {
11. $.messager.alert("删除失败~~", data);
12. }
13. });
14. }
15. });
16. }

方法二：提交多个字符串

1. //确认设置互评信息按钮事件
2. function OK() {
3. //①取得权重的值ID
4. var weightID = $('#cc').combobox('getValue');
5. //②获取评论人ID
6. var rows = $('#left').datagrid("getRows");
7. var evaluaterIDs = "";
8. for (var i = 0; i < rows.length; i++) {
9. evaluaterIDs += rows[i].ID + ",";
10. }
11. evaluaterIDs = evaluaterIDs.substr(0, evaluaterIDs.length - 1);
12. //③获取被评论人ID
13. var rows = $('#right').datagrid("getRows");
14. var criticsIDs = "";
15. for (var i = 0; i < rows.length; i++) {
16. criticsIDs += rows[i].ID + ",";
17. }
18. criticsIDs = criticsIDs.substr(0, criticsIDs.length - 1);
19. //④提交到后台
20. $.post("/SettingEvaluation/SettingEvaluation",
21. { wid: weightID, eids: evaluaterIDs, cids: criticsIDs });
22. }

提交字符串实际上是根据路由地址中的格式匹配的，提交的格式要和路由中设置的保持一致。