easyui+jQuery+MVC+EF的一个演示

环境：visual studio 2013+sql server

创建新项目：visual C# -> Web -> visual studio 2012 -> ASP.NET MVC 4 Web应用程序

Web服务器：访问磁盘静态的HTML文件，或者访问服务器的动态脚本生成的HTML界面

MVC：URL->路由机制->选择控制器及其方法，并提供参数->选择视图并进行渲染。即提供的是方法的调用结果，而不是脚本页面

MVC的结构简介

  • Global.asax文件是程序的入口，创建时会自动生成一些配置，比较重要的是路由注册，在App_Start文件夹中有对应的注册文件
  • Controllers文件夹中有一系列C#类型的控制器文件。这些文件命名需要Controller后缀（如：HomeController.cs）并继承Controller父类。在控制器文件中的方法如果想要渲染视图需要使用"return View(参数);"语句。参数用视图文件名来指定视图文件。如果不指定参数就认为使用的视图文件和方法名是一致的。
  • Views文件夹中含有视图文件。在Controllers文件夹中的每一个C#文件在这个文件夹下对应一个子文件夹，文件夹名为对应的C#文件名去掉后面的Controller。这个字文件夹中有这个C#文件需要渲染的视图文件（格式为.cshtml）。除了这些文件夹之外还有一个Shared文件夹。用来放置共享的视图文件。
  • Controller文件寻找视图文件的方式：首先在Views下对应的文件夹中寻找，如果没有就从Views下的Shared文件夹中找
  • 路由解析（URL）：URL的解析方式在App_Start/RouteConfig.cs文件中定义：url: "{controller}/{action}/{id}"。这样的URL将指向controller对应的控制器文件（url中的controller没有Controller后缀）中的action方法，并执行它。id是作为参数传递给方法，如果方法的参数列表中有名为id的参数就会将这个值传递到id中，如果没有就忽略。url再后面用"?"隔开的是参数列表，以  参数名=值  &  参数名=值 ...的形式传递。App_Start/RouteConfig.cs文件还可以定义URL的默认值。
  • 如果想要划分工作空间，可以添加Area文件夹，其中的子文件夹中的内容是独立的MVC文件结构。这样的结构在访问的时候需要在url的controller之前加上"工作空间/"

一个示例：用easyui实现浏览器界面在EF下实现对数据库的增删查功能

在controller中有一个HomeController.cs文件，对应有三个用来渲染视图的方法：Insert(),Delete(),Search()

在Views下的Home文件夹中有三个视图文件：Delete.cshtml,Insert.cshtml,Search.cshtml

Views下的Shared文件夹中有一个_Layout.cshtml文件，用于实现其他视图文件共有的部分，即所有其他的视图都将加载这个文件并将自己的内容嵌入_layout中指定的位置

_Layout.cshtml：

在<head>标签中进行要使用到的文件的导入，如jQuery文件。"~"是用来指明后面的路径是绝对路径（相对工作空间）

    <link rel="stylesheet" type="text/css" href="~/Content/js/themes/default/easyui.css">

    <link rel="stylesheet" type="text/css" href="~/Content/js/themes/icon.css">

    <link rel="stylesheet" type="text/css" href="~/Content/js/demo/demo.css">

    <script src="@Url.Content("~/Content/js/jquery.min.js")" type="text/javascript"></script>

    <script src="@Url.Content("~/Content/js/jquery.easyui.min.js")" type="text/javascript"></script>

在<body>标签中需要设置在哪一部分嵌入其他视图文件。在其他的视图文件中将会有  @section name{}  部分以及剩余部分。在_Layout.cshtml文件中将有

@RenderSection(

    "name", //指明将会用其他视图文件的哪一个section代替自己

    boolean//当找不到这个section的时候是报错还是忽略

)//

@RenderBody()  //其他视图文件的非section部分将替换它

文件中还会有多个页面都会用到的部分，如页面选择按钮、相同的dialog等

页面选择：可以设置为按钮，在点击时执行

public string Action(string actionName, string controllerName)

也可以设置为超链接文本：

//public static MvcHtmlString ActionLink(this HtmlHelper htmlHelper, string linkText, string actionName, string controllerName);

@Html.ActionLink("Search", "Search")

Search.cshtml

在文件头部会有：

@{

    ViewBag.Title = "Search";

    Layout = "~/Views/Shared/_Layout.cshtml";

}

这样的结构，用来声明使用的布局文件以及传递参数等。

这个页面的入口：

    //入口

    $(document).ready

    (

        function () {

            Search();

        }//ready的函数参数

    )//ready

当文件准备好的时候就会执行参数表示的函数，在这里调用了Search函数：

    //弹出对话框，添加两个按钮（提交/取消）

    //提交：调用Accept()函数之后关闭dialog

    //取消：关闭dialog

    var Search = function ()

    {

        $("#dialog").dialog

        ({

                buttons:

                [{

                        text: "submit",

                        iconCls: "icon-ok",

                        handler: function () {

                            if ($("#input_form").form('enableValidation').form('validate'))

                            {

                                Accept();

                                $("#dialog").dialog("close");

                            }

                        }

                },//submit button

                {

                        text: "cancle",

                        iconCls: "icon-undo",

                        handler: function () {

                            $("#dialog").dialog("close");

                        }

                }]//button数组

        });//dialog

    }//function Search()

