Beispiel für die Freigabe der Formularübermittlung im JQuery-Plug-In EasyUI_jquery

Zuvor habe ich AJax verwendet, um Parameter an den Controller zu übergeben, und dann die serverseitige Methode aufgerufen, um Änderungen an der Datenbank vorzunehmen. Heute bin ich auf eine neue Methode gestoßen, nämlich die Formularübermittlung, die AJax überflüssig machen kann Parameter übergeben.

Nachdem das Formular gesendet wurde, können wir den Wert im Steuerelement im Formular abrufen und dann die serverseitige Methode aufrufen, um Änderungen an der Datenbank vorzunehmen. Der Screenshot unten zeigt eine spezifische Geschäftsanforderung.

1. Zu implementierende Funktion: Holen Sie sich aus dem obigen Formular den Wert im Steuerelement und übergeben Sie ihn dann an den Hintergrund. Unten finden Sie den Formularcode.
2. Formularcode

<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> 

3. Formularübermittlungscode

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'); 
        } 
        } 
      }); 
} 

4. Der Hintergrundcontroller erhält die Daten im Formular

//获得要添加的班级的名称 
       string ClassName = Request.Form["ClassName"]; 
       //获得班级ID 
       Guid ClassID = new Guid(Request.Params["ClassID"]); 
       string ClassNote = Request.Form["Note"]; 

Nach der ersten Übung habe ich das Gefühl, dass es viel einfacher zu verwenden ist als das Übergeben von Parametern mit AJax, da AJax beim Übergeben von Parametern alle Namen jedes Parameters schreiben muss und beim Absenden des Formulars der gesamte Inhalt des Formulars geschrieben wird Standardmäßig gesendet werden, damit im Formular Solange Daten vorhanden sind, können wir diese im Hintergrund abrufen. Natürlich sind die Daten im Voraus gebunden oder wir haben sie zuvor ausgefüllt.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für alle hilfreich sein, die JQuery-Programmierung zu erlernen.