在7天-第1天逐步学习MVC(模型视图控制器)

MVC 2非常古老，本文是在很久以前编写的。我们建议你从这里开始阅读我们最新的学习MVC 5系列:-  http://www.codeproject.com/articles/866143/learn - mvc-步步逐日。

内容

• 关于作者
• 那么，议程是什么?
• MVC vs Webforms vs ASP。网络词汇
• 那么为什么MVC比Webforms更好呢?
• MVC存在的先决条件
• 实验1:创建一个简单的Hello World ASP。净MVC应用程序 步骤1:-选择项目模板。NET One选项第3步:-添加控制器第4步:-添加视图第5步:-连接视图到控制器第6步:-运行程序小心这个常见错误那么下一个实验室是什么?
• 实验2:在控制器和视图之间传递数据 实验2的视频演示步骤1:创建项目和设置视图数据步骤2:在视图中显示视图数据那么下一个实验是什么?
• 实验3:使用MVC创建一个简单的模型 实验3的视频演示步骤1:创建一个简单的类文件步骤2:用动作定义控制器步骤3:使用类创建强类型视图步骤4:运行你的应用程序那么下一个实验是什么?
• 实验4:创建一个简单的MVC数据输入屏幕 实验4的视频演示步骤1:创建你的数据入口ASPX页面步骤2:创建控制器步骤3:创建视图来显示客户对象步骤4:最后运行项目那么下一个实验是什么?
• 实验5:使用HTML Helper更快地创建视图 步骤1:创建Customer类步骤2:使用helper类创建输入HTML表单步骤3:使用Customer类创建强类型视图步骤4:创建控制器类
• 第二天有什么安排?
• 进一步阅读MVC

关于作者

简单介绍一下作者的观点。Shivprasad Koirala和Sukesh Marla都是专业的MVC培训师，你可以在每周六和周日在孟买的Andheri找到他们，他们每周都在那里教授MVC

你可以访问MVC网站或他们的视频学习网站，即www.questpond.com和线下培训联系他们在这里http://stepbystepschools.net/?page_id = 137。

那么，议程是什么?

正如文章名称所说，学习MVC;所以议程很简单，我们将学习ASP。NET MVC在7天。

第一天，我们将从一个简单的Hello World开始，在控制器和视图之间传递数据，HTML helper类，MVC模型，我们还将创建一个简单的客户数据输入页面。

,

MVC vs Webforms vs ASP。网络词汇

许多开发人员认为ASP。NET和MVC是不同的。但实际上它们是一样的。

ASP。NET是Microsoft的web框架，MVC是visual studio的代码模板，使用MVC架构风格编写代码。旧ASP的正确名称。网络是“ASP。净webforms”。所以ASP。NET webform是旧的ASP。NET背后的代码和MVC是新事物。但它们都使用ASP。净框架。

让我们直接用ASP。NET是一个框架，而MVC和Webform是编码风格。MVC是新的东西，而WebForm是你的旧代码背后的风格。

那么为什么MVC比Webforms更好呢?

作为一个ASP。你会错过很多你最喜欢的MVC。在MVC中没有后台代码，没有rad服务器控件，没有视图状态，没有ASP,NET页面生命周期等等。所以在最初的阶段，你会很难相信MVC比Webforms更好。所以我的建议是浏览一下这段30分钟的视频来理解为什么MVC比Webform更突出。

MVC存在的先决条件

在开始这一天之前，让我们确保您拥有创建MVC应用程序所需的所有元素。MVC有很多版本，MVC 2, MVC 3, MVC 4和MVC 5。因此，根据您使用的版本，您需要适当的visual studio版本。

• 如果你正在使用MVC 5，你需要VS 2013，你可以从http://www.visualstudio.com/en-us/products/visual-studioexpress-vs.aspx 
• 如果你正在使用MVC 3和4，你需要VS 2012. http://www.microsoft.com/en-us/download/details.aspx?id=34673
• 对于MVC 2，你需要VS 2010  2008也可以。

因此，一旦您具备了所有的先决条件，就可以开始第一个实验了。

实验1:创建一个简单的Hello World ASP。净MVC应用程序