在这个函数中弹出了指定的dialog并且在dialog中加入了两个按钮

Accept()：

    //设置数据显示方式的url指向Controller的一个方法，该方法返回查询得到的数据

    //重新加载datagrid中的数据

    var Accept = function () {

        installData.url = '@(Url.Action("SearchInstallDB","Home"))';

        var queryParams =

        {

            "ID": $('#installID').textbox('getValue'),

            "City": $('#installCity').textbox('getValue'),

            "Type": $('#installType').textbox('getValue')

        };

        installData.queryParams = queryParams;

        $('#show_data').datagrid(installData).datagrid('reload');

    }

这个函数将会调用指定Controller的指定方法，并传递参数接收数据。这在datagrid的使用中介绍过

Insert.cshtml

这里有一点不同的是：插入不用接收数据，所以用Ajax发送参数就可以了

$.ajax

({

    url: "@(Url.Action("InsertInstallDB", "Home"))",

    type: 'post',

    async: true,

    //参数model

    data: {

        "ID": $('#installID').textbox('getValue'),

        "City": $('#installCity').textbox('getValue'),

        "Type": $('#installType').textbox('getValue')

    },

    success: function () {

    },

    error: function () {

    }

})//ajax

$.ajax(参数)，参数为一个对象，对象有特定的属性，Ajax根据这些属性设置发送行为的属性，名称是固定的，这样才可以解析

属性：

url，目的地址，@(Url.Action()),定义如下：public string Action(string actionName, string controllerName);

type：发送数据的方式，是post还是get

async：是否是异步的（局部更新）

data：也是一个对象，根据接收方接收参数设置。接收方用一个对象的属性值接受这些数据，在data的对象中通过属性名:参数值 这样的键值对来设置接收方接收到的对象的相应属性值（用逗号隔开），如果不对应就无法解析，虽然不会报错，但是无法正常接收数据

success：一个函数变量，表示成功发送后执行的函数

error：一个函数变量，执行失败时执行的函数

Delete.cshtml：略

HomeController中和视图无关的方法

这些方法在前面视图进行数据库操作意图时调用。

注意这里的参数传递使用的是一个新建的类

为减小程序之间的耦合，不在控制器中直接操作数据库，而是创建一个新的类专门用来操作数据库。

private InstallRepository aSvr = new InstallRepository();

public ActionResult SearchInstallDB(InstallPara model)

{

    var result = aSvr.SearchInstallDB(model);

    return Json(new { rows = result.Array, total = result.Total });

}//SearchInstallDB

相应的操作：

public PageArray<Install> SearchInstallDB(InstallPara model)

{

    using (var db = new EFDbContext())

    {

        var args = new SqlParameter[] {

            new SqlParameter { ParameterName = "ID", Value = model.ID },

            new SqlParameter { ParameterName = "City", Value = model.City },

            new SqlParameter { ParameterName = "Type", Value = model.Type },

        };

        SQLPara(args);//处理空值

        db.Database.CreateIfNotExists();

        var list = db.Database.SqlQuery<Install>(

            "Select * from Install where (@ID is null or ID=@ID) and (@City is null or City=@City) and (@Type is null or Type=@Type)",

            args

        ).ToArray();

        return new PageArray<Install>(1, list, 0, model.rows, list.Length);

    }//DbContext

}//SearchInstallDB

在这里执行sql语句的时候，如果是查询语句需要使用:

public DbRawSqlQuery<TElement> SqlQuery<TElement>(string sql, params object[] parameters);

TElement表示的是要查询的表

sql字符串中不直接传递参数，而是将参数用@name的形式表示出来，在后面的参数数组中设置值。

由于在Controller中返回值要求为JSON格式，在这里用PageArray<>更方便

非查询语句使用：

public int ExecuteSqlCommand(string sql, params object[] parameters);

源码：

https://github.com/biaoJM/ASP.NET-MVC-DEMO/tree/master/MVCDemo/MVCDemo

