MVC简介

MVC全名是Model View Controller，是模型(model)－视图(view)－控制器(controller)的缩写，一种软件设计典范，用一种业务逻辑、数据、界面显示分离的方法组织代码，将业务逻辑聚集到一个部件里面，在改进和个性化定制界面及用户交互的同时，不需要重新编写业务逻辑。MVC被独特的发展起来用于映射传统的输入、处理和输出功能在一个逻辑的图形化用户界面的结构中。
示意图
在这里插入图片描述
Model（模型）是应用程序中用于处理应用程序数据逻辑的部分。通常模型对象负责在数据库中存取数据。

View（视图）是应用程序中处理数据显示的部分。通常视图是依据模型数据创建的。

Controller（控制器）是应用程序中处理用户交互的部分。通常控制器负责从视图读取数据，控制用户输入，并向模型发送数据。

MVC框架和三层架构

刚开始学习MVC的时候感觉MVC框架和三层架构是非常类似的，不明白两者之间有什么区别

三层架构中，三层分别是UI层表示用户界面，BLL层表示业务逻辑，DAL层表示数据访问；

而MVC中，View层是界面，Model层是业务逻辑，Controller层用来调度View层和Model层，将用户界面和业务逻辑合理的组织在一起，起粘合剂的效果。

从上面可以看出来MVC和三层其实还是有很大的区别的：

三层重视面向接口编程和各层之间的解耦和可替换性。

MVC要实现的是将软件用户界面和业务逻辑分离以使代码可扩展性、可复用性、可维护性、灵活性加强。

MVC中，View会提交数据给Model进行处理以实现具体行为，不会直接传给Model，而是通过Controller来转发。

三层架构中不存在Controller的概念，三层是一种非常明确的上下层关系，而MVC中的三者是一种合作协同的关系。

区分不开三层和MVC就很容易把业务逻辑放到Controller中，但实际上，Controller中的内容越少越好，Controller 的存在就是为了提高灵活性，不应该为其增加新的职责。

MVC是不是设计模式？

GoF (Gang of Four，四人组，《Design Patterns: Elements of Reusable Object-Oriented Software》/《设计模式》一书的作者：Erich Gamma、Richard Helm、Ralph Johnson、John Vlissides)并没有把MVC提及为一种设计模式，而是把它当做“一组用于构建用户界面的类集合”。在他们看来，它其实是其它三个经典的设计模式的演变：观察者模式(Observer)(Pub/Sub), 策略模式(Strategy)和组合模式(Composite)。根据MVC在框架中的实现不同可能还会用到工厂模式(Factory)和装饰器(Decorator)模式。

从上面的资料来看，MVC糅合了三种设计模式甚至更多，却不是设计模式。MVC是设计模式的一种升华，它用到了设计模式的很多思想，

MVC具体实例

小例子-欢迎光临

第一步：新建项目，框架要选择 Franmework4.5以上，不然没有MVC选项。
在这里插入图片描述
第二步：选择空的模板，选择MVC

第三步：在解决方案中找到Controller文件夹，右键添加-添加控制器，命名为：HomeController

第四步：修改默认默认代码为：

运行效果如下：

将代码恢复默认状态，然后右击Index，添加视图
在这里插入图片描述
点击添加

将视图中的代码修改为，运行之后发现和之前的界面一致

接下来继续完善HomeController.cs

然后打开Index.cshtml，更改代码如下：

<body>
    <div>
        <h1>欢迎光临！</h1>
        <p>@ViewBag.SayHi</p>
        @Html.ActionLink("注册会员","REG")
    </div>
</body>

运行之后效果如下：
在这里插入图片描述

小例子2-注册

首先安装Bootstrap

点击工具-NuGet程序包管理器-管理器控制台-在控制台输入：

Install-Package -version 3.0.0 bootstrap

打开HomeController.cs,添加如下代码：

 [HttpGet]
        public ActionResult REG()
        {
            return View();
        }

右击REG，添加视图REG
在这里插入图片描述
添加如下代码