在本实验室中，我们将使用MVC模板创建一个简单的Hello World程序。我们将创建一个简单的控制器，将控制器附加到一个简单的索引。aspx页面，并在浏览器上查看显示。

你也可以观看下面的MVC 5视频，它展示了如何在MVC 5中显示一个简单的“HelloWorld”。

步骤1:-选择项目模板

打开Visual studio 2013，点击file ->新项目。展开visualc#节点，单击Web，然后单击ASP。WEB应用程序模板，给出名称和文件夹路径并按ok。

步骤2:-选择适当的ASP。净一个选项

MVC 5最大的开发之一是ASP.NET。如果你在visual studio 2013之前，也就是VS 2012和以下版本中，选择了MVC或Webforms这样的编码模板，你就会坚持使用它。在VS 2012中你不能同时使用它们。因此，如果你用MVC编码风格开始一个项目，你不能使用webforms，反之亦然，如果你用webforms开始，你不能使用MVC。

如果你好奇VS 2012的结构，你可以在VS 2013中通过点击IDE中的“Visual studio 2012”菜单看到相同的结构。你可以看到我们有不同的模板，如MVC, WebApplication等。一旦你开始使用MVC，你就会被它困住，或者一旦你开始使用Webforms，你就会被困住。

如果你看到逻辑上的WebForm MVC和WebAPI使用ASP。净框架内部。所以使用不同的模板会给开发人员带来很多困惑。许多开发人员已经开始考虑ASP。NET不同于MVC。NET和MVC混淆。

所以在VS 2013中，他们把所有的模板合并到一个ASP中。即净模板。“ASP。你也可以获得同样的经验，无论是作为一个webform开发人员或MVC开发人员。因此，如果你开始使用MVC，你仍然有选项创建一个视图使用Webform ASPX视图。

当你点击"ASP。您将看到一个保护伞下的所有模板，如下所示。

所以做以下操作:-

步骤1:-选择MVC模板和MVC复选框。如果选择MVC模板，复选框很可能会被禁用。

第二步:-点击“更改身份验证”，将其设置为“无身份验证”。因为这是我们的第一个MVC项目，所以我们不希望涉及到身份验证和授权。在第三天，我们将更详细地介绍身份验证。

MVC的好处之一是“单元”测试。因为你没有背后的代码和控制器变成了简单的类，你可以很容易地单元测试控制器。但是现在我们将保持这个选项未被选中，因为我们的主要目的是显示hello world。

让我们花点时间来理解创建的解决方案。首先你会注意到创建了很多文件夹，见下图。

这些文件夹中最重要的是“视图”、“模型”和“控制器”文件夹。MVC体系结构分为模型、视图和控制器三个部分。

第一次命中控制器，他创建模型和视图对象，并向最终用户发送最终响应。

文件夹名称描述在这个文件夹中，你将添加MVC视图，可以是HTML, Razor或Webform页面。您将在此文件夹中添加模型类。模型是简单的。net类，它提供数据，可能还包含验证。在这个文件夹中，你会添加Customer类，Supplier类等等。在此文件夹中，您将添加控制器，并且控制器可以有动作。这个家伙负责从最终用户那里获取请求，调用适当的操作，创建模型对象，然后将视图和模型绑定在一起，以发送结果作为响应。其他文件夹在这里添加javascript文件。默认情况下，你会发现Jquery和angular javascript文件，因为它们包含在visual studio中。在MVC应用程序开始运行之前，它需要激活和初始化很多对象。例如布线、捆绑和小型化元件等。此时您不需要担心这个文件夹，我们将在稍后讨论每个对象。例如在MVC的第2天解释路由，第5天解释捆绑等等。所以放松，现在不要想这个文件夹。此文件夹具有CSS(层叠样式表)，它为您的项目提供了统一的外观和感觉。app_data用于基于文件的数据存储。通常开发人员使用RDBMS，如SQL Server, oracle等，但有时人们使用XML, txt文件来存储数据。这个文件夹是在文件中存储数据时创建的。字体如果你在你的web应用中使用字体你可以把它们放在这里。

步骤3:-添加控制器

下一步是添加控制器。转到controllers文件夹，右键单击并单击controller菜单，如下图所示。

