MVC实现简单注册页面_html/css_WEB-ITnose-html tutorial-php.cn

MVC实现简单注册页面_html/css_WEB-ITnose

WBOY

Lepaskan： 2016-06-24 11:53:00

asal

1700 orang telah melayarinya

刚开始学习MVC，从Webform转过来确实有点费劲好多东东都已经换了一种形式，也在不断的适应这，下面通过讲解一个简单的注册页面来熟悉下MVC中常用的操作。

Model中的User类如下

<span style="font-family:SimSun;font-size:18px;">public class User    {        //用号登录姓名        public string LoginName { get; set; }        //用户密码        public string Password { get; set; }        //用户的电子邮件        public string Email { get; set; }        //用户的手机号码        public string Phone { get; set; }    }</span>

Salin selepas log masuk

MVC最大的好处就是分离关注点，意思就是我们在开发过程中不用管页面是什么东东，可以先开发业务逻辑，下面是RegisterController中的操作

<span style="font-family:SimSun;font-size:18px;">public class registerController : Controller    {             //注册完的信息显示        public ActionResult Create(FormCollection form)        {            User user = new User()            {                //两种获取方法，一种通过request，一种通过formcollection类                LoginName=form["name"],               // LoginName = Request.Form["loginName"],                Password = Request.Form["password"],                Phone = Request.Form["phone"],                Email = Request.Form["email"]            };            //通过viewdata向界面传递值            ViewData["UserInfo"] = user;            return View();        }        //注册的方法        public ActionResult Reg()        {            //字典类型的键值对            IDictionary<int, string> star = new Dictionary<int, string>();            //添加值            star.Add(1, "白羊座");            star.Add(2, "金牛座");            star.Add(3, "双子座");            star.Add(4, "巨蟹座");            star.Add(5, "狮子座");            star.Add(6, "处女座");            star.Add(7, "天秤座");            star.Add(8, "天蝎座");            star.Add(9, "射手座");            star.Add(10, "摩羯座");            star.Add(11, "水瓶座");            star.Add(12, "双鱼座");            //为列表赋值            SelectList starList = new SelectList(star, "key", "value");            //向界面传递值            ViewData["star"] = starList;            return View();        }    }</span>

Salin selepas log masuk

有了以上的业务逻辑我们就可以实现页面的操作了。

注册页面

<span style="font-family:SimSun;font-size:18px;"><%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<dynamic>" %><!DOCTYPE html><html><head runat="server">    <meta name="viewport" content="width=device-width" />    <title>Reg</title></head><body>  <div id="register"><% using (Html.BeginForm("Create", "Register", FormMethod.Post))   { %>    <table border="0" width="500">    <thead><tr><td colspan="2">        <h3>用户注册</h3>    </td></tr></thead><tbody>    <tr><td class="td_left">登录名：</td>        <td><%=Html.TextBox("loginName") %></td>    </tr><tr><td class="td_left">密码：</td>        <td><%=Html.Password("password") %></td>    </tr><tr><td class="td_left">确认密码：</td>        <td><%=Html.Password("password2") %></td>    </tr><tr><td class="td_left">星座：</td>        <td><%=Html.DropDownList("star") %></td>    </tr><tr><td class="td_left">性别：</td>        <td><%=Html.RadioButton("sex", true, new { style = "border:0; width:30px;" })%>男            <%=Html.RadioButton("sex", false, new { style = "border:0; width:30px;" })%>女</td>    </tr><tr><td class="td_left">已婚：</td>        <td><%=Html.CheckBox("married", false, new { style = "border:0; width:30px;" })%></td>    </tr><tr><td class="td_left">安全邮箱：</td>        <td><%=Html.TextBox("email") %>输入邮箱</td>    </tr><tr><td class="td_left">联系电话：</td>        <td><%=Html.TextBox("phone") %>输入联系电话</td>    </tr><tr>    <td colspan="2" align="center"><br /><button type="submit"> 提交 </button><br /><br /></td>    </tr>    </tbody>    </table><%} %></div></body></html></span>

Salin selepas log masuk

详细信息页面如下

<span style="font-family:SimSun;font-size:18px;"><%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<dynamic>" %><!DOCTYPE html><html><head runat="server">    <meta name="viewport" content="width=device-width" />    <title>Create</title></head><body>   <div id="register">    <h2>用户注册</h2>    <% loginMvc.Models.User user =            ViewData["UserInfo"] as loginMvc.Models.User; %>    你刚才提交的信息如下：<br />    登 录 名：<%= user.LoginName %><br />    登录密码：<%= "******" %><br />    安全邮箱：<%= user.Email %><br />    联系电话：<%= user.Phone %><br />    <br />    <button>确定注册</button>    <a href="/Register">返回重填</a>    <br /><br /></div></body></html></span>

Salin selepas log masuk

案例分析

在上述例子用到了一下几个关键点，下面来分析一下。

1.获取传递值

在上述例子中我们应用两种方法来获取传递的值，分别是FormCollection类和Request对象，这两种用法相同。

2.页面跳转

用到了HtmlHelper类的BeginForm操作，例如Html.BeginForm("Create", "Register", FormMethod.Post)，代表以post的方式当页面提交的时候，传递到Register控制器中的Create方法中。该方法参数还有很多，可以自己研究。

3.viewdata向页面返回值，viewdata就好比一个容器，可以装载任何东西，上述实例中就是通过viewdata来传递的。比如在控制器中 ViewData["UserInfo"] = user;把user对象装载到容器中，然后通过页面上的login.models.user user= ViewData["UserInfo"] as loginMvc.Models.User来为页面上的user赋值，需要注意的是，在此需要进行强制转换。

4.viewdata和TempData的区别

ViewData属性是一个ViewDataDictionary类，可用于存储任意对象的数据类型，但存储的键值必须为字符串ViewData有一个特性，就是只会存在于当前的HTTP请求中，而不想session一样，可以将数据带到下一个HTTP请求。与ViewData一样，都属于字典类，不过他中的数据只是一次网页的请求