MVC3快速搭建Web应用(二)

easyui与mvc的结合

上一篇文章发布后,自己又仔细读了数遍,感觉一是文笔太差,二是描述逻辑比较混乱,客观原因是涉及到东西其实蛮多的,那三个步骤不可能在一篇短短的文章中就可以描述清楚。此篇笔者将尽量更加详尽一些。另外需要说明一点的是,本文默认读者:

  • 熟悉ASP.NET MVC
  • Razor语法
  • 熟悉javascript
  • 实体框架

Web应用不像winform应用,要想让用户得到更流畅更舒适的体验,方法之一就是模拟winform的窗口操作,使用户在浏览器中也能像桌面一样舒服。在界面框架方面我们有大家最熟悉的jquery ui,有Ext等等,经过一系列的筛选,我们最终决定使用easyui,文档教程例子都比较全面的一个js ui框架。首先我们来看看用到的js文件

    <script src="@Url.Content("~/Scripts/jquery-1.7.2.min.js")" type="text/javascript"></script> jquery主文件<script src="@Url.Content("~/Scripts/jquery.easyui.min.js")" type="text/javascript"></script> easy ui主文件<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script> 校验组件 <script src="@Url.Content("~/Scripts/jquery.form.js")" type="text/javascript"></script> 表单组件<script src="@Url.Content("~/Scripts/easyui-lang-zh_CN.js")" type="text/javascript"></script> easyui的中文化<script src="@Url.Content("~/Scripts/messages_cn.js")" type="text/javascript"></script> 校验组件的中文化

我们把它添加到mvc的Shared/_Layout.cshtml中。这样我们的项目所有Layout=null的视图都拥有了easyui支持。

在MVC3中,当你右键添加一个控制器时,向导会让你选择:

其中模版我们选择使用实体框架并生成相关actions与views,Model选择你实体框架中对应的表名(类名),DataContext选择上下文类

Views引擎选择Razor,高级选项里的两个勾都去掉,因为我们不需要引用内置的脚本库,也不需要选择layout(不选择layout,MVC默认该view使用Shared/_Layout.cshtml,也就是刚才我们添加js文件link的那个文件)。

 

确认上一篇中你下载的t4模版放进了它应该存在的地方(最好备份一下原始的),当你点击Add时,vs会自动在Controllers下面添加相应的控制器,在views文件夹下添加Create、Edit、Delete、Details、Index五个文件。下面我们一一查看他们的内容:

控制器中,action已经自动帮你添加完毕

    private BsmisEntities db = new BsmisEntities();//// GET: /User/public ViewResult Index(){return View();}//// GET: /User/Createpublic ActionResult Create(){return View();} //// POST: /User/Create[HttpPost]public ActionResult Create(T_User t_user){JsonResult result = new JsonResult();result.Data = true;try{if (t_user.Enable == null)t_user.Enable = 0;db.T_User.AddObject(t_user);db.SaveChanges();}catch (Exception ee){result.Data = ee.Message;}return result;}//// GET: /User/Edit/5[OutputCache(Location = OutputCacheLocation.None)]public ActionResult Edit(int id){T_User t_user = db.T_User.Single(t => t.UserID == id);ViewBag.DepartmentID = new SelectList(db.T_DepartmentInfo, "DepartmentID", "Code", t_user.DepartmentID);return View(t_user);}//// POST: /User/Edit/5
