zoukankan      html  css  js  c++  java
  • 无废话MVC入门教程五[Control与View交互]

    本文目标

    1.熟练应用Control与View间的传递数据

    本文目录

    1.在Control中使用Model并传递给View

    2.把View中的Model数据传递给Control

    3.使用FormCollection接收客户端数据

    0.前置条件

    本文中使用的Model为"无废话MVC入门教程二[第一个小Demo]"中的UserModel

    1.在Control中使用Model并传递给View

    1.Control中的代码:

     1         //UserDetail
     2         public ActionResult UserDetail()
     3         {
     4             Models.UserModel userModel = new Models.UserModel();
     5             userModel.UserName = "用户名";
     6             userModel.Password = "密码";
     7             userModel.Sex = 0;
     8             userModel.Age = 30;
     9             userModel.Height = 170;
    10             userModel.Weight = 70;
    11             userModel.Graduated = "毕业院校";
    12             return View(userModel);
    13         }

    2.View中的代码:

     1 @model MVC3.Demo.Models.UserModel
     2 @{
     3     Layout = null;
     4 }
     5 <!DOCTYPE html>
     6 <html>
     7 <head>
     8     <title>用户详细</title>
     9 </head>
    10 <body>
    11     <div>
    12         用户名:@Model.UserName
    13     </div>
    14     <div>
    15         密码:@Model.Password
    16     </div>
    17     <div>
    18         性别:
    19         @if (Model.Sex == 0)
    20         { 
    21             @:男
    22             }
    23         else
    24         { 
    25             @:女
    26                                 }
    27     </div>
    28     <div>
    29         年龄:@Model.Age 岁
    30     </div>
    31     <div>
    32         身高:@Model.Height CM
    33     </div>
    34     <div>
    35         体重:@Model.Weight KG
    36     </div>
    37     <div>
    38         毕业院校:@Model.Graduated
    39     </div>
    40 </body>
    41 </html>

    说明:@model 是Razor的一个指令,实现视图对强类型的引用。

    3.效果如下:

    2.把View中的Model数据传递给Control

     1.View中的代码

     1 @model MVC3.Demo.Models.UserModel
     2 @{
     3     Layout = null;
     4 }
     5 <!DOCTYPE html>
     6 <html>
     7 <head>
     8     <title>用户编辑</title>
     9 </head>
    10 <body>
    11     @using (@Html.BeginForm())
    12     {
    13         <div>
    14             用户名:@Html.TextBoxFor(model => model.UserName, new { @style = "200px" })
    15         </div>
    16         <div>
    17             密码:@Html.PasswordFor(user => user.Password)
    18         </div>
    19         <div>
    20             性别: 男 @Html.RadioButtonFor(user => user.Sex, 0, new { @name = "sex", @checked = "true" })
    21             女 @Html.RadioButtonFor(user => user.Sex, 1, new { @name = "sex" })
    22         </div>
    23         <div>
    24             年龄:@Html.TextBoxFor(user => user.Age) 岁
    25         </div>
    26         <div>
    27             身高:@Html.TextBoxFor(user => user.Height) CM
    28         </div>
    29         <div>
    30             体重:@Html.TextBoxFor(user => user.Weight) KG
    31         </div>
    32         <div>
    33             毕业院校:@Html.TextBoxFor(user => user.Graduated)
    34         </div>
    35         <div>
    36             <input type="submit" value="提交" /></div>
    37     }
    38 </body>
    39 </html>

    2.Control中的代码:

     1         //UserEdit
     2         public ActionResult UserEdit()
     3         {
     4             Models.UserModel userModel = new Models.UserModel();
     5             userModel.UserName = "用户名";
     6             userModel.Age = 10;
     7             //其他....
     8             return View(userModel);
     9         }
    10 
    11         [HttpPost]//UserEdit
    12         public ActionResult UserEdit(Models.UserModel userModel)
    13         {
    14             Response.Write(userModel.UserName);
    15             Response.Write("<br />");
    16             Response.Write(userModel.Password);
    17             Response.Write("<br />");
    18             Response.Write(userModel.Sex);
    19             Response.Write("<br />");
    20             Response.Write(userModel.Age);
    21             Response.Write("<br />");
    22             Response.Write(userModel.Height);
    23             Response.Write("<br />");
    24             Response.Write(userModel.Weight);
    25             Response.Write("<br />");
    26             Response.Write(userModel.Graduated);
    27             Response.Write("<br />");
    28             return View();
    29         }

    3.运行效果:

    3.使用FormCollection接收客户端数据

    常用于富客户端的B/S应用程序,如客户端使用:ExtJs和JqueryUI等 

     1.View中的代码

     1 @{
     2     Layout = null;
     3 }
     4 <!DOCTYPE html>
     5 <html>
     6 <head>
     7     <title>用户编辑</title>
     8 </head>
     9 <body>
    10     @using (@Html.BeginForm())
    11     {
    12         <div>
    13             用户名:@Html.TextBox("UserName", null, new { @style = "200px" })
    14         </div>
    15         <div>
    16             密码:@Html.Password("Password")
    17         </div>
    18         <div>
    19             <input type="submit" value="提交" /></div>
    20     }
    21 </body>
    22 </html>

    2.Control中的代码

     1         //UserEdit
     2         public ActionResult UserEdit_01()
     3         {
     4             return View();
     5         }
     6 
     7         [HttpPost]//UserEdit
     8         public ActionResult UserEdit_01(FormCollection form)
     9         {
    10             Response.Write(form["UserName"]);
    11             Response.Write("<br />");
    12             Response.Write(form[1]);
    13             Response.Write("<br />");
    14             return View();
    15         }

    3.运行效果

    版权:http://www.cnblogs.com/iamlilinfeng

  • 相关阅读:
    C#数据结构与算法系列(十三):递归——迷宫问题
    C#数据结构与算法系列(十二):递归(Recursion)
    C#数据结构与算法系列(十一):中缀表达式转后缀表达式
    C#数据结构与算法系列(十):逆波兰计算器——逆波兰表达式(后缀表达式)
    Quartz.Net系列(八):Trigger之CalendarIntervalScheduleBuilder详解
    Quartz.Net系列(七):Trigger之SimpleScheduleBuilder详解
    C#数据结构与算法系列(九):栈实现综合计算器(中缀表达式)
    Redis系列(五):数据结构List双向链表源码解析和API实现
    Quartz.Net系列(六):Quartz五大构件Trigger之TriggerBuilder解析
    C#数据结构与算法系列(八):栈(Stack)
  • 原文地址:https://www.cnblogs.com/iamlilinfeng/p/2938134.html
Copyright © 2011-2022 走看看