ASP.NET MVC --- AjaxHelper的使用

AjaxHelper概述

基于jQuery实现Ajax

1. 需要大量的js内容

2. 一般都会通过$.ajax(),$.get(),$.post()提交

AjaxHelper开发

1. 和htmlHelper对应，辅助输出具有Ajax功能的视图

2. 视图类型包含名为Ajax的AjaxHelper类型对象

AjaxHelper成员

主要属性	说明
string UpdateTargetId	服务器响应来更新的DOM元素的ID
string Confirm	提交请求之前显示在确认窗口中的消息
string HttpMethod	HTTP的请求方法{Get或者Post}
InsertionMode InsertionMode	将响应插入目标DOM元素的模式
int LoadingElementDuration	控制在显示或隐藏加载元素时的动画持续时间
string OnBegin	在更新页面之前调用的JavaScript函数
string OnSuccess	在成功更新页面之后调用的JavaScript函数

AjaxHelper的应用

1. 修改Index视图和控制器实现无刷新查询

   1. 添加两个jQuery引用

   2. 修改成无刷新表单

          <script src="~/Scripts/jquery-3.4.1.js"></script>
          <script src="~/Scripts/jquery.validate.js"></script>
          <script src="~/Scripts/jquery.validate.unobtrusive.js"></script>
          @using (Ajax.BeginForm("GetUserList", new AjaxOptions { UpdateTargetId = "Surebtn" ,OnSuccess = "Success",  HttpMethod="post",Confirm = "确定查询"}))
          {
              <input type="radio" name="Sex" value="男" />@("男")
              <input type="radio" name="Sex" value="女" />@("女")
              <input type="submit" value="加载所有用户" id="Surebtn"/>
              <hr />
              <table id="tb">
                  <tr id="title">
                      <td>账号</td>
                      <td>姓名</td>
                      <td>性别</td>
                      <td>年龄</td>
                      <td>电话</td>
                      <td>密码</td>
                  </tr>
              </table>
          }
      ​