简单的用户登录(一)

 

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

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

实现项:

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/

转载请注明:博客园

原文地址:https://www.cnblogs.com/jams742003/p/1581790.html