简单的用户登录(一)

简介: 用来实现一个用户登录,这里要实现的是,输入用户名和密码,提交后,验证两者是否正确。 这里直接对表单提交的二者进行字符串判断,不涉及商业层活动。 实现项: 1 表单提交 2 获取表单提交值 3 客户端判断不为空 4 添加Css样式   (1)       在View下添加Sel...
 

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

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

实现项:

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 资源引入
下一个例子将涉及到数据库信息

博客园大道至简

http://www.cnblogs.com/jams742003/

转载请注明:博客园

目录
相关文章
|
11天前
who 查看登录用户信息
who 查看登录用户信息。
15 5
|
10月前
用户登录问题
用户登录问题
55 0
|
10月前
|
安全 数据安全/隐私保护
用户登录
用户登录
88 0
|
10月前
|
存储 数据安全/隐私保护 Python
用户登录的用户库
用户登录的用户库
39 0
|
10月前
|
数据安全/隐私保护
用户登陆
用户登陆
51 0
|
10月前
|
安全 数据安全/隐私保护 Python
用户登录程序需求
用户登录程序需求
58 0
|
10月前
|
数据安全/隐私保护
用户登录程序
用户登录程序
59 0
|
Java 数据库连接 数据库
实现用户登陆功能的实现
在javaEE中,实现用户登陆功能的实现(图文结合)
实现用户登陆功能的实现
|
Java 数据安全/隐私保护 开发者
用户登入|学习笔记
快速学习用户登入
用户登入|学习笔记