jQuery實現點擊行選中或取消CheckBox的方法
642
2024-02-23
之前用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程序設計有所幫助。
#免責聲明#
本站[綠夏技術導航]提供的一切軟件、教程和內容信息僅限用于學習和研究目的;不得將上述內容用于商業或者非法用途,否則,一切后果請用戶自負。本站信息來自網絡收集整理,版權爭議與本站無關。您必須在下載后的24個小時之內,從您的電腦或手機中徹底刪除上述內容。如果您喜歡該程序或內容,請支持正版,購買注冊,得到更好的正版服務。我們非常重視版權問題,如有侵權請郵件[admin@lxwl520.com]與我們聯系進行刪除處理。敬請諒解!