ASP.NET MVC View和Controller之间传输数据

目录

一、Controller(控制器)向View(页面客户端)传输数据

二、View(页面客户端)向Controller(控制器)传输数据

三、Login页面的生成与代码介绍

一、Controller(控制器)向View(页面客户端)传输数据

       1、分为四种方式

            1.1 ViewBag 和 ViewData  

                  属性:可以作为 View视图和控制器传输的桥梁

                             无法跨页面

    控制器端

 public ActionResult Index()
        {
            //ViewBag 可以作为 View视图和控制器传输的桥梁
            //ViewData和ViewBag 两种完全相同的功能  写法上有些区别
            //一般存放一些不主要的数据
            //无法跨界面
            ViewBag.Content = "这是控制器Controller里的数据";
            ViewBag.ZName = "这是Zname";
            ViewBag.ZAge = "这是ZAge";

            ViewData["Name"] = "张三";
           

            return View();
        }

     View页面端

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>

@ViewBag.Content @ViewBag.ZName @ViewBag.ZAge
<p>
    @ViewData["Name"]
</p>

    ViewBag .属性名   ViewData  ["属性名"]

    属性名可以随便写 但要保证和View端的一样 这样就可以调用到

            1.2  TempData 

                    属性:存储之后读取一次数据就消失了,其他功能和Session一样

                              可以跨页面

控制器端

  public void Demo()
        {
            //TempData 存储之后读取一次数据就消失了 
            //和Session其他功能相同
            //可以跨页面
            TempData["Hello"] = "world";

            Response.Redirect(url: "~/Home/Demo2");
        }

View端

@{
    ViewBag.Title = "Demo2";
}

<h2>Demo2</h2>
@TempData["Hello"]

TempData ["属性名"]   属性名需要页面调用的保持一致

Response.Redirect(Url:"  ")  为重定向跳转页面

            1.3 View(参数传递)

                  属性:return View有多个重载

                             常用的View(页面,模板页,实体数据)

                             三个都可单独传输,也可以空

控制器端

  public ActionResult ShowData()
        {
            
            //主要数据传输通过 View传输
            //View分为三个常用重载参数为 ViewName=View名字  MaterName=模板页名字 Mode=实体数据
            //如果不指定ViewName  默认传给和 Action同名的View页面
            //如果不指定MaterName 默认使用_ViewStart里模板页
            return View("ShowData_2", "_Layout1", 
                        new Student { Name = "张三", Age = 18, Id = 1 });
        }

Models->Student实体类端

namespace Study4.Models
{
    public class Student
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public int Age { get; set; }
    }
}

View端

@*//声明 告诉系统传过来的Model类型 这样在写的时候Model.就会有提示
    //一直要和View里传过来的一致*@
@model Study4.Models.Student
@{
    Page.Title = "在此处显示标题";
    //页面上单独指定模板页
    //Layout = "~/Views/Shared/_Layout1.cshtml";
}

<div>
    <p>我是ShowData2</p>
</div>
@Model.Name
@Model.Id
@Model.Age

View端介绍

@model Study4.Models.Student 引用实体类,不引用的话写属性没有代码提示

@Model.Name 输出实体类属性

实体类数据是从控制器端传过来的

二、View(页面客户端)向Controller(控制器)传输数据 

        1、通过Action参数接收数据

        2、通过Request.QueryString[""] 和 Request.Form[""]接收数据

1、通过Action参数接收数据

 控制器端

    [HttpGet]
        public ActionResult Index(string name)
        {
            return Content(name);
        }

显示端 View

 

[HttpGet] 和 [HttpPost] 是限制作用,表面这个Action方法只接收某种请求

如果没做限制 POST表单的Name属性提交可以进入这个Action方法

比如下面这个

<form action="/Demo/Index" method="post">
    <input type="text"  name="name"  />
    <button>提交</button>
</form>

2、 Request接收数据

        

  public ActionResult Index(string name)
        {
            Request.QueryString["name"]  和使用参数同等
            Request.Form["name"]  和使用参数同等
            return Content(name);
        }

Request.QueryString接收Get请求的单个参数

Request.Form 接收Post请求表单所有参数

