MVC3----使用Jquery模板异步加载数据

*首先需要安装JQuery模板（右键引用->管理NuGet程序包->搜索jquery.templates->安装）

--引用脚本

<script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="@Url.Content("~/Scripts/jQuery.tmpl.min.js")"></script>

--控制器代码：

public ActionResult QuickSearch(string term){     var list = db.Demos.Where(r => r.Name.Contains(term)).Select(r => r).ToList();     return Json(list, JsonRequestBehavior.AllowGet);}

--视图代码：

①：

<script type="text/javascript">    $(function () {        //表单提交触发        $("#personsearch").submit(function (event) {            event.preventDefault(); //重要（阻止直接提交）            var form = $(this);            $.getJSON(form.attr("action"), form.serialize(), function (data) {                $("#personTemplate").tmpl(data).appendTo("#data-ul");            });        });    });</script><!--表单--><form id="personsearch" method="get" action="@Url.Action("QuickSearch", "PersonError")">    <input type="text" name="term" />    <input type="submit" value="提交" />    <img id="img" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="@Url.Content("~/Content/img/017.gif")"  /></form><!--模板--><script type="text/x-jquery-tmpl" id="personTemplate">    <li>${Name}</li></script><!--容器--><div id="searchresults">    <ul id="data-ul"></ul></div>

②：使用ajax控制请求的过程（比如加载中显示加载动态，加载失败弹出提示框等等）

<script type="text/javascript">    $(function () {        //表单提交触发        $("#personsearch").submit(function (event) {            event.preventDefault(); //重要（阻止直接提交）            var form = $(this);            $.ajax({                url: form.attr("action"),//链接                data: form.serialize(),//数据                beforeSend: function () { $("#img").show(); },//开始请求（加载动画）                complete: function () { $("#img").hide(); },//请求完成                error: function () { alert("失败"); },//请求失败                success: function (data) {//请求成功                    $("#personTemplate").tmpl(data).appendTo("#data-ul");                }            })        });    });</script><!--表单--><form id="personsearch" method="get" action="@Url.Action("QuickSearch", "PersonError")">    <input type="text" name="term" />    <input type="submit" value="提交" />    <img id="img" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="@Url.Content("~/Content/img/017.gif")"  /></form><!--模板--><script type="text/x-jquery-tmpl" id="personTemplate">    <li>${Name}</li></script><!--容器--><div id="searchresults">    <ul id="data-ul"></ul></div>