当前位置: 移动技术网 > IT编程>开发语言>.net > .NET Web开发之.NET MVC框架介绍

.NET Web开发之.NET MVC框架介绍

2017年12月12日  | 移动技术网IT编程  | 我要评论

青岛市市长张新起,兴宁碧桂园最新动态,双阙txt下载

mvc概念

mvc是一种架构设计模式,该模式主要应用于图形化用户界面(gui)应用程序。那么什么是mvc?mvc由三部分组成:model(模型)、view(视图)及controller(控制器)。

model即应用程序的数据模型。任何应用程序都离不开数据,数据可以存储在数据库中、磁盘文件中,甚至内存中。model就是对这些数据的抽象,不论数据采取何种存储形式,应用程序总是能够通过model来对数据进行操作,而不必关心数据的存储形式。数据实体类就是常用的一种model。例如,一个客户管理应用程序使用数据库来存储客户数据,数据库表中有一个客户表customer,相应的程序中一般会建立一个数据实体类customer来与之对应,这个实体类即使客户表的model。

view是应用程序的界面。用户通过view来操作应用程序,完成与程序的交互。view提供了可视化的界面来显示model中定义的数据,用户通过view来操作数据,并将对model数据操作的结果返回给用户。在桌面应用程序中,view可能是一个或多个windows窗体。在web应用程序中,view是由一系列网页构成,在asp.net网站中即为.aspx页面。

controller 定义了程序的应用逻辑。用户通过view发送操作命令给controller,由controller按照程序设计的逻辑来更新model定义的数据,并将操作结果通过view返回给用户。

mvc的历史

mvc这一概念最早由美国教授trygve reenskaug于1979年提出。1988年mvc这一设计模式正式在《a cookbook for using the model-view-controller user interface paradigm in smalltalk -80》一书中提出。伴随着微软windows操作系统的迅速发展与普及,图形化用户界面应用程序逐渐成为主流,很多编程语言都出现了mvc框架,以方便开发人员使用该模式来设计应用程序。这些框架中大部分都是针对web应用程序。

.net web开发中mvc设计模式的实现

asp.net 1.x中使用了codebehind技术,彻底终结了传统asp程序开发的梦魇:程序逻辑与html界面元素混杂在一起。codebehind技术将代表程序界面(view)的.aspx文件与逻辑(controller)代码.vb/.cs文件的分离即是一种mvc式的设计。asp.net 2.0中又出现了codebeside技术,即一个.aspx文件可以有多个.vb/.cs文件,这又方便了界面与逻辑代码的进一步分离。

2008年3月微软发布了针对asp.net 3.5 的mvc框架 (preview 2 版本)。这是一个真正意义上的asp.net mvc框架。该框架可以说是对之前为开发人员所熟悉的基于web form的应用程序开发方式的"颠覆"。变化可谓"震撼":

1. 使用url routing技术:web程序的url不再是指向具体的物理页面.aspx,而是指向某个controller的某个方法。一个典型的mvc架构的程序,其url可能如下所示:

http://www.mysite.com/customer/index

使用该mvc架构的程序其url不必有文件扩展名。上面这个url中的customer即为controller的名字。而index是customer定义的一个方法名。

2. web程序的界面.aspx不再使用服务器端的form:

<asp: form runat="server"></form>

那么与服务器端的form相关的postback以及页面生命周期的事件也不存在了。

3. 页面中不再有view state。mvc下将不能使用view state来存储程序状态信息。

4. 不再提供依赖于服务器端form的服务器控件事件,开发人员熟悉的button_clicked事件在mvc下将不再需要。

net mvc示例

安装完 asp.net mvc preview 2后,vs2008中会添加一个新的项目模板"asp.net mvc web application", 如下图所示



    新建该项目后, vs2008自动生成项目的文件结构如下, mvc三个组成部分各有一个文件夹来存储各自的程序文件。

前面提到的url routing即在global.asax.cs中设置:

复制代码 代码如下:

public class globalapplication : system.web.httpapplication
    {
        public static void registerroutes(routecollection routes)
        {
            // 注意: iis7以下的iis版本需将url格式设置为 "{controller}.mvc/{action}/{id}" to enable           

            routes.add(new route("{controller}.mvc/{action}/{id}", new mvcroutehandler())
            {
                defaults = new routevaluedictionary(new { action = "index", id = "" }),
            });//设置url routing格式

            routes.add(new route("default.aspx", new mvcroutehandler())
            {
                defaults = new routevaluedictionary(new { controller = "customer", action = "index", id = "" }),
            });//设置默认url指向customer controller的index方法
        }

        protected void application_start(object sender, eventargs e)
        {
            registerroutes(routetable.routes);
        }
}

【代码1】:global.asax.cs

下面来实现customer 的model、controller及view:

model: 在项目中的model文件夹下,新建一个"linq to sql classes",将northwind数据库中的customer表拖拽到其设计视图中。这样就完成了customer对应的model。如图4

controller: 在项目中的controller文件夹下,新建一个"mvc controller class",命名为customercontoller.cs。 在此类中添加一个公有方法index,此方法及为在global.asax.cs中设置好的默认url所映射的方法。

