jquery 플러그인 EasyUI_jquery에서 양식 제출 공유 예

이전에는 AJax를 사용하여 컨트롤러에 매개변수를 전달한 다음 서버측 메서드를 호출하여 데이터베이스를 변경했습니다. 오늘은 AJax의 필요성을 줄일 수 있는 양식 제출이라는 새로운 메서드를 만났습니다. 매개변수를 전달합니다.

양식이 제출된 후 양식 컨트롤의 값을 가져온 다음 서버측 메서드를 호출하여 데이터베이스를 변경할 수 있습니다. 아래 스크린샷은 특정 비즈니스 요구 사항입니다.

1. 구현할 기능: 위 폼에서 컨트롤에 값을 가져온 후 백그라운드로 전달합니다. 아래는 양식 코드입니다.
2. 양식 코드

<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. 양식 제출 코드

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. 백그라운드 컨트롤러는 다음 형식으로 데이터를 가져옵니다

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

첫번째 연습을 해본 결과 AJax가 매개변수를 전달할 때 각 매개변수의 이름을 모두 작성해야 하고 양식이 제출되면 양식의 모든 내용이 입력되기 때문에 AJax 매개변수 전달보다 사용하기가 훨씬 쉽다고 느꼈습니다. 기본적으로 전송되므로 데이터가 있는 한 백그라운드에서 데이터를 가져올 수 있습니다. 물론 데이터는 미리 바인딩되어 있거나 이전에 채워져 있습니다.

위 내용은 이 글의 전체 내용입니다. Jquery 프로그래밍을 배우는 모든 분들에게 도움이 되었으면 좋겠습니다.