韦德国际1946英国 > 计算机网络 > 韦德国际1946英国:新年奉献MVC,增删改查

原标题:韦德国际1946英国:新年奉献MVC,增删改查

浏览次数:58 时间:2019-07-06

兑现步骤

1、配置EF5.0 code first生成并初步化数据库

  首先在品种中加多对EF5.0的援用,获取方式得以因而nuget包处理器增添可能通过调节台增多,这里给出一种办法的截图。

韦德国际1946英国 1

编写实体类(代码中有注释表达):

韦德国际1946英国 2韦德国际1946英国 3

[Table("Students",Schema="xxxx")]//数据库映射表名及架构      public class Student      {          [Key]//主键且自增长          public int ID { get; set; }          public string Name { get; set; }          public int Age { get; set; }          public string Address { get; set; }          public string Mobile { get; set; }          public string QQ { get; set; }          public string Description { get; set; }      }

View Code

编辑数据库上下文:

韦德国际1946英国 4韦德国际1946英国 5

public class GridDbContext:DbContext      {          public GridDbContext():base("name=GridDbContext")//指定EF识别的数据库连接字符串名称          {              Database.SetInitializer<GridDbContext>(new GridDbInitializer());//初始化数据库,也可在global中设置          }          public DbSet<Student> Students { get; set; }      }

View Code

此间注意如若不钦定数据库连接字符串名称,在web.config中只需将连接字符串的称呼与数据库上下文类的称谓一致就可以。

总是字符串:

<connectionStrings>      <add name="GridDbContext" connectionString="Data Source=(local);Initial Catalog=XXXX;Integrated Security=SSPI" providerName="System.Data.SqlClient" />    </connectionStrings>

编排数据库表开头化数据填充类:

韦德国际1946英国 6韦德国际1946英国 7

public class GridDbInitializer : DropCreateDatabaseIfModelChanges<GridDbContext>      {          //初始化数据库数据          protected override void Seed(GridDbContext context)          {              List<Student> list = new List<Student>(){               new Student(){Name="张一",Age=18,Address="山东济南",Mobile="21111111",QQ="3456789",Description="帅哥"},               new Student(){Name="张二",Age=18,Address="北京东城",Mobile="21111111",QQ="3456789",Description="帅哥"},               new Student(){Name="张三",Age=18,Address="北京西城",Mobile="21111111",QQ="3456789",Description="美女"},               new Student(){Name="张四",Age=18,Address="山东济南",Mobile="21111111",QQ="3456789",Description="美女"},               new Student(){Name="张五",Age=18,Address="广东东莞",Mobile="21111111",QQ="3456789",Description="美女"},               new Student(){Name="张六",Age=18,Address="山东济南",Mobile="21111111",QQ="3456789",Description="帅哥"},               new Student(){Name="张七",Age=18,Address="云南边境",Mobile="21111111",QQ="3456789",Description="美女"},               new Student(){Name="张八",Age=18,Address="山东济南",Mobile="21111111",QQ="3456789",Description="帅哥"},               new Student(){Name="张九",Age=18,Address="山东济南",Mobile="21111111",QQ="3456789",Description="帅哥"},               new Student(){Name="张十",Age=18,Address="山东菏泽",Mobile="21111111",QQ="3456789",Description="美女"},               new Student(){Name="张十一",Age=18,Address="山东泰安",Mobile="21111111",QQ="3456789",Description="帅哥"},             };              list.ForEach(c => context.Students.Add(c));              context.SaveChanges();          }

View Code

于今,EF生成数据库配置完结,我们只需在controller中不管写三个主意调用一下,便可在数据库中自动生数据库及表,并初阶化数据。

2、配置Flexigrid

在模板页中增多对jquery等js的援引

<script src="../../Scripts/jquery-1.8.0.min.js" type="text/javascript"></script>      <script src="../../Scripts/jquery-ui-1.8.23.min.js" type="text/javascript"></script>      <script src="../../Scripts/jquery.unobtrusive-ajax.min.js" type="text/javascript"></script>      <script src="@Url.Content("~/Scripts/flexigrid.js")" type="text/javascript"></script>      <script src="@Url.Content("~/Scripts/flexigrid.pack.js")" type="text/javascript"></script>      <link  ~/Content/flexigrid.css")" rel="stylesheet" type="text/css" />

第一大家在HomeController中为Index增添多少个视图,在此视图中配置flxigrid。

index页面呈现代码:

韦德国际1946英国 8韦德国际1946英国 9

@{      ViewBag.Title = "Home Page";  }      <script type="text/javascript">          $(document).ready(function () {              $('#students').flexigrid({                  url: '/Home/FlexigridList',                  dataType: 'json',                  colModel: [                  { display: '编号', name: 'ID', width: 40, sortable: true, align: 'left' },                  { display: '姓名', name: 'Name', width: 100, sortable: false, align: 'left' },                  { display: '年龄', name: 'Age', width: 80, sortable: true, align: 'left' },                  { display: '地址', name: 'Address', width: 80, sortable: false, align: 'left' },                  { display: '手机', name: 'Mobile', width: 80, sortable: false, align: 'left' },                  { display: 'QQ', name: 'QQ', width: 80, sortable: false, align: 'left' },                  { display: '描述', name: 'Description', width: 80, sortable: false, align: 'left' }              ],                  buttons: [              { name: '添加', bclass: 'add', onpress: button },              { name: '修改', bclass: 'edit', onpress: button },              { name: '删除', bclass: 'delete', onpress: button },              { separator: true }              ],                  searchitems: [                  { display: '姓名', name: 'Name' },                  { display: '描述', name: 'Description' }              ],                  sortname: 'ID',                  sortorder: 'asc',                  usepager: true,                  title: '学生列表',                  useRp: true,                  rp: 10,                  showTableToggleBtn: true,                  width: 1040,                  height: 350,                  checkbox: true,                  rowId: 'ID'              });          })          function button(com,grid) {                                  switch (com) {                      case "添加":                          AddOrEdit(0);                          return;                      case "修改":                          var ids = $('tr.trSelected td:first').text();                          if (ids == undefined) {                              alert("请选择一条数据");                          }                          else {                              AddOrEdit(ids);                          }                          return;                      case "删除":                          var valueArray = new Array();                          var list = $('tr.trSelected').each(function () {                              valueArray.push($(this).find("td:first").text());                          });                          if (valueArray.length <= 0) {                              alert("请选择一条数据");                          }                          else {                              var idsstring = valueArray.join(',');                              DeletStudent(idsstring);                              window.location.reload();                          }                          return;                  }  };          function AddOrEdit(ids) {              $.ajax({                  type: "GET",                  url: "/home/AddStudent?id=" ids,                  success: function (html) {                      $("<div ></div>").html(html)                                  .attr("title", "操作")                                  .dialog({                                      autoOpen: true,                                      modal: true,                                      width: 300,                                      buttons: {                                          "确定": function () {                                              $(".formtalbe").find("form").submit();                                              $(".formtalbe").remove();                                          },                                          "取消": function () { $(this).dialog('destroy').remove(); $(this).dialog("close"); }                                      }                                  });                  },                  error: function () {                      $(".formtalbe").remove();                      alert("操作失败!");                  }              });            }          function DeletStudent(idsstring) {              $.getJSON("/Home/DelStudent?ids="   idsstring, function (data) {                  if (data == true)                      alert("删除成功!");              });          }  </script>  <div id="maintable">      <table id="students" style="display:none"></table>  </div>

View Code

flexigrid的配置表达参照他事他说加以考察前文给出的配置及js中的配置表明,上边给出注重几处的求证:

$('#students').flexigrid()将内定表格转化成flexigrid控件

url: '/Home/FlexigridList',后台再次来到表格ajax数据的措施,datatype为json数据类型

colModel:配置展现列名称,后台重回对应的数据列,大小,是不是排序,地方等

buttons:工具栏开关

searchitems:设置须要查询的列

别的陈设不做注明(checkbox有标题。)

陈设完毕现在,运营程序今后便能程序出flexigrid的指南了。

接下去大家为依赖某一显示列排序及模糊查询增添多少个IQueryable<T>的扩张方法,代码如下:

韦德国际1946英国 10韦德国际1946英国 11

public static class ExtensionMethods      {          //按某一字段排序查询扩展方法          public static IQueryable<T> OrderBy<T>(this IQueryable<T> source, string propertyName, bool asc)          {              var type = typeof(T);              string methodName = asc ? "OrderBy" : "OrderByDescending";              var property = type.GetProperty(propertyName);              var parameter = Expression.Parameter(type, "p");              var propertyAccess = Expression.MakeMemberAccess(parameter, property);              var orderByExp = Expression.Lambda(propertyAccess, parameter);              MethodCallExpression resultExp = Expression.Call(typeof(Queryable), methodName, new Type[] { type, property.PropertyType }, source.Expression, Expression.Quote(orderByExp));              return source.Provider.CreateQuery<T>(resultExp);          }          //根据某一字段进行模糊查询          public static IQueryable<T> Like<T>(this IQueryable<T> source, string propertyName, string keyword)          {              var type = typeof(T);              var property = type.GetProperty(propertyName);              var parameter = Expression.Parameter(type, "p");              var propertyAccess = Expression.MakeMemberAccess(parameter, property);              Expression methodExp = Expression.Call(Expression.Property(parameter, type.GetProperty(propertyName)), typeof(string).GetMethod("Contains", new Type[] { typeof(string) }), Expression.Constant(keyword));              Expression<Func<T, bool>> lambda = Expression.Lambda<Func<T, bool>>(methodExp, parameter);              return source.Where(lambda);          }      }

View Code

后台Home/FlexigridList获取数据的艺术(代码中有详尽表明)

韦德国际1946英国 12韦德国际1946英国 13

//两种获取参数的方式,一种在action上面直接接收,另一种就是用Request.Form()或者Formcollection来接收          public JsonResult FlexigridList(int page,int rp,string qtype,string query,string sortname,string sortorder)          {              //获取表格控件需要的参数              //int page = int.Parse(Request.Form["page"]);              //int rp = int.Parse(Request.Form["rp"]);              //string qtype = Request.Form["qtype"].ToString();              //string query = Request.Form["query"].ToString();              //string sortname = Request.Form["sortname"].ToString();              //string sortorder = Request.Form["sortorder"].ToString();                //var q = db.Students.ToList().AsQueryable();              var q = from c in db.Students                      select c;              ////根据某一字段进行模糊查询,见扩展方法              if (!string.IsNullOrEmpty(qtype) && !string.IsNullOrEmpty(query))              {                  q = q.Like(qtype, query);              }                          ////按某一字段进行排序              if (!string.IsNullOrEmpty(sortname) && !string.IsNullOrEmpty(sortorder))              {                  q = q.OrderBy(sortname, (sortorder == "asc"));              }              ////分页              q = q.Skip((page - 1) * rp).Take(rp);              ////构造前台需要的JSON数据类型              List<Object> row=new List<Object>();              foreach (Student stu in q)              {                  var cells = new List<string>() {stu.ID.ToString(), stu.Name, stu.Age.ToString(), stu.Address, stu.Mobile, stu.QQ, stu.Description };                  row.Add(new { id = stu.ID, cell =cells });              }              return Json(new { page=page,total=db.Students.Count(),rows=row}, JsonRequestBehavior.AllowGet);          }

View Code

此情势的首要性在于去前台参数值,依据某一字段营造排序及模糊查询,重回前台要求的json数据等。

文章到此截止,假若程序正确前台按自定列排序,查询,展现数据等都应有通常。

3、达成增加和删除改

点击flexigrid的丰裕和改换按键,通过jquery 的ajax央浼,将拉长及修改页面加载到jquery dialog中。demo中独立为此了三个js函数,代码如下

