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

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

网站建设哪家好,找创新互联建站!专注于网页设计、网站建设、微信开发、重庆小程序开发、集团企业网站建设等服务项目。为回馈新老客户创新互联还提供了西湖免费建站欢迎大家使用!

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

--引用脚本

--控制器代码:

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

--视图代码:

①:


    $(function () {
        //表单提交触发
        $("#personsearch").submit(function (event) {
            event.preventDefault(); //重要(阻止直接提交)
            var form = $(this);
            $.getJSON(form.attr("action"), form.serialize(), function (data) {
                $("#personTemplate").tmpl(data).appendTo("#data-ul");
            });
        });
    });





    
    
    




    
  • ${Name}
  •     

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

    ②:使用ajax控制请求的过程(比如加载中显示加载动态,加载失败弹出提示框等等)

    
        $(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");
                    }
                })
            });
        });
    
    
    
    
    
        
        
        
    
    
    
    
        
  • ${Name}
  •     

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


    网站题目:MVC3----使用Jquery模板异步加载数据
    文章出自:http://ybzwz.com/article/isjooi.html

    其他资讯