MVC-easyui-EF的更多相关文章

  1. ASP.NET MVC+EasyUI+Entity FrameWork 整合开发

    本文详细讲解怎么用ASP.NET MVC+EasyUI+Entity FrameWork 来开发一个项目 对于ASP.NET MVC的Jscript库,主要引用 <script type=.mi ...

  2. ASP.NET MVC +EasyUI 权限设计(一)开篇

    在前一段时间中,老魏的确非常的忙碌,Blog基本上没有更新了,非常的抱歉,那么在后面的时间中,老魏会尽量的抽时间来写的,可能时间上就不太富裕了.今天开始呢,老魏会和大家分享一下关于权限设计的有关文章, ...

  3. 翻译：使用 ASP.NET MVC 4, EF, Knockoutjs and Bootstrap 设计和开发站点 - 3

    原文地址:http://ddmvc4.codeplex.com/ 原文名称:Design and Develop a website using ASP.NET MVC 4, EF, Knockout ...

  4. 翻译：使用 ASP.NET MVC 4, EF, Knockoutjs and Bootstrap 设计和开发站点 - 1

    原文地址:http://ddmvc4.codeplex.com/ 原文名称:Design and Develop a website using ASP.NET MVC 4, EF, Knockout ...

  5. ASP.NET MVC和EF集成AngularJS开发

    参考资料: 如何在ASP.NET MVC和EF中使用AngularJS AngularJS+ASP.NET MVC+SignalR实现消息推送 [AngularJs + ASP.NET MVC]使用A ...

  6. 1、MVC和EF中的 Model First 和 Code First

    准备:先引入MVC和EF的dll包 *命令方法:打开工具——库程序包管理器——程序包管理器控制台,选择自己的项目 a)     Install-Package EntityFramework -Ver ...

  7. MVC+EasyUI 菜单导航的实现

    一个简单的使用mvc+easyUi 动态菜单显示 直接上代码 前端 function initMenu() { $.get("/Admin/Home/GetNav", functi ...

  8. ASP.NET MVC +EasyUI 权限设计(二)环境搭建

    请注明转载地址:http://www.cnblogs.com/arhat 今天突然发现博客园出问题了,老魏使用了PC,手机,平板都访问博客园了,都是不能正常的访问,原因是不能加载CSS,也就是不能访问 ...

  9. 对Spring.Net+NHibenate+Asp.Net Mvc+Easyui框架的个人认识

    对Spring.Net+NHibenate+Asp.Net Mvc+Easyui框架的个人认识   初次接触Spring.Net+NHibenate+Asp.Net Mvc+Easyui框架,查阅了相 ...

  10. hibernate+spring+mvc+Easyui框架模式下使用grid++report的总结

    最近刚开始接触hibernate+spring+mvc+Easyui框架,也是刚开通了博客,希望能记录一下自己实践出来的东西,让其他人少走弯路. 转让正题,以个人浅薄的认识hibernate对于开发人 ...

随机推荐

  1. Ubuntu14.04下Mongodb官网安装部署步骤（图文详解）（博主推荐）

    不多说,直接上干货! 在这篇博客里,我采用了非官网的安装步骤,来进行安装.走了弯路,同时,也是不建议.因为在大数据领域和实际生产里,还是要走正规的为好. Ubuntu14.04下Mongodb(离线安 ...

  2. inline元素和inline-block元素的4px空白间距解决方案

    实在不想写了,要吐了,看到一篇讲的比较全的文章,直接粘链接了 inline元素和inline-block元素的4px空白间距解决方案 出自脚本之家

  3. unserialize反序列化错误的解决办法

    1. UTF-8编码解决反序列化出错问题 function mb_unserialize($serial_str) { $serial_str = str_replace("\r" ...

  4. layer弹窗

    layer.alert(content, options, yes) - 普通信息框 它的弹出似乎显得有些高调,一般用于对用户造成比较强烈的关注,类似系统alert,但却比alert更灵便.它的参数是 ...

  5. NOIp2018模拟赛三十六

    好久没打模拟赛了...今天一样是两道国集,一道bzoj题 成绩:13+0+95=108 A题开始看错题了...导致样例都没看懂,结果xfz提醒我后我理解了一个我自认为正确的题意(事实证明我和xfz都错 ...

  6. [BZOJ3673&3674]可持久化并查集&加强版

    题目大意:让你实现一个可持久化的并查集(3674强制在线). 解题思路:刚刚介绍了一个叫rope的神器:我是刘邦,在这两题(实际上两题没什么区别)就派上用场了. 正解应该是主席树||可持久化平衡树,然 ...

  7. 2018秋寒假作业4——PTA编辑总结1

    #include<stdio.h> #include<math.h> int main(void) { int n,i,j,p,m,ge,N,k; char op; ){ sc ...

  8. 2016 10 26考试 NOIP模拟赛 杂题

    Time 7:50 AM -> 11:15 AM 感觉今天考完后,我的内心是崩溃的 试题 考试包 T1: 首先看起来是个贪心,然而,然而,看到那个100%数据为n <= 2000整个人就虚 ...

  9. 洛谷 P2049 魔术棋子

    P2049 魔术棋子 题目描述 在一个M*N的魔术棋盘中,每个格子中均有一个整数,当棋子走进这个格子中,则此棋子上的数会被乘以此格子中的数.一个棋子从左上角走到右下角,只能向右或向下行动,请问此棋子走 ...

  10. iPhone4怎样鉴别翻新机

    加入杂志 步骤 1 2 3 4 5 6 由于iPhong4s的不给力,中国内地上市时间又尚未确定,造成近期iPhone4的价格涨了一大截,随之而来的就是大量的翻新机出现在市场上,那么 怎样判断自己手中 ...