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.  
    
4.  
   $.get("/Stu/List/" + pageIndex, null, function (jsonData) {
5.  
   if (jsonData.Statu == "ok") {
6.  
   $("#tbList tr:gt(0)").remove();
7.  
   $("#trTemp").tmpl(jsonData.Data.PagedData).appendTo("#tbList");
8.  
   //生成页码条
9.  
   makePageBar(loadPageList, document.getElementById("pageBar"), jsonData.Data.PageIndex, jsonData.Data.PageCount, 2, jsonData.Data.RowCount);
10.  
    }
11.  
    }, "json");
12.  
     
13.  
    }

 

 

    上面这两种方式的到的结果是没有区别的，如果使用$.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.  
     
13.  
    </table>
14.  
    }
15.  
     
16.  
    </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.  
    
9.  
   $("#importDiv").dialog("close");
10.  
    }
11.  
    });

 

    

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

 

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

 

   三、通过String字符串

 

    方法一：提交单个字符串

    

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

 

    方法二：提交多个字符串

    

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

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

 

    

    总结：

    刚接触这部分内容的时候，感觉很凌乱，总结粘贴复制别人的代码，在学习的过程中遇到不会的知识点通过查询easyui帮助文档或者自己思考去解决，思路一点一点的清晰，答案也就一步一步地出来了。有一点感触就是，还是在项目中学习到的东西比较牢靠，因为有亲自动手去实践，动脑去思考；同时，在项目中也培养了我们的细心和耐心，在解决问题中渐渐成长。