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', width: '+=25' })

.animate({ height: '-=25', width: '-=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")