MVC-easyui-EF

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

猜你喜欢

转载自blog.csdn.net/qq_40711741/article/details/81004224