[HttpPost][OutputCache(Location = OutputCacheLocation.None)]public ActionResult Edit(T_User t_user){JsonResult result = new JsonResult();result.Data = true;try{db.T_User.Attach(t_user);db.ObjectStateManager.ChangeObjectState(t_user, EntityState.Modified);db.SaveChanges();}catch (Exception ee){result.Data = ee.Message;}return result;}//// POST: /User/Delete/5[HttpPost, ActionName("Delete")]public ActionResult DeleteConfirmed(int id){ 
  
     JsonResult json=new JsonResult();

        json.Data=true;
        try
        {

              T_User t_user = db.T_User.Single(t => t.UserID ==id);db.T_User.DeleteObject(t_user);db.SaveChanges();

        }
        catch(Exception ee)
        {
          json.Data=ee.Message;
        }
        return json;

        }/// <summary>/// 数据显示、分页信息/// </summary>/// <param name="page"></param>/// <param name="rows"></param>/// <returns></returns>public JsonResult List(int page, int rows){var q = from u in db.T_Userjoin d in db.T_DepartmentInfo on u.DepartmentID equals d.DepartmentIDorderby u.UserIDselect new{UserID = u.UserID,UserName = u.UserName,Address = u.Address,Birth = u.Birth,DepartmentID = u.DepartmentID,DepartmentName = d.Name,Enable = u.Enable,Gendar = u.Gendar,IDCardNumber = u.IDCardNumber,LastAccessIP = u.LastAccessIP,LastAccessTime = u.LastAccessTime,LogonTimes = u.LogonTimes,Password = u.Password,PostCode = u.PostCode,RealName = u.RealName,Tel = u.Tel,Province = u.Province,City = u.City,Area = u.Area};var result = q.Skip((page - 1) * rows).Take(rows).ToList();Dictionary<string, object> json = new Dictionary<string, object>();json.Add("total", q.ToList().Count);json.Add("rows", result);return Json(json, JsonRequestBehavior.AllowGet);}

这些action分别对应create、delete、edit、index视图(detail我们一般情况下不需要它,所以我的模版里没有写对应的生成代码)你可以比较一下它与原生的模版生成的代码之间的区别。后期我们还会在控制器里添加一些譬如检查名称是否重名之类的action

        [OutputCache(Location = OutputCacheLocation.None)]public JsonResult CheckRealNameExist(string RealName, int UserID){JsonResult result = new JsonResult();result.JsonRequestBehavior = JsonRequestBehavior.AllowGet;result.Data = false;try{if (UserID == 0){if (db.T_User.Any(p => p.RealName == RealName)){return result;}}else{if (db.T_User.Any(p => ((p.UserID != UserID) && (p.RealName == RealName)))){return result;}}}catch (Exception){return result;}result.Data = true;return result;}

返回值一般都是jsonresult。这样的话,当你在浏览器中访问http://localhost:1233/User/CheckRealNameExist?RealName=张三&UserID=0时 你会获得一个true或false值。是不是跟webservice有点异曲同工?

同样,在Views文件夹中生成了Create、Edit、Details、Delete、Index五个文件,其中Details与Delete我们不需要,因为我们想使用更友好的异步删除(用户单击delete后,页面不刷新,成功后浏览器下方滑出提示,3秒后关闭,失败滑出失败信息,不自动关闭 /利用easyui中的messager组件)。以下是Index中的js:

        //删除function del() {var id = getselectedRow();if (id != undefined) {$.messager.confirm('确认', '确定删除?', function (r) {if (r) {var url = 'User/Delete/' + id;$.post(url, function () {}).success(function () {$.messager.show({title: '提示',msg: '删除成功',timeout: 3000,showType: 'slide'});$('#dg').datagrid('reload');}).error(function () {$.messager.alert('错误', '删除发生错误');});}});}}

我们把Details与Delete删除后只剩下Index、Create、Edit三个文件,这三个文件之间的关系是,Index中包含添加、编辑按钮,点击后使用js将对应的actionresult加载到div中,以实现弹窗新建,编辑的效果。

  //新建function c_dlg() {var url = 'User/Create';$('#c_dlg').show();$('#c_dlg').load(url, function () {$(this).dialog({title: '添加',buttons: [{text: '提交',iconCls: 'icon-ok',handler: function () {$('#c_form').submit();}}, {text: '取消',handler: function () {$('#c_dlg').dialog('close');}}]});});}//编辑框function e_dlg() {var id = getselectedRow();if (id != undefined) {var url = 'User/Edit/' + id;$('#e_dlg').show();$('#e_dlg').load(url, function () {$(this).dialog({title: '编辑',buttons: [{text: '提交',iconCls: 'icon-ok',handler: function () {$('#e_form').submit();}}, {text: '取消',handler: function () {$('#e_dlg').dialog('close');}}]});});}}

