MVC 前后台传值

MVC 是通过路由定位到对应的Action进行页面显示，那如何将后台的数据传递到前端的cshtml页面呢？如下我们来看几种传值方式。

ViewBag，ViewData，TempData，Model 主要有这四种方式。

1.ViewBag 是动态类型dynamic，可以理解为往对象中设置任意属性，有点类似js中的对象，使用很简单，如下就可以添加属性并赋值。

//后端赋值
ViewBag.Name = "ankeyliu";

@*前端取值，@相对于VUE中的{} 输出数据*@
@ViewBag.Name

2.ViewData 对象是ViewDataDictionary 类型，从类型中可以看出使用方式应该是类似键值对，赋值方式如下：

//向ViewData中添加键值对
ViewData["Name"] = "ankeyliu";

@*前端取值，@相对于VUE中的{} 输出数据*@
@ViewData["Name"]

@ViewBag.Name

也可以通过ViewBag进行取值，说明两个类型引用的对象地址为同一地址。

ViewBag 和ViewData都是存放一些不重要的数据，什么是不重要的数据呢？例如在新闻页面中，标题和内容都是重要数据，旁边的广告不是重要数据，可以放在这两个对象中。

3.TempData 是一个Session类型，赋值后可以在其它页面页面中读取，但只能读取一次就被清空了，使用方式于ViewData一致为键值对类型。

4.Model 对象类型，MVC支持将对象通过View()方法传递到前端页面，前端页面有2种类型页面即（强类型和弱类型）。

后端action中返回一个对象

      return View(new Models.Student()
            {
                Id = 1,
                Name = "ankeyliu",
                Age = 10
            });

1. 强类型页面，强类型页面可以理解为页面中支持语法提示，需要在页面中显示指定需要使用的数据对象模型是什么。

如下指定为Student类型，使用的使小写的model进行指定，输出时使用大写的Model进行数据输出

@model ASP.NET_MVC基础_2.Models.Student
@{
    ViewBag.Title = "ShowData";
}

<h2>ShowData</h2>


@Model.Id
@Model.Name
@Model.Age

如果将对象属性写错了，则会有错误提示，可以使错误在开发时发现。

2.弱类型页面即页面支持错误提示，在页面中不进行model类型指定，在输入错误时，编译器不进行提示，错误只能在运行时发现。

View()方法有多个重载，我们常用有如下几种我们简单学习下

view 可以单独创建不一定要有对应的action

1.View(),当不传参数时，则返回与控制器同名的View页面，且不传任何参数

2.View(string viewName),显示指定一个View页面的名称，可以显示指定的页面，可以使用带action的页面，也可以指定不带action的页面

3.View(string viewName,string masterName),显示指定一个View页面名称，和母版布局页面，可有将页面换一个母版页进行显示。

前端页面提交数据主要有两种方式，即Get请求和Post请求,我们都比较熟悉。

get通过url的参数将数据提交到控制器中。

post通过表单将数据提交到控制器中。

MVC支持数据验证功能，需要在对象上加入验证属性

using System.ComponentModel.DataAnnotations;

如下添加一个viewmodel类进行登陆页面制作。

 public class LoginViewModel
    {
        [Required(ErrorMessage ="请填写邮箱"),StringLength(50,ErrorMessage ="长度超出",MinimumLength =10)]
        [EmailAddress(ErrorMessage ="邮箱格式不正确")]
        [Display(Name ="邮箱")]
        public string Email { get; set; }
        [DataType(dataType: DataType.Password)]
        [Display(Name = "密码")]
        [Required, MinLength(6)]
        public string Password { get; set; }
    }

2.添加控制器

我们一般会使用一对控制器，一个为Get请求获取表单页面，一个为Post请求提交表单数据存储到数据库中，这里添加的是空的控制器。

[HttpGet]
        public ActionResult Login()
        {
            return View();
        }
        [HttpPost]
        public ActionResult Login(Models.LoginViewModel model)
        {

            return Content("Post");
        }

3.添加视图页面

其实登录页面比较类似于数据创建，我们使用create进行改造。主要需要引用脚本库，这样会自动添加验证的脚步文件。

@model ASP.NET_MVC基础_2.Models.LoginViewModel

@{
    ViewBag.Title = "Login";
}

<h2>Login</h2>


@using (Html.BeginForm()) 
{
    @Html.AntiForgeryToken()
    
    <div class="form-horizontal">
        <h4>LoginViewModel</h4>
        <hr />
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        <div class="form-group">
            @Html.LabelFor(model => model.Email, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Email, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Email, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Password, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Password, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Password, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Create" class="btn btn-default" />
            </div>
        </div>
    </div>
}

<div>
    @Html.ActionLink("Back to List", "Index")
</div>

<script src="~/Scripts/jquery-3.4.1.min.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>

自动创建的文件中可以看到增加了很多验证规则，mvc自动使用bootstrap前端框架，可以根据真实需求进行改造，当不需要bootstrap样式代码可以进行删除，添加自己的css样式代码

我们将后端控制器代码修改下，使用ValidateAntiForgeryToken进行规则验证：

        [HttpGet]
        public ActionResult Login()
        {
            return View();
        }
        [HttpPost]
        [ValidateAntiForgeryToken]
        public ActionResult Login(Models.LoginViewModel model)
        {
            if (ModelState.IsValid)
            {
                if (model.Email == "admin@qq.com" && model.Password == "123456")
                    return View();
                else
                {
                    ModelState.AddModelError(key: "", errorMessage: "账号密码错误");
                    return View(model);
                }
            }
            ModelState.AddModelError(key: "", errorMessage: "数据填写有误");
            return View(model);
        }