使用Ajax.BeginForm实现异步刷新

1 在StoreController下面添加操作 

  public ActionResult ArtistSearch(string q)
        {
            List<Album> lst = db.Albums.Where(s => s.Artist.Name.ToUpper().StartsWith(q)).ToList();
            return PartialView(lst);

        }

2. 给上面的操作方法添加分部视图

@model IEnumerable<WEB1110.Models.Album>

    <table class="table table-condensed">
        <tr>
            <th>@Html.DisplayNameFor(m=>m.Title)</th>
            <th>@Html.DisplayNameFor(m=>m.GenreId)</th>
            <th>@Html.DisplayNameFor(m=>m.ArtistId)</th>
        </tr>
        @foreach (var item in Model)
        {
            <tr>
                <td>@item.Title</td>
                <td>@item.Genre.Name</td>
                <td>@item.Artist.Name</td>
            </tr>
        }
    </table>

3 在Store Index视图上面增加异步窗体 

<div class="panel panel-default">
    <div class=" panel-heading">Artist Search</div>
    <div class="panel-body">
        @using (Ajax.BeginForm("ArtistSearch", "Store", new AjaxOptions
          {
              UpdateTargetId = "SearchResult",
              InsertionMode = InsertionMode.Replace,
              HttpMethod = "Get"
          //OnFailure = "searchFailed",
        //LoadingElementId = "ajax-loader",
          }))
      
        {
            {
                <div class="form-group">
                    搜索<input type="text" name="q" />
                    <input type="submit" value="submit" />
                </div>
            }
            <div id="SearchResult"></div>
        }


    </div>

</div>

4 在Store Index视图底部添加scripts节，引入ajax

@section scripts{
    
    <script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>
    
    }

5 实现的局部刷新效果