MVC4 jQuery UI自动完成

view中嵌入如下代码引入jquery-ui

<script src="~/Scripts/jquery-1.6.2.min.js"
></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"
></script>
<script src~/Scripts/jquery-ui.min.js"
></script>

使用jquery-ui实现特效

$(function () {
$("#album-list img").mouseover(function () {
$(this).effect("bounce");
});
});

$(this).effect("bounce", { time: 3, distance: 40 });

jquery实现

$(function () {
$("#album-list img").mouseover(function () {
$(this).animate({ height: '+=25',  '+=25' })
.animate({ height: '-=25',  '-=25' });
});
});

Autocomplete with jQuery UI

view中引入如下代码

<link href="~/Content/Site.css) rel="stylesheet"
type="text/css" />
<link href="~/Content/themes/base/jquery-ui.css"
rel="stylesheet"
type="text/css" />
<script src="~/Scripts/jquery-1.4.4.min.js"
></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"
></script>
<script src~/Scripts/jquery-ui.min.js"
></script>

Adding the Behavior input中之间获取结果的action

<input type="text" name="q"
data-autocomplete-source="@Url.Action("QuickSearch", "Home")" />

JavaScript中实现自动完成

$("input[data-autocomplete-source]").each(function () {
var target = $(this);
target.autocomplete({ source: target.attr("data-autocomplete-source") });
});

Building the Data Source构建数据源

public ActionResult QuickSearch(string term)
{
var artists = GetArtists(term).Select(a => new {value = a.Name});
return Json(artists, JsonRequestBehavior.AllowGet);
}
private List<Artist> GetArtists(string searchString)
{
return storeDB.Artists
.Where(a => a.Name.Contains(searchString))
.ToList();
}

JSON and Client-Side Templates

<span class="detail">
Rating: {{AverageReview}}
Total Reviews: {{TotalReviews}}
</span>

Adding Templates引入JS

通过nuget安装mustache.js

<script src="~/Scripts/jquery-1.6.2.min.js"
></script>

<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"
></script>
<script src="~/Scripts/jquery-ui.min.js"
></script>
<script src="~/Scripts/mustache.js"
></script>

Modifying the Search Form

@using (Ajax.BeginForm("ArtistSearch", "Home",
new AjaxOptions {
InsertionMode=InsertionMode.Replace,
HttpMethod="GET",
OnFailure="searchFailed",
LoadingElementId="ajax-loader",
UpdateTargetId="searchresults",
}))
{
<input type="text" name="q"

data-autocomplete-source="@Url.Action("QuickSearch", "Home")" />
<input type="submit" value="search" />
<img id="ajax-loader"
src="~/Content/Images/ajax-loader.gif"
style="display:none"/>
}

Index.cshtml

<form id="artistSearch" method="get" action="@Url.Action("ArtistSearch", "Home")">
<input type="text" name="q"
data-autocomplete-source="@Url.Action("QuickSearch", "Home")" />
<input type="submit" value="search" />
<img id="ajax-loader" src="~/Content/Images/ajax-loader.gif"
style="display:none"/>
</form>

js中实现提交

$("#artistSearch").submit(function(event) {
event.preventDefault();
var form = $(this);
$.getJSON(form.attr("action"), form.serialize(), function(data) {
var html = Mustache.to_html($("#artistTemplate").html(), { artists: data });
$("#searchresults").empty().append(html);
});
});

Getting JSON获取json数据

public ActionResult ArtistSearch(string q)
{
var artists = GetArtists(q);
return Json(artists, JsonRequestBehavior.AllowGet);
}

Mustache模版定义

<script id="artistTemplate" type="text/html">
<ul>
{{#artists}}
<li>{{Name}}</li>
{{/artists}}
</ul>
</script>
<div id="searchresults">
</div>

jQuery.ajax for Maximum Flexibility灵活性

$("#artistSearch").submit(function (event) {
event.preventDefault();
var form = $(this);
$.ajax({
url: form.attr("action"),
data: form.serialize(),
beforeSend: function () {
$("#ajax-loader").show();
},
complete: function () {
$("#ajax-loader").hide();
},
error: searchFailed,
success: function (data) {
var html = Mustache.to_html($("#artistTemplate").html(),
{ artists: data });
$("#searchresults").empty().append(html);
}
});
});

Bundling and Minifi cation压缩js、css

bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-1.*"));
bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css"));
bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
"~/Scripts/jquery-ui*"));

视图中使用

@Scripts.Render("~/bundles/jquery")
@Styles.Render("~/Content/css")