@model registerMVC.Models.User

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <meta charset="utf-8" />
    <link href="~/Content/bootstrap.min.css" rel="stylesheet">
    <script src="~/Scripts/jquery-1.9.0.min.js"></script>
    <script src="~/Scripts/bootstrap.min.js"></script>
    <style>
        body {
            padding-top: 50px;
            color: #FFF;
            background: #444;
        }

        div {
            margin: 5px auto;
        }

        h1 {
            color: #fff;
        }

        #content {
            width: 100%;
            min-height: 600px;
            background: #444;
            padding-top: 20px;
            color: #FFF;
        }

        .register {
            padding: 20px;
            font-weight: 700;
            border: #FFF solid 1px;
            -moz-border-radius: 10px; /* Gecko browsers */
            -webkit-border-radius: 10px; /* Webkit browsers */
            border-radius: 10px; /* W3C syntax */
        }

        .col-sm-3 {
            line-height: 48px;
        }
    </style>
</head>
<body>
    <div id="content">
        <div class="container">
            @using (Html.BeginForm())
            {
                <div class="row">
                    <h1 class="col-md-6 col-md-offset-3 col-xs-10 col-xs-offset-1 page_title ">注册</h1>
                </div>
                <div class="col-md-6 col-md-offset-3 col-xs-10 col-xs-offset-1 register">
                    <div class="alert alert-warning alert-dismissible" role="alert">
                        <button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                        <strong>@Html.ValidationSummary()</strong>
                    </div>
                    <div class="form-group">
                        <label for="username" class="col-sm-3 control-label">用户名：</label>
                        <div class="col-sm-8">
                            <div class="input-group">

                                @Html.TextBoxFor(x => x.Name, new { @class = "form-control", @placeholder = "请输入有效用户名" })
                                <div class="input-group-addon">
                                    <span class="glyphicon glyphicon-user"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="password" class="col-sm-3 control-label">密码：</label>
                        <div class="col-sm-8">
                            <div class="input-group">

                                @Html.PasswordFor(x => x.PassWord, new { @class = "form-control", @placeholder = "请输入有效密码" })
                                <div class="input-group-addon">
                                    <span class="glyphicon glyphicon-lock"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="chkpwd" class="col-sm-3 control-label">电话：</label>
                        <div class="col-sm-8">
                            <div class="input-group">

                                @Html.TextBoxFor(x => x.phone, new { @class = "form-control", @placeholder = "请输入有效电话" })
                                <div class="input-group-addon">
                                    <span class="glyphicon glyphicon-phone"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="email" class="col-sm-3 control-label">邮箱：</label>
                        <div class="col-sm-8">
                            <div class="input-group">

                                @Html.TextBoxFor(x => x.email, new { @class = "form-control", @placeholder = "请输入有效邮箱" })

                                <div class="input-group-addon">
                                    <span class="glyphicon glyphicon-envelope"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-3 col-md-offset-3 col-xs-12">
                        <button type="reset" class="btn btn-default btn-block">
                            <b>清空</b>
                            <span class="glyphicon glyphicon-remove"></span>
                        </button>
                    </div>
                    <div class="col-md-3 col-xs-12">
                        <button type="submit" class="btn btn-info btn-block">
                            <b>注册</b>
                            <span class="glyphicon glyphicon-arrow-right"></span>
                        </button>
                    </div>
                </div>
            }
        </div>
    </div>
</body>
</html>

在Models文件夹里添加User.cs类文件，添加如下代码：

 public class User
    {
        public int Id { get; set; }
        [Required(ErrorMessage = "请输入用户名。")]
        public string Name { get; set; }
        [Required(ErrorMessage = "请输入密码。")]

        public string PassWord { get; set; }
        [Required(ErrorMessage = "请输入电话。")]

        public string phone { get; set; }
        [Required(ErrorMessage = "请输入Email。")]
        [RegularExpression(".+\\@.+\\..+", ErrorMessage = "请输入正确的Email地址")]
        public string email { get; set; }
    }

运行之后，效果如下：
在这里插入图片描述
接下来，在HomeController.cs中添加如下代码：

[HttpPost]
        public ActionResult REG(User user)
        {
            if (ModelState.IsValid)
            {
                return View("Thank", user);
            }
            else
            {
                return View();
            }
        }

右击空白处添加Thank视图，继承模型视图。
在这里插入图片描述
打开Thank视图，添加如下代码：

@model registerMVC.Models.User

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Thank</title>
</head>
<body>
    <div>
        <h1>多谢注册本站，@Model.Name</h1>
    </div>
</body>
</html>

完结

这两个Demo是网上找的，然后自己一步一步敲了之后，感觉收获很多，MVC的学习任重而道远。

深入浅出MVC