下一个出现的屏幕是选择“脚手架”模板。搭建是一种MVC模板帮助自动生成CRUD代码的技术。CRUD代表创建、读取、更新和删除。

但是现在我们正在学习MVC，所以选择搭建或者现成的代码并不是一个好的选择。因此选择MVC 5控制器空选项，如下图所示。

给控制器起一个名字，比如“FirstMVCController”。但不要删除字控制器。“Controller”在最后是一种必要的东西。所以不要删除这个词。

一旦控制器类被创建，如下图所示。向它添加一个动作“SayHello”，如下图所示。一个控制器可以有多个动作。一个"Home"控制器可以有像"GotoHome" "GotoIndex"这样的动作。

隐藏,复制代码

public class FirstMVCController : Controller
    {
        //
        // GET: /FirstMVC/
        public ActionResult SayHello()
        {
            return View();
        }
	}

步骤4:-添加视图

我们已经创建了控制器和动作。但当最终用户请求的是控制器和动作时，我们需要调用一个视图。现在，我们将不讨论模型，以保持这个“HelloWord”MVC示例简单。

现在在你的文件夹部分，你应该看到一个用控制器的名字创建的文件夹。“FirstMVC”如下所示。

右键单击“FirstMVC”文件夹并添加一个视图。

给模板起一个漂亮的名字，现在不要选择任何类型的模板，因为我们想让它保持简单，所以选择“Empty (without outmodel)”。

View是一个简单的Razor HTML页面。在正文中，只需键入类似于我们在下面的代码中所做的内容。

隐藏,复制代码

<body>

这是我的第一个MVC程序。

& lt; / body>

第5步:-连接视图到控制器

创建了视图和控制器。现在是时候连接视图和控制器了。所以在视图的“SayHello”操作中，键入你的视图名，如下面的代码所示。

隐藏,复制代码

public ActionResult SayHello()
{
            return View("HelloView");
}

步骤6:-运行程序

一旦你设置好了它的时间来享受你的第一个程序的输出。按Control键+ F5并在本地主机端口后输入下面的URL。URL应该键入的方式如下:-

Localhost: portnumer / ControllerName / ActionName

请注意，如下图所示，输入的控制器名称不能使用controller这个词。

现在放松30秒，享受你的第一个节目。祝贺你能来到这里。

要注意这个常见的错误

如果您遇到以下常见错误，不要惊慌，您需要检查更多的东西。

首先让我们试着理解这个错误说的是什么。这个错误是说这个观点。“HelloView”视图应该在共享文件夹或在控制器名称文件夹中。例如，在我们的例子中，控制器的名字是“FirstMVC”，所以要么你移动你的视图到“FirstMVC”文件夹，要么你移动它到“shared”文件夹，如下图所示。

下一个实验室里有什么?

现在我们已经创建了一个简单的MVC Hello World，现在可以看看如何将数据从控制器传递到视图。首先是控制器，它将加载您的业务对象或模型，您需要将这些对象传输到视图以显示它们。

实验2:在控制器和视图之间传递数据

控制器获得第一次命中并加载模型。大多数时候，为了显示的目的，我们希望将模型传递给视图。作为一个ASP。你的选择是使用会话变量，视图状态，或其他一些ASP。网络会话管理对象。

使用ASP的问题。NET会话或视图状态对象是范围。ASP。NET会话对象具有会话作用域，而视图状态具有页作用域。对于MVC，我们希望将范围限制在控制器和视图。换句话说，我们希望在命中到达控制器并到达视图时维护数据，在此之后数据的作用域应该过期。

这就是在ASP中引入新的会话管理技术的地方。NET MVC框架，即。,可视数据。

实验二的视频演示

下面是一个简单的YouTube视频，演示了视图数据的实验室。本视频中，我们将看到如何使用视图数据在控制器和视图之间共享数据。因此我们将创建一个简单的控制器，在视图数据变量中记录当前数据，然后使用百分比标记在视图中显示相同的数据:http://youtu.be/Fu9v2MIDlTA?hd=1。

步骤1:创建项目并设置视图数据

第一步是创建一个项目和一个控制器。在控制器中，设置如下面的代码片段所示的viewdata变量，并启动视图。

隐藏,复制代码

