快捷導(dǎo)航

jquery插件EasyUI中form表單提交實(shí)例分享

更新時(shí)間：2016年01月11日 16:26:26 作者：廊坊師范學(xué)院周坤

這篇文章主要介紹了jquery插件EasyUI中form表單提交實(shí)例，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

之前用AJax給Controller傳遞參數(shù)，然后再調(diào)用服務(wù)端的方法對(duì)數(shù)據(jù)庫(kù)進(jìn)行更改，今天碰到一個(gè)新的方法，就是表單的提交，這樣可以省去AJax傳參。

當(dāng)表單提交后，我們可以獲取表單上控件中的值，然后再調(diào)用服務(wù)端的方法對(duì)數(shù)據(jù)庫(kù)進(jìn)行更改。下面的一張截圖是具體的業(yè)務(wù)需求。

一、要實(shí)現(xiàn)的功能：從上面這個(gè)表單中，獲取控件中的值，然后傳遞給后臺(tái)。下面是表單代碼。
二、表單代碼

<div id="Editwin" class="easyui-window" title="編輯班級(jí)信息" 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>班級(jí)名稱(chēng):</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>所屬機(jī)構(gòu):</td> 
          <td> 
            <input id="EditOrganizationID" class="easyui-combobox" name="OrganizationName1" data-options="required:true"/> 
        </tr>      
        <tr> 
          <td>年級(jí):</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 () {        //表單提交前的回調(diào)函數(shù) 
          var isValid = $(this).form('validate');//驗(yàn)證表單中的一些控件的值是否填寫(xiě)正確，比如某些文本框中的內(nèi)容必須是數(shù)字 
          if (!isValid) { 
          } 
          return isValid; // 如果驗(yàn)證不通過(guò)，返回false終止表單提交 
        }, 
        success: function (data) {  //表單提交成功后的回調(diào)函數(shù)，里面參數(shù)data是我們調(diào)用/BasicClass/ModifyClassInfo方法的返回值。 
          if (data > 0) { 
            $.messager.show({ 
              title: '提示消息', 
              msg: '提交成功', 
              showType: 'show', 
              timeout: 1000, 
              style: { 
                right: '', 
                bottom: '' 
              } 
            }); 
            $('#dg').datagrid('reload');  // 重新載入當(dāng)前頁(yè)面數(shù)據(jù)  
            $('#Editwin').window('close'); //關(guān)閉窗口 
          } 
          else { 
            $.messager.alert('提示信息', '提交失敗，請(qǐng)聯(lián)系管理員！', 'warning'); 
        } 
        } 
      }); 
}

四、后臺(tái)Controller獲得表單中的數(shù)據(jù)

//獲得要添加的班級(jí)的名稱(chēng) 
       string ClassName = Request.Form["ClassName"]; 
       //獲得班級(jí)ID 
       Guid ClassID = new Guid(Request.Params["ClassID"]); 
       string ClassNote = Request.Form["Note"];

初學(xué)乍練，感覺(jué)比AJax傳參好用多了，因?yàn)锳Jax穿參時(shí)需要將各個(gè)參數(shù)的名字全部寫(xiě)進(jìn)去，而表單提交時(shí)，默認(rèn)將表單中的內(nèi)容全部傳送過(guò)去，這樣表單中只要有什么數(shù)據(jù)我們就可以在后臺(tái)獲取什么數(shù)據(jù)，當(dāng)然了，這些數(shù)據(jù)是提前綁定好的，或者是我們之前填寫(xiě)好的。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家學(xué)習(xí)jquery程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: