jquery外掛EasyUI中form表單提交例項分享
阿新 • • 發佈:2019-02-09
之前用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程式設計有所幫助。