public class DisplayTimeController : Controller
{
    //
    // GET: /DisplayTime/

    public ActionResult Index()
    {
        ViewData["CurrentTime"] = DateTime.Now.ToString();
        return View();
    }
}

步骤2:在视图中显示视图数据

下一件事是使用百分比标记在视图中显示数据。需要注意的重要一点是，视图没有代码延迟。因此，要显示视图，我们需要在ASPX页面中使用<%:标记，如下面的代码片段所示。

隐藏,复制代码

<body>
<div>
<%: ViewData["CurrentTime"] %>
</div>
</body>

下一个实验室里有什么?

现在我们知道了如何使用视图数据传递数据，接下来的实验是创建一个简单的模型，并查看所有的三个MVC实体(即。(例如模型、视图和控制器)。

实验3:使用MVC创建一个简单的模型

在这个实验室中，我们将创建一个简单的客户模型，在其中添加一些数据，并将其显示在视图中。

实验3的视频演示

下面是一个视频演示:http://youtu.be/0-UdqWy9lVc?hd=1。

步骤1:创建一个简单的类文件

第一步是创建一个简单的客户模型，它只是一个具有三个属性的类:代码、名称和数量。创建一个简单的MVC项目，右键单击model文件夹，然后单击Add New Item，如下图所示。

从模板中选择一个简单的类并将其命名为Customer。

创建具有三个属性的类，如下面的代码片段所示。

隐藏,缩小,复制代码

public class Customer
{
    private string _Code;
    private int _Id;
    private double _Amount;

    public string CustomerCode
    {
        set
        {
            _Code = value;
        }
        get
        {
            return _Code;
        }
    }

    public int Id
    {
        get
        {
            return _Id;
        }
        set
        {
            _Id= value;
        }
    }

    public double Amount
    {
        set
        {
            _Amount = value;
        }
        get 
        {
            return _Amount;
        }
    }
}

步骤2:用动作定义控制器

下一步是添加控制器并创建一个简单的操作display customer，如下面的代码片段所示。在控制器类中导入模型名称空间。在操作中，我们创建了customer类的一个对象，使用一些数据，并将其传递给名为“DisplayCustomer”的视图。

隐藏,复制代码

public class CustomerController : Controller
{
    …..
    ….
    public ViewResult DisplayCustomer()
    {
        Customer objCustomer = new Customer();
        objCustomer.Id = 12;
        objCustomer.CustomerCode = "1001";
        objCustomer.Amount = 90.34;

        return View("DisplayCustomer",objCustomer);
    }
}

步骤3:使用类创建强类型视图

现在我们需要通过创建视图来连接MVC的各个点。右击视图文件夹，然后点击添加视图。您应该会看到如下图所示的下拉列表。给出一个视图名称，检查创建一个强类型视图，并使用下拉菜单将该视图绑定到customer类，如下图所示。 注意:-如果你不能在下拉列表中看到模型，请编译你的项目一次。

创建强类型视图的好处是您现在可以通过键入model和“来获得视图中类的属性。，如下图所示。

下面是显示客户属性值的视图代码。我们还设置了一个if条件，如果客户超过100，则显示为特权客户;如果低于100，则显示为普通客户。

隐藏,复制代码

<body>
<div>
The customer id is <%= Model.Id %> <br/>

The customer Code is <%= Model.CustomerCode %> <br/>

<% if (Model.Amount > 100) {%>
This is a priveleged customer
<% } else{ %>
This is a normal customer
<%} %>

</div>
</body>

步骤4:运行应用程序

现在，按下Ctrl + F5，为又一次成功的实验而自豪。

下一个实验室里有什么?

在这个示例中，我们从控制器内部展开了customer对象。在下一个实验室中，我们将从一个输入视图中获取数据并显示它。换句话说，我们将看到如何创建用于从视图接收数据的数据输入屏幕。

实验4:创建一个简单的MVC数据输入屏幕

每个项目无论大小都需要数据输入屏幕。在这个实验室中，我们将使用MVC模板创建一个简单的客户数据输入屏幕，如下图所示。

一旦最终用户输入详细信息并提交数据，它就会重定向到如下所示的屏幕。如果输入的金额小于100，则显示普通客户，否则显示特权客户。

实验4的视频演示

下面是这个实验室的一个简单视频演示:http://youtu.be/1dlxtHuRw34?hd=1。

步骤1:创建ASPX页面的数据条目

第一步是使用简单的HTML表单操作标记创建数据输入页面，如下面的代码片段所示。在下面的代码片段中需要注意的最重要的一点是操作指向控制器操作，即。“DisplayCustomer”。

隐藏,复制代码

<formaction="DisplayCustomer"method="post">
Enter customer id :- <inputtype="text"name="Id"/> <br/>
Enter customer code :- <inputtype="text"name="CustomerCode"/><br/>
Enter customer Amount :-<inputtype="text"name="Amount"/><br/>
<inputtype="submit"value="Submit customer data"/>
</form>

步骤2:创建控制器

上面定义的表单操作将发布到控制器类和“DisplayCustomer”函数上。因此，我们需要从HTML控件中获取数据，显示对象，并将对象发送到视图。

下面是DisplayCustomer的代码片段，它通过从请求中收集数据来修饰customer对象。表单并将对象发送到视图DisplayCustomer。

隐藏,复制代码

public class CustomerController : Controller
{
    …..
    ….
    [HttpPost]
    public ViewResult DisplayCustomer()
    {
        Customer objCustomer = new Customer();
        objCustomer.Id = Convert.ToInt16(Request.Form["Id"].ToString());
        objCustomer.CustomerCode = Request.Form["Id"].ToString();
        objCustomer.Amount = Convert.ToDouble(Request.Form["Amount"].ToString()); ;
        return View("DisplayCustomer", objCustomer);
    }
}

步骤3:创建视图来显示customer对象

下一步是创建“DisplayCustomer”视图。右击视图文件夹，然后点击添加视图。您应该会看到如下图所示的下拉列表。给出一个视图名称，检查创建一个强类型视图，并使用下拉菜单将该视图绑定到customer类，如下图所示。

创建强类型视图的好处是您现在可以通过键入model和“来获得视图中类的属性。，如下图所示。

下面是显示客户属性值的视图代码。我们还设置了一个if条件，如果客户超过100，则显示为特权客户;如果低于100，则显示为普通客户。

隐藏,复制代码

<body>
<div>
The customer id is <%= Model.Id %> <br/>

The customer Code is <%= Model.CustomerCode %> <br/>

<% if (Model.Amount > 100) {%>
This is a priveleged customer
<% } else{ %>
This is a normal customer
<%} %>

</div>
</body>

步骤4:最后运行项目

最后一步是运行项目并查看输出。

您还应该能够测试100以上和100以下的场景。

下一个实验室里有什么?

在这个实验室中，我们创建了一个简单的数据输入屏幕，它帮助我们丰富客户对象。然后将这个客户对象传递给视图以显示。如果你仔细观察现在的实验室，我们已经做了很多编码工作。，创建HTML屏幕，繁荣对象，等等。如果能实现某种自动化就好了。在下一个实验室中，我们将看到HTML helper类如何帮助最小化这些手工编码，从而提高工作效率。

实验5:使用HTMLHelper更快地创建视图

在之前的实验室中，我们创建了一个简单的客户数据输入屏幕。我们成功地完成了实验室，但有两个大问题:

隐藏,复制代码

<formaction="DisplayCustomer"method="post">
Enter customer id :- <inputtype="text"name="Id"/> <br/>
Enter customer code :- <inputtype="text"name="CustomerCode"/><br/>
Enter customer Amount :-<inputtype="text"name="Amount"/><br/>
<inputtype="submit"value="Submit customer data"/>
</form>

public class CustomerController : Controller
{
    …..
    ….
    [HttpPost]
    public ViewResult DisplayCustomer()
    {
        Customer objCustomer = new Customer();
        objCustomer.Id = Convert.ToInt16(Request.Form["Id"].ToString());
        objCustomer.CustomerCode = Request.Form["Id"].ToString();
        objCustomer.Amount = Convert.ToDouble(Request.Form["Amount"].ToString()); ;
        return View("DisplayCustomer", objCustomer);
    }
}

• 完整的HTML代码是手工编写的。换句话说，它的效率较低。这就像是回到了开发人员在记事本中编写HTML标签的黑暗时代。
• 除此之外，控制器中还编写了大量手动代码，以丰富对象并将数据发送到MVC视图。

在这个实验中，我们将看到如何使用MVC HTMLHelper类来最小化手工编码并提高工作效率。

步骤1:创建Customer类

创建一个简单的客户类，请参阅实验5以了解详细信息。

步骤2:使用helper类创建输入HTML表单

HTML helper类有现成的函数，您可以通过这些函数轻松创建HTML控件。转到任何MVC视图并查看HTMLHelper类的intellisense，您应该会看到如下图所示的内容。

通过使用HTMLHelper类，你可以创建任何HTML控件，如文本框，标签，列表框等，只要调用适当的函数。

为了创建HTML的表单标签，我们需要使用" HTML . beginform "。如下所示的代码片段:

隐藏,复制代码

<% using (Html.BeginForm("DisplayCustomer","Customer",FormMethod.Post)) 
{%>
-- HTML input fields will go here 
<%} %>

以上代码将生成以下HTML:

隐藏,复制代码

<formaction="DisplayCustomer"method="post">
…..
…..
</form>

HTML helper“beginform”接受三个输入参数:动作名称(控制器内部的方法)、控制器名称(实际的控制器名称)和HTTP发布方法(POST或GET)。

如果您想创建一个文本框，只需使用HTMLHelper类的" TextBox "函数，如下面的代码所示。这样就可以使用HTMLHelper类函数创建HTML控件。

隐藏,复制代码

Enter customer id :- <%= Html.TextBox("Id",Model)%> <br/>

以上代码片段将生成以下HTML代码:

隐藏,复制代码

Enter customer id :- <inputtype="text"name="Id"/> <br/>

要创建如下所示的数据输入屏幕，我们需要使用下面的代码片段。

隐藏,复制代码

<% using (Html.BeginForm("DisplayCustomer","Customer",FormMethod.Post))
{ %>
Enter customer id :- <%= Html.TextBox("Id",Model)%> <br/>
Enter customer code :- <%= Html.TextBox("CustomerCode",Model) %><br/>
Enter customer Amount :- <%= Html.TextBox("Amount",Model) %><br/>
<inputtype="submit"value="Submit customer data"/>
<%} %>

步骤3:使用customer类创建强类型视图

使用HTMLHelper类创建视图之后就该将customer类附加到视图中了;详情请参阅实验五。

步骤4:创建控制器类

最后是控制器代码。控制器代码现在变得非常简单。由于使用了HTML Helper类，customer对象将自动生成。您将创建控制器类，就像我们在实验室4中所做的那样，但是我们不需要编写任何类型的代码来连接HTML屏幕和控制器，它都是隐藏的和自动的。

隐藏,复制代码

[HttpPost]
public ActionResult DisplayCustomer(Customer obj)
{
    return View(obj);
}

享受您的输出为不同条件的客户数量输入。

所以，为完成MVC实验室的第一天，干杯吧。

第二天有什么安排?

在第二节中，我们将讨论URL路由、简化MVC单元测试、MVC控制器属性等等。与第一天相比，下一个实验室将会更先进一些。下面是第二天的链接:点击这里查看第二天的MVC。

进一步阅读MVC

下面是进一步的链接，您可以探索了解MVC

• 你可以从这个40分钟的YouTube视频开始:http://www.youtube.com/watch?这将直接引导您在MVC中创建一个简单的hello world。我觉得这是开始学习MVC的最好方式。
• 很多第一次接触MVC的人都对MVC和Webforms感到困惑，建议你阅读Sukesh的MVC文章http://www.codeproject.com/Articles/528117/WebForms-vs-MVC
• 如果你有一些紧急的MVC面试，这里有100个MVC面试问题和答案http://www.codeproject.com/Articles/556995/MVC-interview-questions-with-answers

从MVC 5开始

如果你想开始与MVC 5开始与下面的视频学习MVC 5在2天。

本文转载于：http://www.diyabc.com/frontweb/news16612.html本文转载于：http://www.diyabc.com/frontweb/news16868.html本文转载于：http://www.diyabc.com/frontweb/news16888.html