首页 > 代码库 > Ajax.BeginForm 异步搜索

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="http://www.mamicode.com/搜索" />        <img id="loader" style="display: none" src="http://www.mamicode.com/~/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】

Ajax.BeginForm 异步搜索