之前用AJax給Controller傳遞參數，然后再調用服務端的方法對數據庫進行更改，今天碰到一個新的方法，就是表單的提交，這樣可以省去AJax傳參。
當表單提交后，我們可以獲取表單上控件中的值，然后再調用服務端的方法對數據庫進行更改。下面的一張截圖是具體的業務需求。
一、要實現的功能：從上面這個表單中，獲取控件中的值，然后傳遞給后臺。下面是表單代碼。
二、表單代碼
<div id="Editwin" class="easyui-window" title="編輯班級信息" style="width: 400px; height: auto;top:105px" data-options="closed:true,collapsible:false,minimizable:false,maximizable:false"> <div style="margin-top: 30px; margin-bottom: 30px; margin-left: 70px;"> <form id="EditForm" method="post"> <table> <tr> <td>班級名稱:</td> <td> <input class="easyui-validatebox" type="text" id="EditClassName" name="ClassName" data-options="required:true,validType:['maxLength[20]']"/> </td> </tr> <tr> <td> <input style="display:none" class="easyui-textbox" type="text" id="EditClassID" name="ClassID" data-options="required:true"/> </td> </tr> <tr> <td>所屬機構:</td> <td> <input id="EditOrganizationID" class="easyui-combobox" name="OrganizationName1" data-options="required:true"/> </tr> <tr> <td>年級:</td> <td> <input id="EditGradeID" class="easyui-combobox" name="GradeName" data-options="required:true"/> </tr> <tr> <td>備注:</td> <td> <textarea class="easyui-validatebox" id="NoteId" name="Note" validType:['maxLength[50]></textarea> </tr> </table> <div style="margin-top: 20px;"> <a class="easyui-linkbutton" data-options="iconCls:'icon-ok'" style="margin-left: 10px;" onclick="EditsubmitForm()">確定</a> <a class="easyui-linkbutton" data-options="iconCls:'icon-cancel'" style="margin-left: 60px;" onclick="EditclearForm()">取消</a> </div> </form> </div> </div>
三、表單提交代碼
function EditsubmitForm() { $('#EditForm').form('submit', { url: "/BasicClass/ModifyClassInfo", onSubmit: function () { //表單提交前的回調函數 var isValid = $(this).form('validate');//驗證表單中的一些控件的值是否填寫正確，比如某些文本框中的內容必須是數字 if (!isValid) { } return isValid; // 如果驗證不通過，返回false終止表單提交 }, success: function (data) { //表單提交成功后的回調函數，里面參數data是我們調用/BasicClass/ModifyClassInfo方法的返回值。 if (data > 0) { $.messager.show({ title: '提示消息', msg: '提交成功', showType: 'show', timeout: 1000, style: { right: '', bottom: '' } }); $('#dg').datagrid('reload'); // 重新載入當前頁面數據 $('#Editwin').window('close'); //關閉窗口 } else { $.messager.alert('提示信息', '提交失敗，請聯系管理員！', 'warning'); } } }); } 四、后臺Controller獲得表單中的數據
//獲得要添加的班級的名稱 string ClassName = Request.Form["ClassName"]; //獲得班級ID Guid ClassID = new Guid(Request.Params["ClassID"]); string ClassNote = Request.Form["Note"];
初學乍練，感覺比AJax傳參好用多了，因為AJax穿參時需要將各個參數的名字全部寫進去，而表單提交時，默認將表單中的內容全部傳送過去，這樣表單中只要有什么數據我們就可以在后臺獲取什么數據，當然了，這些數據是提前綁定好的，或者是我們之前填寫好的。
以上就是本文的全部內容，希望對大家學習jquery程序設計有所幫助。
新聞熱點
疑難解答