这里面的c_dlg与e_dlg是index页面的两个Div节点:

    <div id="c_dlg" style="width:400px;height:520px;display: none"></div><div id="e_dlg" style="width:400px;height:520px;display: none"></div>

以上的代码完成将控制器中的action返回的页面内容动态加载到div中,并以弹窗的特效显示在当前(Index)页面中。效果如图:

我们来看看Create\Edit视图的内容,首先是js

<script type="text/javascript">$(function () {$('#c_Department').combotree({url: '@Url.Action("GetComboTreeJson","Department")'});$('#c_City').combobox();$('#c_Area').combobox();$('#c_Province').combobox({ url:'CityDic/List/ID/0',onSelect: function (record) {$('#c_City').combobox('reload', 'CityDic/List/ID/' + record.ID).combobox('clear');$('#c_Area').combobox('clear');}});$('#c_City').combobox({onSelect: function (record) {$('#c_Area').combobox('reload', 'CityDic/List/ID/' + record.ID).combobox('clear');}});$('#c_Birth').datebox().datebox('setValue', '@now');$("#c_form").validate({rules: {UserName: {required: true,remote:{url: 'User/CheckNameExist',type: "get",dataType: "json",data: {Name: function () { return $('#c_UserName').val(); },UserID: function () { return 0; }}}},RealName: {required:true,remote: {url: 'User/CheckRealNameExist',type: "get",dataType: "json",data: {RealName: function () { return $('#c_RealName').val(); },UserID: function () { return 0; }}}}},messages: {UserName: {remote: '名称重复'}, RealName: { remote: '名称重复' }},submitHandler: function (form) {ajaxAdd();}});});
</script>

这部分js将本页面的控件初始化为对应的下拉框或日期选取框等等,Html为

@using (Html.BeginForm("Create", "User", FormMethod.Post, new { id = "c_form" }))
{<fieldset><table class="editForm"><tr><td>@Html.LabelFor(model => model.UserName, "用户名:")</td><td><input id="c_UserName" name="UserName" style="width: 160px;" required="true" /><span style="color: red">*</span></td></tr><tr><td>@Html.LabelFor(model => model.DepartmentID, "组织机构:")</td><td><input id="c_Department" name="DepartmentID" style="width: 160px;" required="true" /><span style="color: red">*</span></td></tr><tr><td>@Html.LabelFor(model => model.Password, "密码:")</td><td>@Html.PasswordFor(model => model.Password, new { @class = "{required:true,minlength:5}" })<span style="color: red">*</span></td></tr><tr><td><label for="confirm_password">确认密码</label></td><td><input id="confirm_password" name="confirm_password" type="password" class="{required:true,minlength:5,equalTo:'#Password'}" /><span style="color: red">*</span></td></tr><tr><td>@Html.LabelFor(model => model.RealName, "真实姓名:")</td><td>@Html.TextBoxFor(model => model.RealName, new { @id="c_RealName",@class = "{required:true}" })<span style="color: red">*</span></td></tr><tr><td>@Html.LabelFor(model => model.Gendar, "性别:")</td><td>@Html.RadioButtonFor(model => model.Gendar, "男", new { @id = "radio1", @name = "Gendar", @checked = "checked" })<label for="radio1"></label>@Html.RadioButtonFor(model => model.Gendar, "女", new { @id = "radio2", @name = "Gendar" })<label for="radio2"></label></td></tr><tr><td>@Html.LabelFor(model => model.Birth, "出生日期:")</td><td><input id="c_Birth" required="true" name="Birth" /></td></tr><tr><td>@Html.LabelFor(model => model.IDCardNumber, "身份证号码:")</td><td>@Html.EditorFor(model => model.IDCardNumber)</td></tr><tr><td>@Html.LabelFor(model => model.Province, "省份:")</td><td><input name="Province" valuefield="Name" textfield="Name" panelheight="auto" id="c_Province" style="width: 150px"></td></tr><tr><td>@Html.LabelFor(model => model.City, "市:")</td><td><input name="City" valuefield="Name" textfield="Name" panelheight="auto" id="c_City" style="width:150px"></td></tr><tr><td>@Html.LabelFor(model => model.Area, "区/县:")</td><td><input name="Area" valuefield="Name" textfield="Name" panelheight="auto" id="c_Area" style="width: 150px"></td></tr><tr><td>@Html.LabelFor(model => model.PostCode, "邮政编码:")</td><td>@Html.EditorFor(model => model.PostCode)</td></tr><tr><td>@Html.LabelFor(model => model.Address, "地址:")</td><td>@Html.EditorFor(model => model.Address)</td></tr><tr><td>@Html.LabelFor(model => model.Tel, "电话:")</td><td>@Html.EditorFor(model => model.Tel)</td></tr><tr><td>@Html.LabelFor(model => model.Enable, "启用:")</td><td>@Html.CheckBoxForBool(model=>model.Enable,true,true)</td></tr></table></fieldset>
}

