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

2024-12-11 技术教程

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

--引用脚本

--控制器代码：

publicActionResultQuickSearch(stringterm){varlist=db.Demos.Where(r=>r.Name.Contains(term)).Select(r=>r).ToList();returnJson(list,JsonRequestBehavior.AllowGet);}

--视图代码：

①：

<scripttype="text/javascript">$(function(){//表单提交触发$("#personsearch").submit(function(event){event.preventDefault();//重要（阻止直接提交）varform=$(this);$.getJSON(form.attr("action"),form.serialize(),function(data){$("#personTemplate").tmpl(data).appendTo("#data-ul");});});});</script><formid="personsearch"method="get"action="@Url.Action("QuickSearch","PersonError")"><inputtype="text"name="term"/><inputtype="submit"value="提交"/><imgid="img"src="@Url.Content("~/Content/img/017.gif")"/></form><scripttype="text/x-jquery-tmpl"id="personTemplate"><li>${Name}</li></script><divid="searchresults"><ulid="data-ul"></ul></div>

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

<scripttype="text/javascript">$(function(){//表单提交触发$("#personsearch").submit(function(event){event.preventDefault();//重要（阻止直接提交）varform=$(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><formid="personsearch"method="get"action="@Url.Action("QuickSearch","PersonError")"><inputtype="text"name="term"/><inputtype="submit"value="提交"/><imgid="img"src="@Url.Content("~/Content/img/017.gif")"/></form><scripttype="text/x-jquery-tmpl"id="personTemplate"><li>${Name}</li></script><divid="searchresults"><ulid="data-ul"></ul></div>