Ajax.BeginForm 异步搜索

视图页面的代码如下:

<div id="ajax_search">
    @using (Ajax.BeginForm(
        "Search",//Action
        "Test",//Controller
        new AjaxOptions
        {
            InsertionMode = InsertionMode.InsertAfter,
            HttpMethod = "GET",
            UpdateTargetId = "ajax_search",
            LoadingElementId = "loader",//服务端在执行操作时,展示一个进度给用户看,相当于进度条
            OnFailure = "Failed",//服务端执行失败后调用的js方法
            OnSuccess = "Success"//服务端执行成功后调用的js方法
        }))
    {
        <input type="text" name="q" />
        <input type="submit" value="搜索" />
        <img id="loader" style="display: none" src="~/Content/img/progress.gif" />
    }

</div>

控制器内要有一个执行异步搜索的Action,代码如下:

//异步搜索
        public ActionResult Search(string q)
        {
           // throw new Exception("故意让你报错");
           // System.Threading.Thread.Sleep(3000);
            string msg = "你搜索的关键词:"+q;
            return PartialView("_search", msg);
        }

要新增一个分布视图【也叫:部分视图】到指定目录里面,用于展示异步搜索的结果。

当然跟Ajax.ActionLink 介绍的一样,也需要引用jquery.unobtrusive-ajax.min.js到母版页里面【_Layout.cshtml】

原文地址:https://www.cnblogs.com/jcdd-4041/p/4173859.html