Exemple de partage de soumission de formulaire dans le plug-in jquery EasyUI_jquery

Auparavant, j'utilisais AJax pour transmettre des paramètres au contrôleur, puis j'appelais la méthode côté serveur pour apporter des modifications à la base de données. Aujourd'hui, j'ai rencontré une nouvelle méthode, la soumission de formulaire, qui peut éviter à AJax de le faire. passer des paramètres.

Une fois le formulaire soumis, nous pouvons obtenir la valeur dans le contrôle du formulaire, puis appeler la méthode côté serveur pour apporter des modifications à la base de données. La capture d'écran ci-dessous correspond à une exigence commerciale spécifique.

1. Fonction à implémenter : A partir du formulaire ci-dessus, récupérez la valeur dans le contrôle puis passez-la en arrière-plan. Vous trouverez ci-dessous le code du formulaire.
2. Code du formulaire

<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. Code de soumission du formulaire

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. Le contrôleur d'arrière-plan obtient les données sous la forme

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

Après une première pratique, je pense qu'il est beaucoup plus facile à utiliser que AJax en passant des paramètres, car AJax doit écrire tous les noms de chaque paramètre lors du passage des paramètres, et lorsque le formulaire est soumis, tout le contenu du formulaire sera être envoyé par défaut, de sorte que dans le formulaire Tant qu'il y a des données, nous pouvons les obtenir en arrière-plan. Bien sûr, les données sont liées à l'avance, ou nous les avons déjà remplies.

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à tout le monde d'apprendre la programmation jquery.