继续 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);

        }

MVC - 11（下）jquery.tmpl.js +ajax分页的更多相关文章

  1. Jquery 模板插件 jquery.tmpl.js 的使用方法(1):基本语法，绑定,each循环，ajax获取json数据

    jquery.tmpl.js 是一个模板js  ,主要有2个方法 (1):$.template()方法,将一段script或者是Html编译为模板,例如 $.template('myTemplate' ...

  2. 让jquery.tmpl.js支持index序号

    在写Web程序时,想简单处理会使用JS模板,常用的是Jquery的jquery.tmpl.js插件.整个插件还是比较好用的,后续有机会结合实际应用案例,分享下应用方法. 本次文章想分享的一点是其中的一 ...

  3. Spring Data Jpa+SpringMVC+Jquery.pagination.js实现分页

    本博客介绍基于Spring Data这款orm框架加上Jquery.pagination插件实现的分页功能. 介绍一下Spring Data框架 spring Data : Spring 的一个子项目 ...

  4. jquery.tmpl.js 模板引擎用法

    1.0 引入: <script src="/js/jquery.tmpl.min.js"></script> 2.0 模板: <script type ...

  5. Spring+Mybatis+jQuery.Pagination.js异步分页及JsonConfig的使用

    在开发工作中经常用到异步分页,这里简单整理一下资料. 一.Controller方法 package com.lwj.controller; import javax.servlet.http.Http ...

  6. jQuery Pagination Plugin ajax分页控件

    <html> <body> <div id="datagrid"> </div> <div id="paginati ...

  7. 使用jQuery的分页插件jquery.pagination.js进行分页

    1,需要用到jquery.pagination.js和pagination.css https://pan.baidu.com/s/1G3PLQSRGjvLxl2ryqpV76w https://pa ...

  8. 用jquery.pager.js实现分页

    1.html <link href="/stylesheets/Pager.css" rel="stylesheet" type="text/c ...

  9. jquery.form.js ajax提交上传文件

    项目中最近有用到表单提交,是带有图片上传的表单录入,需要ajax异步提交,网上找了好多例子都是只能提交上传字段一个信息的,这里整理一下.表单里有普通文本信息字段也有图片上传字段. 1.jsp代码--引 ...

随机推荐

  1. 如何在 CentOS 7 用 cPanel 配置 Nginx 反向代理

    导读 Nginx 是最快和最强大的 Web 服务器之一,以其高性能和低资源占用率而闻名.它既可以被安装为一个独立的 Web 服务器,也可以安装成反向代理 Web 服务器.在这篇文章,我将讨论在安装了 ...

  2. phpcms如何判断用户是否登录

    首先要获取userid  <?php         $userid= param::get_cookie('_userid'); ?> 然后再判断是否为空 {if $userid}    ...

  3. centos7 关闭firewall安装iptables并配置

    一.配置防火墙,开启80端口.3306端口 CentOS 7.0默认使用的是firewall作为防火墙,这里改为iptables防火墙. 1.关闭firewall: systemctl stop fi ...

  4. BZOJ 2412: 电路检修

    Description [0,x]中全是1,其余全是0,每个点有一个权值,求最坏情况下得到x的最小权值. Sol DP+单调队列. 你可以去看我的这篇Blog...开这篇纯属为了骗访问... http ...

  5. ndk学习19: 使用Eclipse调试so

    1.  设置调试选项 在AndroidManifest文件加入允许调试 android:debuggable="true"   此时编译项目会多出: 2.  配置调试代码 把需要调 ...

  6. Ubuntu16.04/centos7 下为chrome/firefox安装flash player插件

    为chrome安装flash: 打开终端,输入:sudo apt-get install pepperflashplugin-nonfree 或官网下载安装google-chrome-stable 为 ...

  7. Node.JS初识

    对Node.JS的认识 1.Node 是一个服务器端 JavaScript 解释器: 2.Node 的目标是帮助程序员构建高度可伸缩的应用程序,编写能够处理数万条同时连接到一个物理机的连接代码.处理高 ...

  8. 使用Grub Rescue恢复Ubuntu引导

    装了Ubuntu和Window双系统的电脑,通常会使用Ubuntu的Grub2进行引导. Grub2会在MBR写入引导记录,并将引导文件放在/boot/grub,破坏任意一项都会导致系统无法正常启动. ...

  9. lftp使用普通ftp模式登录

    set ftp:use-feat no set ftp:passive-mode yes set ftp:ssl-protect-data no set ssl:verify-certificate ...

  10. tortoiseSVN svn+ssh

    2015年6月28日 11:45:10 星期日 今天实验用小海龟svn客户端的svn+ssh协议去链接版本库, 期望会快一点儿 首先在设置里 记着将连接ssh用的用户名和密码一块儿写到输入框中: -l ...