MVC 5 的实际示例

Rupesh Kahane

4.33/5 (4投票s)

2015 年 12 月 5 日

CPOL

4分钟阅读

31734

在本文中，我们将讨论 MVC 5 的一些基础知识和真实生活示例。

引言

在本文中，我们将讨论一些基础知识并了解 MVC 5 的真实生活示例。

背景

什么是 MVC？

MVC 是一种架构模式，它将应用程序的逻辑、UI 和数据库连接分开。它分为三个主要部分：“模型”、“视图”和“控制器”。

“视图”负责我们应用程序的外观和感觉。
“模型”代表真实世界的对象，并向“视图”提供数据（如果我们需要从数据库获取数据，则可以从数据库获取数据）。
“控制器”负责处理最终用户的请求并加载合适的“模型”和“视图”。

下图展示了 MVC 模式的内部工作原理。

每次，第一个请求都进入控制器。
控制器决定要执行哪个操作，该操作直接转到视图，或者通过模型转到视图，同时从数据库获取数据。

MVC 5 的实际示例

假设有一家餐厅，餐厅里有几个人在工作，如下所示：

这个人向合适的厨师发出订单，以便做好订单。

这个人是厨房里的烹饪专家。
这个人（经理）从顾客那里点餐，并将订单写在一张小纸条上，上面标有合适的桌号，例如 1。
现在，一些顾客来到这家餐厅，那个要点餐的人给顾客展示了这家餐厅的菜单。
顾客看到了这张菜单。例如，顾客看到了 Poha、Upma、Dosa 等菜肴。然后顾客想点 Poha 或 Dosa，他可以想象 Poha 或 Dosa 看起来是什么样子。
从顾客那里点完餐后，那个人（经理）将这张小纸条交给坐在厨房外面的人。坐在厨房外面的人就像 MVC 中的控制器一样，意味着每个订单都由这个控制器处理。
厨师看到订单并尝试准备食物，如果他需要一些额外的食材来制作食物，例如做 Dosa，他需要用椰子做 1 份 चट尼，然后厨师会去冰箱拿椰子，并通过添加水、糖等来制作 चट尼。在这个场景中，厨师正在从数据库获取数据，这意味着厨师就像 MVC 中的模型一样。
过了一会儿，顾客的订单就准备好了。现在，坐在厨房外面的人打电话给服务员，让他把订单送到已经从 1 号桌点餐的顾客那里。
现在服务员会添加一些配料来使食物看起来更美味，例如他会添加一些...
现在顾客的订单可以吃了。这才是 MVC 中的实际视图。服务员负责制作装饰性的视图。

Using the Code

创建 MVC 5 项目的一些步骤

步骤 1

在 Visual Studio 2013 中创建一个项目。
添加一个控制器。

第二步

在我们的项目中添加一个名为MyOrder的模型，并添加一些属性，如下所示：

       public int QtyPoha { get; set; }
       public int QtyUpma { get; set; }
       public int QtyDosa { get; set; }

步骤 3

通过右键单击操作方法，在我们的项目中添加一个视图。

步骤 4

现在将模型添加到我们的视图中，并添加一些输入文本框来获取用户输入，如下所示：

@model MvcApplication1.Models.MyOrder
@{
    Layout = null;
}
 
<!DOCTYPE html>
 
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>GetCustomerOrder</title>
</head>
<body>
    <div>
        @using (Html.BeginForm("Test", "Hotel", FormMethod.Post))
        {
            @Html.Label("Enter Poha Qty")
          
            @Html.EditorFor(m => m.QtyPoha, new { style = "width: 650px" })
            <br />
            @Html.Label("Enter Upma Qty")
           
            @Html.EditorFor(m => m.QtyUpma, new { style = "width: 650px" })
            <br />
            @Html.Label("Enter Dosa Qty")
           
            @Html.EditorFor(m => m.QtyDosa, new { style = "width: 650px" })
            <br />
            <input type="submit" id="submit" />
            <br />
            @*@Html.Label("My Poha Qty : ")*@
            @ViewBag.QtyP
        }
    </div>
</body>
</html>

步骤 5

现在向我们的控制器添加操作方法，如下所示：

[HttpPost]
        public ActionResult Test(MyOrder m)
        {
            if (ModelState.IsValid)
            {
                int QtyPoha = m.QtyPoha;
                ViewBag.QtyP = QtyPoha;
                int QtyUpma = m.QtyUpma;
                ViewBag.QtyU = QtyUpma;
                if (m.QtyDosa != null)
                {
                    return RedirectToAction("TakeExtraMaterial", "TakeValuesFromDb");
                }
            }
            else if(m.QtyPoha >0 && m.QtyUpma> 0)
            {
                return RedirectToAction("ViewForSnacs");
            }
            return View("GetCustomerOrder");
        }
 
        public ActionResult ViewForSnacs()
        {
            return PartialView("ViewForSnacs");
         
        }

步骤 6

现在，为了理解模型如何从数据库获取数据，我创建了一个示例数据库和一张表，并在其中添加了一些虚拟数据。

Create Table DataFromFridge
(
Potatos varchar(100),
Onion varchar(100),
CoconutCream varchar(100),
ChatMasala varchar(100)
)
Insert Into DataFromFridge values('50gram','20gram','5Spoon','5gram')

步骤 7

现在创建另一个控制器来处理数据库连接。首先，添加一些命名空间来获取数据库连接。

using System.Configuration;
using System.Data.SqlClient;
using System.Data;

public class TakeValuesFromDbController : Controller
    {
        public ActionResult TakeExtraMaterial()
        {
            int i;
            SqlConnection con = new SqlConnection(); 
            con.ConnectionString = "Data Source=Rupesh-PC\\SA;
            Initial Catalog=My_Hotel;Integrated Security=True"; 
            con.Open();            
            SqlCommand cmd = new SqlCommand("select * from DataFromFridge", con); 
            SqlDataAdapter da = new SqlDataAdapter(cmd); 
            DataTable dt = new DataTable(); 
            da.Fill(dt); 
            if (dt.Rows.Count > 0) 
            {
               i = dt.Rows.Count;
            } 
            else 
            {
                i = 0;
            }
            ViewBag.DbValue = i;
            return PartialView("OrderIsReady",ViewBag.DbValue);
        }
    }

步骤 8

现在，在我们的项目中添加一个名为 Images 的文件夹，这将帮助我们在 UI 部分（即部分视图）上显示图像。

在此文件夹中添加一些图片。

步骤 9

现在创建部分视图来显示输出。在这些部分视图中添加图片 URL。

用于OrderIsReady的部分视图，并添加一些代码，如下所示：

<img src= "@Url.Content("~/Images/Dosa1.jpg")" 
alt="IMAGES"  height="600px" width="800"/>
<br />
<br />
<p style="font-size:35px; color: blue">Db values contains: @ViewBag.DbValue </p>

用于ViewForSnacs的部分视图，并添加一些代码，如下所示：

<img src= "@Url.Content("~/Images/Pohe.jpg")" 
alt="IMAGES"  height="300px" width="600"/>

<br /><br /><br />

<img src= "@Url.Content("~/Images/Upma.jpg")" alt="IMAGES"  
height="300px" width="600"/>