        function AddOrEdit(ids) {              $.ajax({                  type: "GET",                  url: "/home/AddStudent?id=" ids,                  success: function (html) {                      $("<div class='formtalbe'></div>").html(html)                                  .attr("title", "操作")                                  .dialog({                                      autoOpen: true,                                      modal: true,                                      width: 300,                                      buttons: {                                          "确定": function () {                                              $(".formtalbe").find("form").submit();                                              $(".formtalbe").remove();                                          },                                          "取消": function () { $(this).dialog('destroy').remove(); $(this).dialog("close"); }                                      }                                  });                  },                  error: function () {                      $(".formtalbe").remove();                      alert("操作失败!");                  }              });            }

此办法的关键在于ajax央求后台aciton并将准备加载在一个jquery dialog中,jquery调控表单提交等,加多后修改判定通过实体类ID判定。

后台加多修改章程:

//添加及修改          public ActionResult AddStudent(int id=0)          {              var stu=id>0?db.Students.Find(id):new Student();              return View(stu);          }          [HttpPost]          public ActionResult AddStudent(Student student,FormCollection fc)          {              TryUpdateModel(student, fc);              if (student.ID == 0)                  db.Students.Add(student);              else                  db.Entry(student).State = EntityState.Modified;              db.SaveChanges();              return RedirectToAction("Index");          }

增长及修改页面:

韦德国际1946英国 14韦德国际1946英国 15

@model FlexGridDemo.Models.Student  @{      Layout = null;      }    @using (Html.BeginForm("AddStudent", "Home"))  {      <table>          <tr>          @Html.HiddenFor(m=>m.ID)              <th>姓名</th>              <td>@Html.TextBoxFor(m=>m.Name)</td>          </tr>          <tr>              <th>年龄</th>              <td>@Html.TextBoxFor(m=>m.Age)</td>          </tr>          <tr>              <th>地址</th>              <td>@Html.TextBoxFor(m=>m.Address)</td>          </tr>          <tr>              <th>手机</th>              <td>@Html.TextBoxFor(m=>m.Mobile)</td>          </tr>          <tr>              <th>QQ</th>              <td>@Html.TextBoxFor(m=>m.QQ)</td>          </tr>          <tr>              <th>描述</th>              <td>@Html.TextBoxFor(m=>m.Description)</td>          </tr>      </table>  }

View Code

 

前台删除js方法,一样是ajax提交

function DeletStudent(idsstring) {              $.getJSON("/Home/DelStudent?ids="   idsstring, function (data) {                  if (data == true)                      alert("删除成功!");              });          }

后台action方法

//批量删除          public ActionResult DelStudent(string ids)          {              var idarray = ids.Split(',');              foreach(var id in idarray)              {                  var temp=db.Students.Find(int.Parse(id));                  db.Entry(temp).State=EntityState.Deleted;              }              db.SaveChanges();              return Json(true);          }

案例到此截止,flexigrid显示数据,数据的增加和删除改查都曾经落实了。

四、成效优化扩展版表明 

客户端脚本就一行代码$('#tree').combotree({url:'@Url.Action('actionName','controller')'}).关键是塑造服务器端的多少格式。你得根据[{id:'',name:'',children:[{id:'',name:'',children:[{......}]}]}]去协会数据。很四人欢快用拼接字符串的办法去协会数据,那样行,但感到代码有一些乱,不好调整,尤其是递归太多的时候。其实能够用项目对象,把数量赋值给指标属性,好调节好递归。上海教室服务器端具体落实如下:

正文的目标:

 

