MVC - 11（下）jquery.tmpl.js +ajax分页

继续 mvc-11（上）.dto：http://www.cnblogs.com/tangge/p/3840060.html

jquery.tmpl.js 下载：http://pan.baidu.com/s/1o68w7Ke

jquery.tmpl.js 接收JSON类型数据循环

1.tmpl.js 前台显示数据

前台

Index.cshtml

Index.cshtml

Index.cshtml

@{
    ViewBag.Title = "学员列表";
}
@section headSection{
<script type="text/x-jquery-tmpl" id="trtemp">
        <tr>
            <th>${StudentID}</th>
            <th>${Cid}</th>
            <th>${Name}</th>
            <th>${Gender}</th>
            <th>操作</th>
        </tr>
    </script>

    <script type="text/javascript">
        $(function () {
            //0.关闭Jquery的浏览器缓存
            $.ajaxSetup({ cache: false });
            loadPageList(1);
        });

        //根据页码 异步请求数据
        function loadPageList(pageIndex) {
            $.get("/Stu/List/" + pageIndex, null, function (jsonData) {
                if (jsonData.Statu=="OK") {
                    //alert(jsonData.Msg);
                    $("#trtemp").tmpl(jsonData.Data.PageData).appendTo("#tableList");
                }
                alert(jsonData.msg);
            },"json");
        }
    </script>
}
<table id="tableList" border="1" cellspacing="0" cellpadding="0" width="100%">
    <tr>
        <th>ID</th>
        <th>班级名</th>
        <th>姓名</th>
        <th>性别</th>
        <th>操作</th>
    </tr>
</table>

但是要报错

TypeError: $(...).tmpl is not a function

$("#trtemp").tmpl(jsonData.Data.PageData).appendTo("#tableList");

找了半天原因,结果查看页面源代码

这里，在_Layout.cshtml里面，引入juqey和tmpl，然后注释调

@Scripts.Render("~/bundles/jquery")

2.ajax分页

PageBar.js （C#类库）

下载地址:http://pan.baidu.com/s/1gdsvLRX 密码：jtou

导入PageBar.js  ( 最好导入_ViewStart.cshtml )

<script type="text/javascript" src="~/Scripts/PageBar.js"></script>

_ViewStart.cshtml 加一个样式

@Styles.Render("~/Content/BarStyle.css")

BarStyle.css

BarStyle.css

BarStyle.css

#PageBar
{
    margin: 10px auto;
    width: 550px;
    text-align: center;
    border: 1px solid #808080;
}

    #PageBar a
    {
        padding: 2px 4px;
        margin: 4px;
        border: 1px solid #000000;
        background-color: #606fc2;
        line-height: 32px;
        color: #ffffff;
        cursor: pointer;
    }

     #PageBar a:hover {
         background-color: orange;
     }

//生成页码条方法（翻页方法名,页码条容器(div)，当前页码，总页数，页码组容量，总行数）

makePageBar(jsMethodName,pageContainer, pgIndex, pgCount, gpSize, roCount)

Index.cshtml

Index.cshtml

Index.cshtml

@{
    ViewBag.Title = "学员列表";
}
@section headSection{
<style type="text/css">
    #tableList tr td {
        text-align: center;
    }
    </style>
    <script type="text/x-jquery-tmpl" id="trtemp">
        <tr>
            <td>${StudentID}</td>
            <td>${Class.CName}</td>
            <td>${Name}</td>
            <td>${Gender}</td>
            <td>操作</td>
        </tr>
    </script>

    <script type="text/javascript">
        $(function () {
            //0.关闭Jquery的浏览器缓存
            $.ajaxSetup({ cache: false });
            loadPageList(1);
        });

        //根据页码 异步请求数据
        function loadPageList(pageIndex) {
            $.get("/Stu/List/" + pageIndex, null, function (jsonData) {
                if (jsonData.Statu == "OK") {
                    //alert(jsonData.Msg);
                    $("#tableList tr td").remove();
                    $("#trtemp").tmpl(jsonData.Data.PageData).appendTo("#tableList");
                }
                //生成页码条方法（翻页方法名,页码条容器(div)，当前页码，总页数，页码组容量，总行数）
                makePageBar(
                    loadPageList,
                    document.getElementById("PageBar"),
                    jsonData.Data.PageIndex,//当前页码
                    jsonData.Data.PageCount,//总页数
                    2,//页码组容量
                    jsonData.Data.RowCount);//总行数
                //alert(jsonData.msg);
            }, "json");
        }
    </script>

}
<table id="tableList" border="1" cellspacing="0" cellpadding="0" width="100%">
    <tr>
        <th>ID</th>
        <th>班级名</th>
        <th>姓名</th>
        <th>性别</th>
        <th>操作</th>
    </tr>
</table>
<

div id="PageBar"></div

>

如图

3.msgBox.js 窗口
Shared/_Layout.cshtml

<script type="text/javascript">
        $(function () {
            $.msgBox = new MsgBox({ "imghref": "/images/" });
        })

    </script>

一般的方法

$.msgBox.showMsgOk(“更新成功!”);

4.显示修改面板