三、Login页面的生成与代码介绍 

        1、Login登录会分为两个Action方法

         1.1 用作处理登录数据的

                

   //用作处理  显示登录结果
        [HttpPost]  //POST 请求通过表单提交过去的 才能进入POST请求方法里
        // [ValidateAntiForgeryToken] 防伪标记 提交POST的界面必须要有防伪标记才能提交到这里
        //保证提交的页面是自己写的正常页面 防止伪造表单提交到这里
        //
        [ValidateAntiForgeryToken] 
        public ActionResult Logins(Models.LoginViewModel model)
        {
     
            if(ModelState.IsValid)  //数据校验 校验内容在Models->LoginViewModel 里
            {
                //表单要和属性名对应
                if (model.Name == "admin@gmail.com" && model.Password == "123456")
                    return Content("OK");
                else
                {
                    ModelState.AddModelError("","账号密码有误");
                    return View("Login",model);
                }
                
            }
            ModelState.AddModelError("", "数据有误");
            return View("Login", model);
        }

用作处理登录数据的Action介绍

        1、页面通过表单传输到控制器方式为 实体类参数接收

        2、ModelState.IsValid 用来校验属性的一些设置 比如(不为空 长短限制之类的)

        3、[ValidateAntiForgeryToken] 防伪标志,页面对应也必须有,没有的无法请求过来。

                                                          可以用作安全限制吧,保证一些非法表单提交

  

        1.2 用作显示的View的  这个控制器需要生成View页面

//用作显示 
        [HttpGet]
        public ActionResult Login()
        {
            return View();
        }

           生成方法及页面代码介绍:

                   1、在Login()方法处右键 选择 添加视图 

                   2、Login 选择为Create 并选择视图类和JS 如下图

                

                    3、生成后代码介绍

  

@model Study4.Models.LoginViewModel

@{
    ViewBag.Title = "Login";
}

<h2 class="labels">Login</h2>

<style>
    .labels{
        color:red
    }
</style>

@using (Html.BeginForm("Logins", "Demo")) //BeginForm生成一个表单 默认给当前同名Login界面提交
                                          //也可以像现在这样指定 Action和Controller
{
    @Html.AntiForgeryToken()          //防伪标记
    
    <div class="form-horizontal">
        <h4>LoginViewModel</h4>
        <hr />
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })   
    <div class="form-group">
        @*//htmlAttributes是控制input里type属性的*@
        @Html.LabelFor(model => model.Name, htmlAttributes: new { @class = "control-label col-md-2" ,title="鼠标提示"})
        <div class="col-md-10">
            @*文本框*@
            @Html.EditorFor(model => model.Name, new { htmlAttributes = new { @class = "form-control" } }) 
            @*显示Models定义的限制 错误显示*@
            @Html.ValidationMessageFor(model => model.Name, "", 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="登录" 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>

   1、Html.BeginForm("Logins", "Demo")  :可以选择提交到那个控制器的Action方法,默认                                                                不输入提交到同名的Login Post请求Action方法里

   2、 @Html.AntiForgeryToken() : 防伪标记,有这个才可以正确提交到Action方法。

   3、 @Html.ValidationSummary :   Action方法里的ModelState.AddModelError

                                                         ("", "数据有误");会在这块显示出来

   4、@Html.LabelFor :lable标签,C#写法,引用实体类 model.Name

   5、@Html.EditorFor :文本框标签,C#写法,引用实体类 model.Name

   6、@Html.ValidationMessageFor: Span标签,C#写法。用于实体类定义的一些(非

                                                                空,长度限制等一些信息的显示)

   7、页面默认用的是BootStrap里一些JS样式,如果想自己设置就需要像页面

        里 htmlAttributes: new {@class=}   class自己写样式名

                   4、实体类LoginViewModel介绍

namespace Study4.Models
{
    public class LoginViewModel
    {
        [Display(Name="账号")]
        [Required(ErrorMessage ="不可为空"),StringLength(20,MinimumLength =2,ErrorMessage ="长度必须是2-20")]  //设置只读和长度限制
        [EmailAddress(ErrorMessage ="邮件名有误")]                              //邮箱验证
        public string Name { get; set; }

        [Display(Name = "密码")]                   //控制自动生成表单的Label
        [Required,MinLength(6)]                     //设置只读和长度限制
        [DataType(DataType.Password)]              //告诉文本框页面这是是密码 用.....显示
        public string Password { get; set; }

    }
}

1、[Display(Name="账号")]:可以改变View界面的Lable显示

2、[Required(ErrorMessage ="不可为空"),StringLength(20,MinimumLength          =2,ErrorMessage ="长度必须是2-20")]  设置只读和长度限制

3、 [EmailAddress(ErrorMessage ="邮件名有误")]       邮箱格式判断

4、[DataType(DataType.Password)]     设置为密码格式

下面是几张View图

 

 

总结

分享了关于View和Controller之间传输数据 和 Login页面以及实体类的一些介绍 

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值