前端模板引擎，绑定数据

来源：互联网发布：多囊卵巢综合征知乎编辑：程序博客网时间：2024/05/21 17:01

html

 <div id="resList"></div>

Template

<script id="Template" type="text/x-jquery-tmpl">    <div>        {{each Data}}        <div class="col-md-4 pro_bor" >            <div style="border:1px solid #f6f6f6; padding:5px; margin:10px 0px; height:300px;">                <a href="/Supplier/Product/ProductEdit?id=@ViewBag.UserId&productId=${$value.Id}"><img src=${$value.Cover} height="150" width="100%" /></a>                <div class="text-left col-md-12" style="margin:10px 0px;">${$value.Name}</div><div class="text-right col-md-12 am-text-danger">￥${$value.Shoujia}</div>                <div class="text-left col-md-12">&nbsp;</div><div class="text-right col-md-12 am-text-danger" onclick="deleteProduct(@ViewBag.UserId,${$value.Id})">删除</div>            </div>        </div>        {{/each}}        <div class="col-md-12 am-input-group-sm "> <hr /></div>    </div></script>

<script type="text/javascript">    var pageSize=9;    $(function () {        getdata(1,pageSize);    })    function getdata(pageIndex, pageSize) {        $.ajax({            type: "get", //get            async: true,  //(默认: true) 默认设置下，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为 false            url: "/Supplier/Product/GetProductList",            data: { "pageIndex": pageIndex, "pageSize": pageSize, "brandId": @ViewBag.BrandId }, //data: "name=John&location=Boston", 这样写也可以            dataType: "json", //预期服务器返回的数据类型 text html script json jsonp xml            beforeSend: function (XMLHttpRequest) {                this; // 调用本次AJAX请求时传递的options参数            },            dataFilter: function (data, type) {                // 对Ajax返回的原始数据进行预处理                return data  // 返回处理后的数据            },            success: function (data, textStatus) {                //data 可能是 xmlDoc, jsonObj, html, text, 等等...                //this; // 调用本次AJAX请求时传递的options参数                if (data.State == "logout") {                    window.location.href = "/Account/Login";                }                if (data.State == "ok" && data.Data.length > 0) {                    $("#resList").html("");                    $("#Template").tmpl(data).appendTo("#resList");                    $("#pagination_dif").html("");                    $("#pagination_dif").html("").append(create_pagination(pageIndex, data.TotalPage));                } else {                }            },            error: function (XMLHttpRequest, textStatus, errorThrown) {                // 通常 textStatus 和 errorThrown 之中                // 只有一个会包含信息                this; // 调用本次AJAX请求时传递的options参数            },            complete: function () {            }        });    }    function ajaxPage(pageIndex) {        getdata(pageIndex, pageSize);    }    function deleteProduct(uid,pid){        if(confirm("确定要删除产品吗？"))        {            var curPage=  $("li.active").find('a').text();            $.ajax({                type: "post", //get                async: true,  //(默认: true) 默认设置下，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为 false                url: "/Supplier/Product/ProductDelete",                data: { "id": uid, "productId": pid,"curPage":curPage, "brandId": @ViewBag.BrandId,"pageSize":pageSize}, //data: "name=John&location=Boston", 这样写也可以                dataType: "json", //预期服务器返回的数据类型 text html script json jsonp xml                beforeSend: function (XMLHttpRequest) {                    this; // 调用本次AJAX请求时传递的options参数                },                dataFilter: function (data, type) {                    // 对Ajax返回的原始数据进行预处理                    return data  // 返回处理后的数据                },                success: function (data, textStatus) {                    //data 可能是 xmlDoc, jsonObj, html, text, 等等...                    //this; // 调用本次AJAX请求时传递的options参数                    if (data.State == "logout") {                        window.location.href = "/Account/Login";                    }                    if (data.State == "ok") {                        getdata(1,pageSize);                    } else {                        alert("删除失败");                    }                },                error: function (XMLHttpRequest, textStatus, errorThrown) {                    // 通常 textStatus 和 errorThrown 之中                    // 只有一个会包含信息                    this; // 调用本次AJAX请求时传递的options参数                },                complete: function () {                }            });        }    }</script>

    /// <summary>        /// 产品列表        /// </summary>        /// <param name="pageIndex"></param>        /// <param name="pageSize"></param>        /// <param name="brandId"></param>        /// <returns></returns>        [HttpGet]        public JsonResult GetProductList(int pageIndex = 1, int pageSize = 9, int brandId = 0)        {            string state = "ok";            int totalPage = 0;            object query = null;            string cookie_value = CookieHelper.GetSingleValueCookieValue("key");            var obj = CacheManager.GetData<HzbModel.User>(cookie_value);            if (obj == null)            {                state = "logout";                goto Complete;            }            query = ProjectList_Pager(pageIndex, pageSize, out totalPage, obj.Id, "CreateTime", false, brandId).Select(m => new { Id = m.Id, Name = m.Name, Cover = m.Cover, Shoujia = m.ShouJia });        Complete:            var res = new JsonResult();            res.Data = new { State = state, Data = query, TotalPage = totalPage };            res.JsonRequestBehavior = JsonRequestBehavior.AllowGet;  //允许使用GET方式获取，否则用GET获取是会报错。            return res;        }        /// <summary>        /// 分页获取数据        /// </summary>        /// <param name="pageIndex"></param>        /// <param name="pageSize"></param>        /// <param name="totalPage"></param>        /// <param name="userId"></param>        /// <param name="orderfield"></param>        /// <param name="isDesc"></param>        /// <param name="brandId"></param>        /// <returns></returns>        private List<Product> ProjectList_Pager(int pageIndex, int pageSize, out int totalPage, int userId, string orderfield, bool isDesc, int brandId)        {            Expression<Func<Product, bool>> where = PredicateExtensionses.False<Product>();            where = where.Or(m => m.UserId == userId && m.BrandId == brandId && m.SoftDel == 0);            int total;            List<Product> list = IProductBll.GetListPage(pageIndex, pageSize, out total, where, orderfield, isDesc).ToList();            totalPage = Convert.ToInt32(Math.Ceiling((double)total / pageSize));//总页数            return list;        }

0 0