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);
        }