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 实现的局部刷新效果