编辑视图中也类似如此。当单击保存按钮后,执行

$('#c_form').submit();

这里我们的客户端校验在这里:

$("#c_form").validate({rules: {UserName: {required: true,remote:{url: 'User/CheckNameExist',type: "get",dataType: "json",data: {Name: function () { return $('#c_UserName').val(); },UserID: function () { return 0; }}}},RealName: {required:true,remote: {url: 'User/CheckRealNameExist',type: "get",dataType: "json",data: {RealName: function () { return $('#c_RealName').val(); },UserID: function () { return 0; }}}}},messages: {UserName: {remote: '名称重复'}, RealName: { remote: '名称重复' }},submitHandler: function (form) {ajaxAdd();}});

submitHandler方法提供校验前要做的事情:ajaxAdd()

 //异步新建提交function ajaxAdd() {$('#c_form').ajaxSubmit({url: 'User/Create',beforeSubmit: function () {if ($('#c_form').form('validate') != true) {return false;}if ($("#c_form").valid() != true) {return false;}return true;},success: function (data) {if (data == true) {$('#c_dlg').dialog('close');$('#dg').datagrid('reload');$.messager.show({title: '提示',msg: '保存成功',timeout: 2000,showType: 'slide'});} else {$.messager.show({title: '提示',msg: '保存失败:' + data,timeout: 2000,showType: 'slide'});}}});return false;}

异步提交成功后获取data,如果是true说明成功了,关闭“对话框”,刷新表格,弹出提示。失败的话将data弹出(一般是失败原因,由controller中的action返回)。下面是Index中的表格:

<table id="dg" class="easyui-datagrid" toolbar="#toolbar"  rownumbers="true" fitColumns="true" singleSelect="true" pagination="true" fit="true"><thead>    <tr><th field="DepartmentName" width="80">部门</th><th field="UserName" width="100">用户名</th><th field="RealName" width="100">真实姓名</th><th field="Gendar" width="30">性别</th><th field="Birth" width="70" formatter="formatDate">生日</th><th field="Tel" width="50">电话</th><th field="LogonTimes" width="50">登陆次数</th><th field="LastAccessIP" width="120">最后访问IP</th><th field="LastAccessTime" width="50">最后访问时间</th><th field="Enable" width="50" formatter="formatBool">状态</th></tr></thead></table><div id="toolbar">@if (userid != 0 && AuthMgr.HasAuth(userid, "add", 5)){<a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="c_dlg();">添加</a>  }@if (userid != 0 && AuthMgr.HasAuth(userid, "edit", 5)){<a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="e_dlg()" >编辑</a>}</div> 

其中@if是用来判断权限,如果当前登陆用户拥有add权限,那么就显示“添加“按钮。