  1、MVC3项目简单配置EF code first生成并起始化数据库。

  2、利用flexigrid浮现并应用ajax展现数据,协助显得列增减,呈现列排序,显示列模糊查询,领悟表格控件的选取。

  3、利用jquery ajax须要完成增加和删除查改

  4、利用jquery dialog弹出层完结增进,修改。

  5、扩充方法及表明式树营造lambda表达式

原版FlexiGrid代码:

客户端再写相关的台本:

品类截图表明

韦德国际1946英国 16韦德国际1946英国 17韦德国际1946英国 18

附flexigrid参数表明(能够去flexigrid.js文件中查阅配置):

height: 200, //flexigrid插件的莫斯中国科学技术大学学,单位为px
width: 'auto', //宽度值,auto表示依据每列的肥瘦自动估测计算,在IE6下建议设置具体值否则会有标题
striped: true, //是不是出示斑纹效果,私下认可是奇偶交互的款式
novstripe: false,//没用过这一个性子
minwidth: 30, //列的细微宽度
minheight: 80, //列的蝇头高度
resizable: false, //resizable table是或不是可伸缩
url: false, //ajax url,ajax格局对应的url地址
method: 'POST', // data sending method,数据发送格局
dataType: 'json', // type of data loaded,数据加载的类型,xml,json
errormsg: '产生错误', //错误提高消息
usepager: false, //是或不是分页
nowrap: true, //是或不是不换行
page: 1, //current page,暗中认可当前页
total: 1, //total pages,总页面数
useWranglerp: true, //use the results per page select box,是或不是足以动态设置每页展现的结果数
rp: 25, // results per page,每页默认的结果数
rpOptions: [10, 15, 20, 25, 40, 100], //可选取设定的每页结果数
title: false, //是或不是带有标题
pagestat: '展现记录从{from}到{to},总量 {total} 条', //呈现当前页和总页面包车型大巴体制
procmsg: '正在管理数据,请稍候 ...', //正在管理的提醒消息
query: '', //搜索查询的尺度
qtype: '', //寻觅查询的连串
qop: "Eq", //寻找的操作符
nomsg: '未有符合条件的笔录存在', //无结果的提醒消息
minColToggle: 1, //允许突显的小不点儿列数
showToggleBtn: true, //是不是同意突显遮蔽列,该属性有bug设置成false点击头脚本报错。
hideOnSubmit: true, //是还是不是在回调时显示遮掩
showTableToggleBtn: false, //是或不是出示【突显掩盖Grid】的按键
autoload: true, //自动加载,即首先次发起ajax央浼
blockOpacity: 0.5, //反射率设置
onToggleCol: false, //当在行之间转移时,可在此措施中重写暗许落成,基本无用
onChangeSort: false, //当改造排序时,可在此措施中重写暗中认可完成,自行达成客户端排序
onSuccess: false, //成功后施行
onSubmit: false, // 调用自定义的持筹握算函数,基本没用 