4.1.修改tmpl模版，增加操作项

<style type="text/css">
        #tableList tr td {
            text-align: center;
        }

        #tbData {
            margin: 0 auto;
            width: 500px;
            display: none;
        }
    </style>
    <script type="text/x-jquery-tmpl" id="trtemp">
        <tr>
            <td>${StudentID}</td>
            <td>${Class.CName}</td>
            <td>${Name}</td>
            <td>${Gender}</td>
            <td>
                <a href="javascript:DoDel(${StudentID})">删</a>
                <a href="javascript:void(0)" onclick="Modify(${StudentID},this)">改</a>
</td>
        </tr>
    </script>

4.2. 传值jquery

Index.cshtml 显示修改面板jquery

Index.cshtml 显示修改面板jquery

//显示修改面板
        function Modify(id,obJec) {
            console.info(id,obJec)
            $.getJSON("/Stu/Get/",{"id":id},function (jsonObj) {
                $("#tbData").css("display","block");

                //判断返回的Statu
                if (jsonObj.Statu =="OK") {
                    //console.info(jsonObj.Data.Name)
                    $("#StudentID").val(jsonObj.Data.StudentID)
                    $("#Name").val(jsonObj.Data.Name);
                    $("#Cid").val(jsonObj.Data.Cid);//班级
                    //性别
                    if (jsonObj.Data.Gender=="男") {
                        $("#GenderFF").removeAttr("Checked");
                        $("#GenderW").removeAttr("Checked");
                        $("#GenderM").attr("Checked","Checked");
                    }else if (jsonObj.Data.Gender=="女") {
                        $("#GenderFF").removeAttr("Checked");
                        $("#GenderM").removeAttr("Checked");
                        $("#GenderW").attr("Checked","Checked");
                    }else {
                        $("#GenderM").removeAttr("Checked");
                        $("#GenderW").removeAttr("Checked");
                        $("#GenderFF").attr("Checked","Checked");
                    }
                }
            })
        }

4.3.添加修改面板html

index.chtml 添加修改面板html

index.chtml 添加修改面板html

@*修改面板*@
<table id="tbData" border="1">
    <tr>
        <td>姓名</td>
        <td>
            <input type="text" id="Name" name="Name" />
        </td>
    </tr>
    <tr>
        <td>班级</td>
        <td>
            @Html.DropDownList("Cid", ViewBag.seList as IEnumerable<SelectListItem>)
        </td>
    </tr>
    <tr>
        <td>性别</td>
        <td>
            <input type="radio" id="GenderFF" name="Gender" value="保密" checked="checked" />保密
            <input type="radio" id="GenderM" name="Gender" value="男" />男
            <input type="radio" id="GenderW" name="Gender" value="女" />女
        </td>
    </tr>
    <tr>
        <td>
            <input type="button" id="btnSure" value="提 交" />
        </td>
        <td>
            <input type="button" id="btnCansole" value="取 消" />
        </td>
    </tr>
</table>

4.4.后台：StuController.cs

先加载班级，Get方法是根据id查询学员数据（显示修改数据）

StuController.cs

StuController.cs

public ActionResult Index()
        {
            //1.0查询班级数据
            List<Models.Class> list = db.Classes.Where(s => s.CIsdel == "0").ToList();
            //1.1 将班级数据封装到SelectList,并指定Value和Text
            SelectList seList = new SelectList(list, "Cid", "CName");
            //1.2 调用 SelectList 的 AsEnumerable 自动生成 SelectListItem 并存入 ViewBag
            ViewBag.seList = seList.AsEnumerable();
            return View();
        }

        /// <summary>
        /// 3.1 根据id查询学员数据
        /// </summary>
        /// <param name="id"></param>
        /// <returns></returns>
        public ActionResult Get(int id)
        {
            //根据id查询
            Models.Student model = db.Students.Where(s => s.StudentID == id).FirstOrDefault();
            Models.JsonModel jsonModle = new Models.JsonModel()
            {
                Data = model.ToDto(),
                Msg = "成功",
                Statu = "OK"
            };
            return Json(jsonModle, JsonRequestBehavior.AllowGet);
        }

5.实现修改方法

5.1.添加form表单

Index.cshtml 添加form表单html部分

Index.cshtml 添加form表单html部分

@*修改面板*@
<form id="tFormData">
    <table id="tbData" border="1">
        <tr>
            <td>姓名<input type="hidden" id="StudentID" name="StudentID" /></td>
            <td>
                <input type="text" id="Name" name="Name" />
            </td>
        </tr>
        <tr>
            <td>班级</td>
            <td>
                @Html.DropDownList("Cid", ViewBag.seList as IEnumerable<SelectListItem>)
            </td>
        </tr>
        <tr>
            <td>性别</td>
            <td>
                <input type="radio" id="GenderFF" name="Gender" value="保密" checked="checked" />保密
                <input type="radio" id="GenderM" name="Gender" value="男" />男
                <input type="radio" id="GenderW" name="Gender" value="女" />女
            </td>
        </tr>
        <tr>
            <td>
                <input type="button" id="btnSure" value="提 交" />
            </td>
            <td>
                <input type="button" id="btnCansole" value="取 消" />
            </td>
        </tr>
    </table>