今天先写到这。

转载于:https://www.cnblogs.com/limlee/archive/2012/06/25/rapid_dev_use_mvc_2.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/295471.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

如何通过 .NETCore 获取 Linux,Mac 的硬件信息?

咨询区 Pascal Jackson&#xff1a;请问我如何通过 .NET Core 去识别 Linux/Mac 电脑上的硬件信息&#xff1f;在 windows 上我可以通过 System.Management 下 WMI Query 很容易获取&#xff0c;比如下面的代码&#xff1a;ManagementObjectSearcher searcher new ManagementO…

KVM 虚拟机自动克隆脚本

#!/bin/sh#----------------------------------## virt-clone auto script[虚拟机自动克隆脚本]# create by xuekun# date 2015-12-26# 开源人#----------------------------------## Source function library.. /etc/rc.d/init.d/functions#SOUR_SERVER$1DIRE_SERVER$2IP_ADDR…

SpringMVC整合Shiro

这里用的是SpringMVC-3.2.4和Shiro-1.2.2&#xff0c;示例代码如下 首先是web.xml <?xml version"1.0" encoding"UTF-8"?> <web-app version"2.5"xmlns"http://java.sun.com/xml/ns/javaee"xmlns:xsi"http://www.w3.o…

这个发热鞋垫厉害了,有它冬天再也不怕脚冷

▲ 点击查看冬天一到&#xff0c;小爆发现身边的“抖友”又开始上线了&#xff01;至于为什么会抖脚&#xff1f;有盆友说&#xff0c;当然不是真的想抖&#xff0c;而是因为脚太冷冷冷了&#xff01;有时候穿了棉袜厚鞋&#xff0c;脚都是冷冰冰的&#xff0c;感觉就像踩在冰窟…

.NET 6新特性试用 | 热重载

前言在以前的开发模式下&#xff0c;我们修改代码后必须重新编译、重新运行才能看到效果。而热重载提供了这样一种特性&#xff0c;它允许你在项目正在运行时修改代码&#xff0c;并将代码更改立即应用于正在运行的应用程序上。热重载的目的是尽可能节省编辑之间的应用重启次数…

加速你的Hibernate引擎(上)

为什么80%的码农都做不了架构师&#xff1f;>>> 1.引言 Hibernate是最流行的对象关系映射&#xff08;ORM&#xff09;引擎之一&#xff0c;它提供了数据持久化和查询服务。 在你的项目中引入Hibernate并让它跑起来是很容易的。但是&#xff0c;要让它跑得好却是需…

WSUS服务器的建立以及客户端发布

http://yuelei.blog.51cto.com/202879/81676转载于:https://blog.51cto.com/439810/909642

Spring MVC 中 HandlerInterceptorAdapter过滤器的使用

一般情况下&#xff0c;对来自浏览器的请求的拦截&#xff0c;是利用Filter实现的&#xff0c;这种方式可以实现Bean预处理、后处理。 Spring MVC的拦截器不仅可实现Filter的所有功能&#xff0c;还可以更精确的控制拦截精度。 Spring为我们提供了org.springframework.web.s…

7部必看的纪录片,每一部都堪称经典,让人叹为观止!

全世界只有3.14 % 的人关注了爆炸吧知识纪录片的一大重要意义&#xff0c;就在于它能将我们的视野和脚步&#xff0c;引向我们无法企及的地方和领域&#xff0c;又能让那些我们曾经到过的地方、经历过的人事&#xff0c;变得更有深意。今天&#xff0c;就给大家分享7部顶级纪录…

通过SQL Server操作MySQL的步骤和方法

在多种数据库环境下&#xff0c;经常会遇见在不同数据库之间转换数据和互相进行操作的情况。以下简要介绍下用SQL Server操作MySQL的步骤和方法。 1 操作前的准备 1.1 安装MySQL驱动 想要在SQL Server中操作MySQL&#xff0c;首先要在SQL Server所在的服务器上安装MySQL的驱动。…