  1. var rows = $("#grid).getSelectedRows(); // 获取表格行数据  

一:Entityframework

结语

是因为只是为了隐蔽flexigrid的施用,项目中有那多少个不客观的地点,已知的主题材料:flexigrid多选框的主题材料,增添修改字段未有拉长验证,增多修改及删除成功后并未有落实部分刷新等难题。

如有供给可协和扩展。

 DEMO下载:点自身下载

接待各位有志之士切磋冲突,如材质有用招待推荐,接待拍砖。


  1. colModel:   
  2. [  
  3. {  
  4.     display: '序号',  
  5.     name: 'seq',  
  6.     width: 40,  
  7.     sortable: false,  
  8.     align: 'center'  
  9. },  
  10. {  
  11.     display: '#ID',  
  12.     name: 'user_id',  
  13.     width: 40,  
  14.     sortable: true,  
  15.     align: 'left',  
  16.     hide: true  
  17. },  
  18. {  
  19.     display: '操作工号',  
  20.     name: 'username',  
  21.     width: 70,  
  22.     sortable: true,  
  23.     align: 'left'  
  24. },  
  25. {  
  26.     display: '真实姓名',  
  27.     name: 'name',  
  28.     width: 60,  
  29.     sortable: false,  
  30.     align: 'left'  
  31. },  
  32. {  
  33.     display: '分配剧中人物',  
  34.     name: 'role',  
  35.     width: 80,  
  36.     sortable: false,  
  37.     align: 'left'  
  38. },  
  39. {  
  40.     display: '市县单位',  
  41.     name: 'sxmc',  
  42.     width: 120,  
  43.     sortable: false,  
  44.     align: 'left'  
  45. },  
  46. {  
  47.     display: '营业单位',  
  48.     name: 'jgmc',  
  49.     width: 120,  
  50.     sortable: true,  
  51.     align: 'left'  
  52. },  
  53. {  
  54.     display: '工号创建时间',  
  55.     name: 'created',  
  56.     width: 110,  
  57.     sortable: false,  
  58.     align: 'left',  
  59.     hide: false  
  60. },  
  61. {  
  62.     display: '密码更新时间',  
  63.     name: 'pwdupdated',  
  64.     width: 110,  
  65.     sortable: false,  
  66.     align: 'left',  
  67.     hide: false  
  68. }  
  69. ],  

xxService.GetPageData('查询条件1','查询条件2',‘查询条件N...’,int.Parse(request["page"]) - 1, int.Parse(request["rows"]),request["sort"],request["order"] == "asc" ? true : false, out recordCount);

  1. function InitGridCheck(tr) {  
  2.     var ch = $.browser.msie ? tr.ch : target.getAttribute("ch");  
  3.     var cell = ch.split("_FG$SP_");  
  4.     if(cell[7] != 1){return;}  
  5.     var chkb = $(tr).find(":checkbox");  
  6.     if (chkb.length>0) {  
  7.         chkb[0].checked = true;  
  8.         chkb[0].defaultChecked = true;  
  9.         $(tr).addClass('trSelected');  
  10.     }  
  11. }  

先在BaseCtroller增加收获验证音信的措施:

2、buttons:工具栏Button定义数组,用来安装数据网格的工具条按键。

1:CodeFist

  1. items.push($(this).attr("ch").split('_FG$SP_'));  

韦德国际1946英国 19

FlexiGrid.options参数介绍:

MVC无非正是View,Controller,模型模版,模型绑定,模型验证,UnobtrusiveAjax等等,挑多少个讲以下.

  1. buttons:   
  2. [  
  3. {  
  4.     name: '添加',  
  5.     bclass: 'add',  
  6.     onpress: opt  
  7. },  
  8. {  
  9.     name: '修改',  
  10.     bclass: 'edit',  
  11.     onpress: opt  
  12. },  
  13. {  
  14.     name: '删除',  
  15.     bclass: 'delete',  
  16.     onpress: opt  
  17. },  
  18. {  
  19.     separator: true  
  20. },  
  21. {  
  22.     name: '导出EXCEL',  
  23.     bclass: 'excel',  
  24.     onpress: opt  
  25. }  
  26. ]  

mvc模型绑定无非便是把数据从客户端传递到劳动器端,它默许是经过DefaultModelBinder类来操作的,当然你也也可自定义贰个ModelBinder。

 

别的的像弹出层,模态窗口,动态创设datagrid在那边就十分的少讲了,有意思味的心上人能够去下载项目看看。

2、效用优化增添版
该版本为xuanye( )的修改版,很好,很强劲。

 

示例:

EF修改数据只需new一实体,实体ID跟要修改数据的ID一样,把要修改的品质赋值就行了。比方

Js代码  韦德国际1946英国 20

1:Controller

  1.  <div id="dialog_div" style='display:none'>  
  2.    <form id="dialog_form" name="dialog_form" action="">  
  3.      <table width="100%" class="tableinput">  
  4.       <tr>  
  5.         <td width="四成">操作工号:</td>  
  6.         <td width="70%">  
  7.           <input name="username" type="text" id="username" />*两个人数字  
  8.           <input name="user_id" type="hidden" id="user_id" />  
  9.         </td>  
  10.       </tr>  
  11.       <tr>  
  12.         <td>真实姓名:</td>  
  13.         <td><input name="name" type="text" id="name" /></td>  
  14.       </tr>  
  15.       <tr>  
  16.         <td>市县单位:</td>  
  17.         <td>{{$input.html_sxjg}}</td>  
  18.       </tr>  
  19.       <tr>  
  20.         <td>营业单位:</td>  
  21.         <td>{{$input.html_yyjg}}</td>  
  22.       </tr>  
  23.       <tr>  
  24.         <td>分配剧中人物:</td>  
  25.         <td>{{$input.html_auth}}</td>  
  26.       </tr>  
  27.     </table>  
  28.    </form>  
  29. </div>  

 

Js代码  韦德国际1946英国 21

EF删除数据只需new一实体,实体ID跟要去除数据的ID同样就是了。比如

Js代码  韦德国际1946英国 22

 

Js代码  韦德国际1946英国 23

 

Js代码  韦德国际1946英国 24

视图就讲贰个子Action,@Html.Action("actionname")的行使呢。比方有一个品种管理页面,有询问,新扩大,编辑品种等效果,大家能够把新增加,编辑功效分别建个view,让后绝对应写个controller。在品种管理视图页面以@Html.Action("AddProduct"),@Html.Action("ModifyProduct")的格局寄宿它们的视图,那样省得贰个页面html成分和javascript太多,便于管理。需注意一点的是宿主页面包车型大巴javascript变量,html成分在子页面中得以调用,宿主页不熟悉成时也满含子页面包车型地铁javascript和html,实际上它们都在同三个页面,写脚本的时候要防止变量争论,不打听的能够去该类型"品种管理"模块去查看。

Html代码  韦德国际1946英国 25

<input class="text-box single-line" data-val="true" data-val-length="只好3到十二个字符" data-val-length-max="10" data-val-length-min="3" data-val-required="必填"  id="name" name="name" type="text" value="" /> 在那之中以data-val开端的竹签表明它要在客户端验证,length和required为求证法则,max ,min为length法规的参数。你能够手动去丰盛那个注明法则,也足以让Mvc自动加多这个法规,假使要mvc自动增多客户端验证准绳,你得自定义八个ValidationAttribute,并且完毕IClientValidatale接口的IEnumerable<ModelClientValidationRule> GetClientValidationRules(ModelMetadata metadata, ControllerContext context)方法,再把该Atrribute放到model属性上,那样mvc在剖判model时会通过视图引擎将表达准绳自动增多到html成分标签中.达成该接口的目标而且是独占鳌头的目的就在于此。如若您想对自定义客户端和劳动器端验证有更加多的刺探,建议看下园子里的那篇文章:xxxxxxxx。

  1. var ids = '';    
  2. $('.trSelected td:nth-child(2) div',grid).each(function(i){    
  3.   if(i){  
  4.         ids  = ',';  
  5.   }  
  6.       ids  = $(this).text();    
  7. })  

韦德国际1946英国 26

    
   增添工具按键Logo准样品式:

末尾,写这篇小说的指标不在于项目本人,而在跟大家大饱眼福手艺,由于岁月有限,仓库储存和行销模块业务逻辑和客户端的现实性贯彻没有去做,有前方的多少个模块就足足展现那些手艺的运用了,希望我们见谅。源码:

 getCheckedRows()手艺正确获取数据。

当你配置表复杂关系都没难点来讲,轻便关联像一对一,多对多就变得轻易了,其余就不讲了,能够下载源代码去探视。要是想对CodeFirst有越多的明白的话能够去看<<Programming Entity Framework_ Code First>>这本书,很薄不到200页。

buttons新添参数: 

例如客户保管页面,查询客户数据时,如图:

 为读取所选行单元格数据代码,通过:$('.trSelected td:nth-child(2) div',grid)来读取,纵然同意多选,读取回来的是几个数组值。注意:td:nth-child(2)的意思为所选行的第二个单元格,因为:nth-child(index)的索引值从1起。

韦德国际1946英国 27

2、grid中有部分笔录是现已入选的,小编哪些让它们从数据库中查出来时后边的checkbox设置成选中?

韦德国际1946英国 28 View Code

Js代码  韦德国际1946英国 29

如此那般就足以创设能够递归数据的combotree了。

 

二:MVC

  1. error:function (data, textStatus, errorThrown) {  
  2.                         alert(textStatus);  
  3.                     }  
 [HttpPost]
        public ActionResult AddProduct(ProductDTO product)
        {
            if (ModelState.IsValid)
            {
                productService.AddProduct(product);
                return Json(null);
            }
            else
                return Json(GetErrorMessages(), "text/html", JsonRequestBehavior.AllowGet);
        }

三、使用手续表明 

mvc服务器端的证实你供给知道模型验证的基本流程:首先你得清楚验证在什么地点被触发;验证触发后怎么着搜集验证消息;最终怎么把验证音信上报到客户端。验证触发的地点有看不完:设置Model或Model属性的ValidationAttribute;大概在调控器中通过ModelState.AddModelError(key,value)那么些方式显式增添验证;或许让模型完毕IValidatableObject接口,重写接口的IEnumerable<ValidationResult>Validate(ValidationContext validationContext)方法来加多验证;验证触发后具有的验证新闻被置于三个叫ModelStateDictionary类型的ModelState属性中,然后被MVC自动获取,当然你也足以手动去遍历该词典获取验证新闻(前边会讲到);最后MVC通过视图引擎将表达音讯展现到客户端,当然你也得以写点脚本手动去落到实处(前面会讲到)。领会该流程后你才干一鼓作气心中有数。

Js代码  韦德国际1946英国 30

Mvc客户端的认证其实完全依赖于jquery.validate和jquery.validate.unobtrusive这五个剧本文件,在Asp.net中您也能够那样做。

btnText: 设置工具开关附Gavin本,原本的为displayname,我这里改成了btnText。

1:datagrid

  1. <table id="grid" style="display:none"></table>   
    Privte void DeleteCustomer(Customer cst)
    {
    Using(var context=new JXCContext())
    {    
     context.Entry(cst).State =EntityState.Deleted;
           context.SaveChanges();
    }
    }

 

单击提交开关,调用调节器中AddCustomer(Customer customer) 方法时, 该怎么编写多少个customer的json数据把页面数据传递给customer呢?

下载2:

Entityframework中CodeFirst成效首要指标是变化数据库,而生成数据库的字段,约束相比较轻易,而生成表之间的关联不经常比较费心,特别是一道主键不经常难搞,先上张项目模型关系图的一片段:

最近Paulo P. 马林as对FlexiGrid做了改变,以适应jQuery 1.4.2。看了下小编列出来的脾性表,该表十分短,但与过去比,却并未有扩大哪些新功能,所以版本号不做修改,依然是1.0b3。
其间涉及的一点值得注意,正是flexAddData方法已改写,质量是或不是有十分的大增进,还没测验,要看结果。(近来,抽时间看了眨眼之间间渲染表格数据的代码,估量成效依然倒霉好)。还会有Editable功效的加码,还是居于长时间安排中,那点对比令人纠结。

模型绑定有大致类型,集结类型,复杂类型的绑定。当你把一个繁杂类型嵌套复杂类型的绑定弄通晓后,别的的就总结了。比方项目客户保管在疯长客户时:

新扩大方法1:

4模型绑定

 

关于模型验证稍微讲多或多或少。Mvc的模型验证分为服务器端验证和客户端验证。先讲服务器端的证实。

除错:

 

在此说澳优(Ausnutria Hyproca)下,本文如故只是对旧版实行总括。

客户端脚本:

options新添参数:

当心两点:1:展现明细功用需引进datagrid-detailview.js脚本;2:服务器端数据格式得是{total=dataCount,rows=data}那样的object类型,便于datagrid深入分析数据。

  1. buttons:  
  2. [  
  3.     {name: 'Add', btnText: "新添", bclass: 'add', onpress: function(Add, grid){alert('那是增创操作。');return false;}},  
  4.     {name: 'Edit', btnText: "修改", bclass: 'edit', onpress: ''},  
  5.     {name: 'Delete', btnText: "删除", bclass: 'delete', onpress: ''},  
  6.     {separator: true},  
  7.     {name: 'Export', btnText: "导出Excel", bclass: 'excel', onpress: ''}  
  8. ]  

Javascript不是作者的不屈,Easyui也算不上理解,但内行应用还是没难点。只要您把Easyui最劳碌的多少个零件弄精通,笔者预计着别样的看下文书档案就会了,就讲下datagrid和combotree吧。

Js代码  韦德国际1946英国 31

韦德国际1946英国 32 View Code

name:Botton的标识,类型:string, 默认值:无
bclass :样式, 类型:boolen,默认值:无
onpress :当button被点击时接触的事件接受button的name为率先个参数,Grid为第叁个参数的三个function
separator :是不是出示分隔符

出处:

 

韦德国际1946英国 33

    为了便于今后使用,下面这段样式可以投入到flexigrid.css文件中。

韦德国际1946英国 34 View Code

 

2:Combotree

display:设置列表第一名称,必须设置,类型:string,默许值:无。
name:字段名称,必须设置,类型:string,私下认可值: 无。注意:假如dataType参数设置为json(dataType: 'json'),则name值必须与再次来到的成分名对应。
width:设置列宽度,必须设置,类型:数值(单位为像素px),默许值:无。
sortable:是或不是可排序,类型:boolen,暗中同意值:false,不排序。
process:管理程序,类型:
function,可格式化单元格。
hide:设置列是不是隐身,类型:boolen,私下认可值:false
align:设置列数据对齐格局,有多个参数:left、center、right。

 

 

韦德国际1946英国 35

作用达成示例: 

韦德国际1946英国 36 View Code

六、结束语

该dagagrid能排序分页,多选,单击行 号能查看客户收货地址数据,具体贯彻如下:

height: 200, //flexigrid插件的莫斯中国科学技术大学学,单位为px
width: 'auto', //宽度值,auto表示依据每列的增长幅度自动测算
striped: true, //是不是出示斑纹效果,暗中认可是奇偶交互的款式
novstripe: false, //没用过,不知怎么用,还需分析源代码
minwidth: 30, //列的矮小宽度
minheight: 80, //列的小不点儿中度
resizable: true, //是不是可伸缩
url: false, //ajax形式对应的url地址
method: 'POST', // 数据发送格局
dataType: 'xml', // 数据加载的门类
errormsg: 'Connection Error',//错误提醒消息
usepager: false, //是还是不是分页
nowrap: true, //是不是不换行
page: 1, //暗许当前页
total: 1, //总页面数
usePRADOp: true, //是不是足以动态设置每页展现的结果数
rp: 15, // 每页默许的结果数
rpOptions: [10,15,20,25,40],//可选拔设定的每页结果数
title: false, //标题设置
pagestat: 'Displaying {from} to {to} of {total} items',//显示分页状态
procmsg: ‘Processing, please wait …’,//正在管理的提示音讯
query: '',//找寻查询的基准,提交到服务器
qtype: '',//寻找查询的类别,提交到服务器
nomsg: 'No items',//无结果的提醒消息
minColToggle: 1, //是或不是允许隐蔽列
showToggleBtn: true, //突显或躲藏数据表格
hideOnSubmit: true,//掩盖提交
autoload: true,//自动加载
blockOpacity: 0.5,//折射率设置
onToggleCol: false,//当在行以内转移时
onChangeSort: false,//当退换排序时
onSuccess: false,//成功后实施
onSubmit: false // 触发自定义populate的交付事件

自己闲来无事就把原先用Asp.net做过的二个医药管理音讯体系用mvc,ef ,easyui重新做了一下,业务逻辑简化了相当的多,意在强化对mvc,ef(codefirst),easyui,AutoMapper,Ninject等本事的驾驭和行使,明日拿出来跟大家大饱眼福,正是想对那些手艺还处于入门阶段的对象做以参谋,以及正在用那几个技艺做项目的相恋的人做一个交换和探求。

 

 

下载1:

韦德国际1946英国 37

增加产量方法2:

韦德国际1946英国 38

 

韦德国际1946英国 39 View Code

开采FlexiGrid.js文件,找到代码行:

实则也挺不难的,客户端的验证你只需用脚本显式调用('#form').valid()那些方法就能够了,验证通过重回true,否则false。验证通过后你再调用controller方法实行劳动器端的验证。在controller中您需采摘验证音信然后以json数据格式重返到客户端,然后用剧本把验证新闻浮现出来就行了。比如,在项目项目管理页面增添项目时候,单击提交按钮触发客户端验证,通过后继续服务器端验证,如图

摘自FlexiGrid最新版的演示代码:

Entityframework查询数据的两种方法:延迟加载,饥饿加载,显式加载就十分少讲了,去看代码相当多地点都已呈现。讲一下Entityframework刨除和修改数据跟用linq to sql的差别之处吧。EF删除和改变数据不必像linq to sql 那样先得询问出某条记下,然后再对记录删除或涂改。

  1. var ids = $("#grid").getCheckedRows(); 能够得到到选中央银行的主键值,里面保存的是记录的ID数组。  

下一场Controller中的GetPageData方法能够那样写:xxx瑟维斯.GetPageData('查询条件1','查询条件2',‘查询条件N...’,PageDescriptor.PageIndex,PageDescriptor.PageCount,PageDescriptor.Sort, PageDescriptor.Order, out recordCount);那样写着轻便,省得离谱,能够另行利用。

本文由韦德国际1946英国发布于计算机网络,转载请注明出处:韦德国际1946英国:新年奉献MVC,增删改查

关键词: 伟德国际平台 设计模式

上一篇:计算机网络:ajaxSubmit使用讲解,异步提交表单的

下一篇:没有了