【框架】MVC实例篇

小咪咪 2022-02-28 05:00 166阅读 0赞

**目录**

一、直接看例子效果：

二、代码部分

1、在View-REG.cshtml

2、Modles——User.cs

3、Controllers——HomeController.cs

三、简单理解一下asp.net下的前端开发：

DEMO理解：

详细了解点：

--------------------

## 一、直接看例子效果： ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3htbDE5OTY_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3htbDE5OTY_size_16_color_FFFFFF_t_70 1][]

MVC主要展示其主要部分的代码，具体的例子操作，已经有非常详细的解析链接：[MVC实例具体操作步骤][MVC]

## 二、代码部分 ##

### 1、在View-REG.cshtml ###

@model alexzeng.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>
                    <strong>@Html.ValidationSummary()</strong>
                    <div class="col-md-6 col-md-offset-3 col-xs-10 col-xs-offset-1 register">
    
    
                        <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>

### 2、Modles——User.cs ###

namespace alexzeng.Models
    {
        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; }
           
        }
    
    }

### 3、Controllers——HomeController.cs ###

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

## 三、简单理解一下asp.net下的前端开发： ##

1、**Asp.net webforms 开发快速**，有控件可以拖，前后端交互方式简单；可定制化不佳，UI样式美化不易，性能较低，大部分操作都会刷新页面。——这个在前面的牛腩的例子中应用过

2、**Asp.net MVC 开发较快速**，灵活控制，性能高；对技能要求较多，需要掌握js，css，html等内容。——在福分系统中应用了

3、**纯html+js + Asp.net WebApi** (前后端分离)，高性能，多端可复用；对js的要求较高，大部分逻辑前置

一般来说，.Net下开发WEB就大概这么几种方式，当前的话，一般2和3用的比较多

### DEMO理解： ###

这个例子并没有真正和数据进行交互，写了一个死实体**Models**,通过**Controllers**的GET、PUT请求，在方法中进行逻辑判断和验证 if (ModelState.IsValid)。**在View中**，根据Controller 里面的请求和判断，最后可以展示给用户响应的提示信息，可以看出，主要的页面显示都写在的**View—中的.cshtml**中：这里包含了CSS样式，JS，html 。另外，aspx 中我们经常使用 <% test; %>这种，在 cshtml 中则改为 @\{ test; \} 这种更为简洁的写法。

### 详细了解点： ###

在主页上，点击：蓝色链接：**注册会员**，之后跳转到下一个界面，用的标签是：**@Html.ActionLink(要跳转的链接)**，这是cshtml中的超链接标签，如果换成**html::<a href="链接地址">l链接名称</a>**

在例子中还用到的@ViewGag动态像是标签[详解][Link 1]；@Html.ValidationSummary错误提示标签[详解][Link 1]；

***颗粒归仓，欢迎交流！***

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3htbDE5OTY_size_16_color_FFFFFF_t_70]: /images/20220228/01ff289c7e7d4efb8d33b03a6105ba0e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3htbDE5OTY_size_16_color_FFFFFF_t_70 1]: /images/20220228/95199f1f4a0b4d449f44af01590a8a3c.png
[MVC]: https://www.jianshu.com/p/233b85895ca6
[Link 1]: https://blog.csdn.net/wybshyy/article/details/52064253