简单的用户登录（一）

 

用来实现一个用户登录，这里要实现的是，输入用户名和密码，提交后，验证两者是否正确。

这里直接对表单提交的二者进行字符串判断，不涉及商业层活动。

实现项：

1 表单提交

2 获取表单提交值

3 客户端判断不为空

4 添加Css样式

 

（1）       在View下添加Self文件夹，并在此文件夹中添加 添加Login视图

1 在视图中添加文本框，按钮

2 在Content文件夹中添加Css文件，取名base.css

随便添加几项对视图Login中元素的样式定义

3 在视图中添加对base.css的引入

方法一：传统方式

<link href="http://www.cnblogs.com/Content/base.css" rel="stylesheet" type="text/css" />

方法二：

<%=Url.Content("~/Content/base.css") %>（Url对象的Content方法，用于返回路径。可用于其它类似资料的引入）[推荐]

4 以下为Login视图的代码

//---------------------------------------------------------------------------------------

<div>

    <% Html.BeginForm("valiLogin","Self",FormMethod.Post); %>

    <div>用户登录</div>

    <div class="divMargin"><span class="spanHeader">用户帐号：</span>

    <%= Html.TextBox("tbxUserName") %>

    </div>

    <div class="divMargin"><span class="spanHeader">用户密码：</span>

    <%= Html.Password("tbxUserPw") %>

    </div>

    <div class="divMargin"><input type="submit" value="登录" id="btnlogin"/></div>

    <% Html.EndForm(); %>

</div>

//----------------------------------------------------------------------------------------

表单部分：BeginForm方法第一个参数为：提交到的页（视图）； 第二个参数为：控制器名；第三个参数：提交动作类型，这里是Post

5 添加ajax验证。用于客户端验证用户帐号和密码不能为空。

这里只验证用户名不能为空。

先添加jquery库。

方法用Url.Content方法

<script type="text/javascript" src="<%=Url.Content("~/scripts/jquery-1.3.2-vsdoc.js") %>"></script>

(流行的js框架放在Scripts文件夹中)

先在Content文件夹中添加selfJs文件夹，用于存放js文件。新建valiUser.js

脚本内容为：

//---------------------------------------------------------------------------------

$(document).ready(function() {

$("#btnlogin").bind("click", function() {

if ($("#tbxUserName").val() == "") {

            alert("用户帐号不能为空！");

            return false;

        }

        return true;

    });

})

//---------------------------------------------------------------------------------

把文件引入到Login视图中

     <script type="text/javascript" src="<%=Url.Content("~/Content/selfjs/valiUser.js")%>"></script>

（2）       添加控制器

在Controllers文件夹中添加Self控制器。

添加Action

public ActionResult Login()

{

   return View();

}

（3）       添加路由

在Global.asax中添加

routes.MapRoute(

                "Login",

                "{controller}/{action}/{id}",

                new { controller="Self",action="Login",id=""}

                );

（4）       添加验证用户信息视图

就是提交页那个提交页（视图）

<% Html.BeginForm("valiLogin","Self",FormMethod.Post); %>

先添加valiLogin视图；然后在Self控制器中添加验证。验证如下：

public ActionResult valiLogin()

{

string strUser = Request.Form["tbxUserName"];

if (strUser == "qq")

{

    ViewData["ok"] = "登录成功";

 }

 else

 {

    ViewData["ok"] = "登录不成功";

 }

return View();

}

完成。

总结：一个简单的mvc登录示例。这里只用于MVC中的VC
涉及到：
1 表单提交与获取表单
2 客户端验证
3 视图，控制器，路由关系
4 资源引入
下一个例子将涉及到数据库信息