ASP.NET MVC登录界面

开发工具与关键技术：VS  MVC

作者：陈芝番

撰写时间：2019.4.23

Placeholder:占位符     submit:提交    password：密码

<form action="#" method="post" name="userid" id="userid">

              <h3>用户登录</h3>

              <p><input type="text" class="input-text" name="username" value="" placeholder="手机号/会员名/邮箱" autofocus required></p>

              <p><input type="password" class="input-text input-pwd" name="password" value="" required></p>

              <p><input type="submit" class="input-btn" value="登录"></p>

              <h6><a href="#">忘记密码</a> <a href="#">免费注册</a></h6>

       </form>

实现密码显示，写一个button按钮，给它一个点击事件，点击即可实现密码显示

再写一个if，else判断，如果是则显示出密码，否遮掩密码。

<input type="password" id="demo"/>

<button type="button" onclick="btndemo()">anniu</button>

    <script src="~/Plugins/jquery-3.2.1.min.js"></script>

    <script>

        function btndemo()

        {

            var s = $("#demo").attr("type")

            if (s == "text") {

                $("#demo").attr("type", "password");

            } else {

                $("#demo").attr("type", "text");

            }

        }

</script>

截图如下

如果是多个用户，而且登录身份不同，则会用另外一种做法,A,B,C分别代表不同人的身份，select：选择。不同身份，登录当然看到的信息也不同

<select id="UserTypeClass" name="UserTypeClass" class="form-control select2 ">

                                                <option value="1" @(ViewBag.UserTypeClass == "1" ? "selected" : "")>A</option>

                                                <option value="2" @(ViewBag.UserTypeClass == "2" ? "selected" : "")>B</option>

                                                <option value="3" @(ViewBag.UserTypeClass == "3" ? "selected" : "")>C</option>

                                            </select>

  登录界面另外一种源码：

<div class="form-group form-row">

<label class="sr-only" for="UserNuber">用户名</label>

<div class="col-12">

<div class="input-group">

<div class="input-group-prepend">

<div class="input-group-text"><i class="fas fa-fw fa-user"></i></div>

</div><input type="text" name="UserNuber" id="UserNuber" class="form-control" placeholder="用户名" value="@ViewBag.UserNuber" />

                     </div>

                 </div>

          </div>

<div class="form-group form-row">

<label class="sr-only" for="password">密码</label>

<div class="col-12">

<div class="input-group">

<div class="input-group-append">

<div class="input-group-text"><i class="fas fa-fw fa-unlock"></i></div>

              </div>

<input type="password" name="password" id="password" class="form-control" placeholder="密码" value="@ViewBag.Password" />

                           </div>

                         </div>

                    </div>

还需要在控制器定义一个记录状态的变量

string strMsg = "fail";

获取页面的传递变量

string strUserNuber = pwUser.UserNuber;//用户名

string strPassword = pwUser.Password; //密码

一般登录界面都会有验证码，验证码源码：

<div class="form-group  form-row">

<label class="sr-only" for="validCode">验证码</label>

<div class="col-12 ">

<div class="input-group">

<div class="input-group-append">

<div class="input-group-text">

<i class="fas fa-fw fa-key"></i>

</div>

</div>

<input type="text" name="validCode" id="validCode" value="" class="form-control" placeholder="验证码" />

<div class="input-group-addon p-0">

<img src="/Main/CreateValidCodeImage" width="100" height="38" id="validCodeImg" />

                               </div>

                          </div>

                      </div>

                 </div>

在控制器获取处session存放验证码

string sessionValiCode = "";

                try{ //图片字符串

                    sessionValiCode = Session["validCode"].ToString();

                }

                catch (Exception e)

                {

Console.WriteLine(e);//并不会产生输出，主要是为了避免VS提示e未使用的警告

                 }