問題
當(dāng)你查找一些特殊的東西，當(dāng)你輸入準(zhǔn)確的詞時(shí)，找到它可能是困難的（或者很耗時(shí)）。在輸入的時(shí)候展示出結(jié)果（自動(dòng)完成），使查找變得更簡單。
解決方案
使用JQuery自動(dòng)完成插件，更新現(xiàn)有圖書列表頁面上的搜索，當(dāng)用戶鍵入的時(shí)候立即顯示結(jié)果。
討論
自動(dòng)完成插件是不會(huì)象jQuery基本庫一樣自動(dòng)包含在MVC項(xiàng)目中的，所以需要做的第一件事就是的是下載插件
訪問http://jquery.com/。兩個(gè)主要的文件是必需的：JavaScript文件和CSS文件。把新下載的javascript文件放到你MVC應(yīng)用程序的script 文件夾下。CSS文件可以直接添加到您的content目錄。
這個(gè)配方也將介紹在view中使用 rendering sections。在shared文件夾下layout中自動(dòng)添加了2個(gè)javascript文件和1個(gè)css文件。這些是Ajax和不唐突的Ajax和網(wǎng)站主css文件。每次加載的內(nèi)容越多，頁面視圖加載越慢。與其在每個(gè)頁面都去包含可能不必要的javascript和css 文件，不如在layout中添加一個(gè)新的RenderSection()。這允許特別的view在<head>標(biāo)簽去加載特別的javascript或css，但不是每頁都添加他們。
下邊是一個(gè)更新后的Views/Shared/_Layout.cshtml，他使用了一個(gè)新的RenderSection（）。
<!DOCTYPE html><html><head><title>_Mobile</title><link href="@Url.Content(" rel="external nofollow" rel="external nofollow" ~/Content/Site.css")" rel="stylesheet" type="text/css" /><script src="@Url.Content("~/Scripts/jquery-1.6.2.min.js")" type="text/javascript"></script><script type="text/javascript">$(document).ready(function () {if (window.innerWidth <= 480) {$("link[rel=stylesheet]").attr({ href: "@Url.Content("~/Content/jquery.mobile-1.0b1.min.css")" });}});</script>@RenderSection("JavaScriptAndCSS", required: false)</head><body><div class="page" data-role="page"><div id="header" data-role="header"><div id="title"><h1>My MVC Application</h1></div><div id="logindisplay" class="ui-bar">@Html.Partial("_LogOnPartial")[ @Html.ActionLink("English", "ChangeLanguage", "Home", new { language = "en" }, null) ][ @Html.ActionLink("Français", "ChangeLanguage", "Home", new { language = "fr" }, null) ]</div><div id="menucontainer" class="ui-bar"><ul id="menu"><li>@Html.ActionLink("Home", "Index", "Home", null, new Dictionary<string, object> {{ "data-role", "button" }})</li><li>@Html.ActionLink("About", "About", "Home", null, new Dictionary<string, object> { { "data-role", "button" }})</li></ul></div></div><div id="main" data-role="content">@RenderBody()</div><div id="footer" data-role="footer"></div></div></body></html>主要的CSS文件和核心的JQuery文件被留下來了，因?yàn)閏ss在每個(gè)也都需要，并且絕大多數(shù)網(wǎng)頁也需要JQuery。然而新的JQuery文件和不唐突的AJAX不是每個(gè)頁面都需要的。
新聞熱點(diǎn)
疑難解答
圖片精選