ubuntu 新增mysql用户_Ubuntu中给mysql添加新用户并分配权限

一.Ubuntu下启动mysql方法&#xff1a;/etc/init.d/sudo mysqld二.用户添加bingt;mysql -u rootmysqlgt; grant 权限1,权限2,...权限n on一.Ubuntu下启动mysql方法&#xff1a;/etc/init.d/sudo mysqld二.用户添加bin>mysql -u rootmysql> grant 权限1,权限2,...权限n on…

ABP Framework 5.0 RC.1 新特性和变更说明

.Net 6.0 发布之后&#xff0c;ABP Framework 也在第一时间进行了升级&#xff0c;并在一个多星期后&#xff08;2021-11-16&#xff09;发布了 5.0 RC.1 &#xff0c;新功能和重要变更基本已经确定。5.0版本新特性5.0版本新特性列表&#xff1a;•静态 C# 和 JavaScript 客户端…

技术成长的困扰

学习知识的来源都是微信公众号、微博、博客&#xff0c;太碎片化&#xff0c;造成的结果是没有自己的知识体系&#xff0c;不能从整个知识结构层面去看待问题。转载于:https://www.cnblogs.com/samniu/p/5147191.html

mysql分页原理和sqlserver里面序列的用法

mysql使用经验 1.比如分页 select * from table limit 6 和select * from table limit 0,6 等价select * from table limit 5,10&#xff1b; 一般前面的5放的是 漂移 后面的10放的是 一页多少行 拿到数据库 table里面的数据是 第6条到15条 42.121.56.21sqlserver里面序列的用…

土木工程到底有多惨?哭了哭了......

1 那我要去女寝当宿管&#xff01;&#xff08;素材来源网络&#xff0c;侵删&#xff09;▼2 别说了快哭了▼3 今夜我们都是尾款人▼4 童叟无欺&#xff0c;与图片完全一致▼5 好样的&#xff0c;兄弟&#xff01;▼6 土木工程有多惨&#xff1f;&#xff08;素材来源网络…

基于ip tunnel连接不同三个不同网络的×××

就以公司的环境来测试&#xff1a; 局域网网段为192.168.0.0/24 公司linux网关服务址器地绑定两块网卡 内网为192.168.0.3&#xff08;作为局域网的网关&#xff09;公网IP地址为&#xff1a;111.111.111.111 机房内网网段为10.10.0.0/16 一台服务器绑有两块网卡 内网地址…

Easy UI中dategrid的getSelections方法只能获取一个id的解决办法

解决方案&#xff1a;检查idField属性值是否与json数据中的id相同(区分大小写) 实在不行就 去掉 idField属性 也可以解决问题 具体效果请看图&#xff1a; 转载于:https://www.cnblogs.com/hanfeng1949/archive/2013/05/28/3104288.html

java合并list_怎么把两个list合并

第二步骤&#xff1a;list添加set集合1、在实际使用中addAll方法也可以将set集合中的内容添加到list中2、实际代码如下所示&#xff1a;import java.util.ArrayList;import java.util.HashSet;import java.util.List;import java.util.Set;public class ListTest {public stati…

mybatis和hibernate的对比总结

mybatis和hibernate 第一步&#xff0c; 首先让我们对mybatis和hibernate对比了解下 1、 Hibernate &#xff1a;Hibernate 是当前非常流行的ORM框架&#xff0c;对数据库结构提供了较为完整的封装&#xff0c;都是为了简化Dao层的操作。Mybatis&#xff1a;Mybatis同…

.NET 6新特性试用 | Controller支持IAsyncDisposable

前言在.NET中&#xff0c;拥有非托管资源的类通常会实现IDisposable接口&#xff0c;以提供一种同步释放非托管资源的机制。但是&#xff0c;在某些情况下&#xff0c;需要提供一种异步机制来释放非托管资源&#xff0c;这时候可以实现IAsyncDisposable接口。在实现此接口后&am…