</form>

5.2.实现提交按钮的事件

 $(function () {
            //0.关闭Jquery的浏览器缓存
            $.ajaxSetup({ cache: false });
            loadPageList(1);
            $("#btnSure").click(DoClick);
        });

5.3.修改的jq

Index.cshtml 修改部分的jquery

Index.cshtml 修改部分的jquery

//------------------------------修改

        //在编辑行
        var editingRow =null;

        //显示修改面板
        function Modify(id,obJec) {
            console.info(id,obJec)
            $.getJSON("/Stu/Get/",{"id":id},function (jsonObj) {
                $("#tbData").css("display","block");

                //判断返回的Statu
                if (jsonObj.Statu =="OK") {
                    //console.info(jsonObj.Data.Name)
                    $("#StudentID").val(jsonObj.Data.StudentID)
                    $("#Name").val(jsonObj.Data.Name);
                    $("#Cid").val(jsonObj.Data.Cid);//班级
                    //性别
                    if (jsonObj.Data.Gender=="男") {
                        $("#GenderFF").removeAttr("Checked");
                        $("#GenderW").removeAttr("Checked");
                        $("#GenderM").attr("Checked","Checked");
                    }else if (jsonObj.Data.Gender=="女") {
                        $("#GenderFF").removeAttr("Checked");
                        $("#GenderM").removeAttr("Checked");
                        $("#GenderW").attr("Checked","Checked");
                    }else {
                        $("#GenderM").removeAttr("Checked");
                        $("#GenderW").removeAttr("Checked");
                        $("#GenderFF").attr("Checked","Checked");
                    }
                    console.info(editingRow);
                    //被点击行
                    editingRow =$(obJec).parent().parent();
                }
            })
        }

        //修改提交
        function DoClick() {
            //Form传过去的值，是(Models.Student model)
            var data =$("#tFormData").serialize();
            console.info(data);
            //[HttpPost]
            $.post("/Stu/Modify",data,function (jsonData) {
                if (jsonData.Statu == "OK") {
                    var tds = editingRow.children("td");
                    console.info(tds)
                    tds[2].innerHTML =jsonData.Data.Name;
                    ////根据下拉列表获取它的文本数据，就是它的class.Name了
                    tds[1].innerHTML =$("#Cid option[value="+jsonData.Data.Cid+"]").text() ;
                    tds[3].innerHTML =jsonData.Data.Gender;
                    editingRow =null;//清空编辑行
                    $("#tbData").css("display","none");

                    $.msgBox.showMsgOk(jsonData.Msg);
                }
            },'json');
        }

        //------------------------------修改

5.4.后台方法modify

5.4.1.取消验证

public StuController()
        {
            //关闭EF验证，如果不关，就根据配置文件的Nullable来验证（报异常）
            db.Configuration.ValidateOnSaveEnabled = false;
        }

5.4.2.modify方法

        [HttpPost]
        public ActionResult Modify(Models.Student model)
        {
            Models.JsonModel jsonModel = new Models.JsonModel();
            try
            {
                DbEntityEntry entry = db.Entry<Models.Student>(model);
                entry.State = EntityState.Unchanged;
                entry.Property("Name").IsModified = true;
                entry.Property("Cid").IsModified = true;
                entry.Property("Gender").IsModified = true;
                db.SaveChanges();

                jsonModel.Data = model;
                jsonModel.Msg = "更新成功!";
                jsonModel.Statu = "OK";

            }
            catch (Exception ex)
            {
                jsonModel.Msg = "更新异常："+ex.Message;
                jsonModel.Statu = "Error";
            }
            return Json(jsonModel);
        }

效果图：

6.删除

6.1.前台

<a href="javascript:DoDel(${StudentID})">删</a>

//------------------------------2.Delete.Start
        function DoDel(id) {
            $.post("/Stu/Del",{id:id},function (jsonObj) {
                if(jsonObj.Statu=="OK"){
                    loadPageList(1);
                    $.msgBox.showMsgOk(jsonObj.Msg);
                }    else {
                    $.msgBox.showMsgErr(jsonObj.Msg);
                }
            });
        }
        //------------------------------2.Delete.End

6.2.后台

/// <summary>
        /// 根据id删除
        /// </summary>
        /// <returns></returns>
        public ActionResult Del()
        {
            Models.JsonModel jsonModel = new Models.JsonModel();
            try
            {
                //6.1 接收数据
                string id = Request.Form["id"];
                //6.2 验证是否为整数
                //6.3 根据id 删除
                Models.Student delModel = new Models.Student()
                {
                    StudentID = int.Parse(id)
                };
                db.Students.Attach(delModel);
                db.Students.Remove(delModel);
                db.SaveChanges();
                jsonModel.Msg = "删除成功！";
                jsonModel.Statu = "OK";

            }
            catch (Exception ex)
            {
                jsonModel.Msg = "更新异常：" + ex.Message;
                jsonModel.Statu = "Error";
            }
            //返回jsonModels
            return Json(jsonModel);
        }