复制代码 代码如下:
   
 public class customercontroller : controller
      {
        public void index(string id)
        {
            northwind.models.northwinddatacontext dc = new northwind.models.northwinddatacontext();
            ilist<northwind.models.customer> customers = dc.customers.take(10).tolist();//取数据库中的10个customer记录
            renderview("index", customers);//返回index view
        }
}

   
    【代码2】:customercontroller.cs

    view: 上面index方法的代码表示customercontoller的index方法执行后,需要返回一个名称为index的view,以便将数据呈现给用户。下面来添加这个index view:在项目的view文件中,新建一个子文件夹customer。与customer controller有关的view将保存在此文件夹下。新建一个"mvc view class"并命名为index.aspx。在前面的renderview("index", customers)方法中,customers参数是controller传递给view所需的数据,该参数的类型为ilist<northwind.models.customer>。为了在view中方便使用此强类型的数据,view.aspx.cs使用了如下代码:注意粗体部分

复制代码 代码如下:
 
public partial class index : viewpage<ilist<northwind.models.customer>>
    {
}

   
【代码3】:index.aspx.cs

    view.aspx代码如下:viewdata这一成员变量的类型及为上面提到的ilist<northwind.models.customer>类型。

   

复制代码 代码如下:

<%@ page language="c#" autoeventwireup="true" codebehind="edit.aspx.cs" inherits="northwind.views.customer.edit" %>
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title></title>
</head>
<body>
    <div>
        <table>
            <tr>
<td>edit</td>           
            <td>customer id </td>
            <td>company name </td>
            <td>contact name </td>
            <td>contact title </td>
           </tr>  
            <% foreach (northwind.models.customer customer in viewdata)
               {%>
               <tr>
                  <td><a href="customer.mvc/edit/<%= customer.customerid %>">edit</a></td><!—url指向customer contoller的edit方法 -->
                  <td></td>
                  <td>  <%= customer.customerid %></td>
                  <td> <%= customer.companyname  %></td>
                  <td> <%= customer.contactname  %></td>
                  <td><%= customer.contacttitle  %></td>

               </tr>
               <%} %>
        </table>
    </div>
</body>
</html>

 

 

 

    【代码4】:index.aspx

    下面来实现customer controller的edit方法。在customercontroller.cs中添加如下代码:

复制代码 代码如下:
    
public void edit(string id)
{
            northwind.models.northwinddatacontext dc = new northwind.models.northwinddatacontext();
            customer c = dc.customers.single(cus => cus.customerid == id);//从数据库中取出参数id所对应的的一个customer记录

            renderview("edit", c);//返回edit view
 


    【代码5】:customercontroller.cs中的edit方法

    相应的在项目中的view/customer/文件夹下,添加edit view edit.aspx:

复制代码 代码如下:

public partial class edit : viewpage<northwind.models.customer>
{
}

   
    【代码6】:edit.aspx.cs

复制代码 代码如下:

<%@ page language="c#" autoeventwireup="true" codebehind="edit.aspx.cs" inherits="northwind.views.customer.edit" %>
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title></title>
</head>
<body>
<!—下面的 html form 将用户的输入提交到customer contoller的update方法 -->
<%using( html.form<northwind.controllers.customercontroller>(cc=>cc.update(viewdata.customerid))){ %>
    <div>
       customer id: <%= viewdata.customerid  %> <br />
       company nmae: <%= html.textbox("customer.companyname", viewdata.companyname) %> <br />
       contact name: <%= html.textbox("customer.contactname",viewdata.contactname) %><br />
       contact title: <%= html.textbox("customer.contacttitle",viewdata.contacttitle) %>
    </div>
    <%= html.submitbutton("save") %>
    <%} %>
</body>
</html>

   
【代码7】:edit.aspx

    代码7中使用了mvc框架中的一个帮助类html。此类可以生产view中常用的界面元素,例如 html form,文本输入框等。

    下面来实现customercontroller的update方法:

复制代码 代码如下:
     
public void update(string id)
        {
            northwind.models.northwinddatacontext dc = new northwinddatacontext();
       //从数据库中取出参数id所对应的的一个customer记录:
            customer cust = dc.customers.single(c => c.customerid == id);
      //将edit view中的用户的更改赋值到cust对象:
            bindinghelperextensions.updatefrom(cust, request.form);
            dc.submitchanges();
            redirecttoaction("index");//跳转到index view
        }
 


    【代码8】:customercontroller.cs中的update方法

    上面的代码通过asp.net mvc框架实现了customer的列表、编辑及更新功能,可以看出mvc将应用程序的model、view及controller三部分"优雅的"分离,真正实现了高内聚、低耦合的灵活架构,大大降低了程序的复杂性,提高了可扩展性及可重用性。这一框架对web开发带来的影响不仅是是技术上的变化,更是web程序设计思想的变化 -- web程序不再是一些列功能页面的集合,而是又controller控制的功能单元的集合,web程序更像是一组通过其url对外开放的"api"。

如对本文有疑问,请在下面进行留言讨论,广大热心网友会与你互动!! 点击进行留言回复

相关文章:

验证码:
移动技术网