knockout+bootstrap+MVC 登录页实现

一、环境概述

1、MVC4.0项目

2、bootstrap引入：

• 生产环境版本引入：在web\Content 文件夹中引入bootstrap-3.2.0-dist，
• 源码版本CSS引入：将bootstrap-3.2.0\docs\examples中的所有css复制到Web\Content\bootstrap-3.2.0-dist\css\themes

3、KnockoutJS引入：

• 将knockout-3.2.0.js文件引入到Web\scripts

4、JQuery引入

二、前端CSHTML

 <div class="container">
     <div class="form-signin">
         <h2 class="form-signin-heading">Please sign in</h2>
         <input type="email" data-bind="value:accountName" autofocus="" required="" placeholder="Email address" class="form-control">
         <input type="password" data-bind="value:password" required="" placeholder="Password" class="form-control">
         <div class="row">
             <div class="col-sm-7">
                 <input type="email" data-bind="value:verifyCode" autofocus="" required="" placeholder="Email address" class="form-control">
             </div>
             <div class="col-sm-3">
                 <img height=" title="点击刷新验证码" data-bind="attr: { 'src': verifyimageSrc },click:ImageOnClick" />
             </div>
         </div>
         <div class="checkbox">
             <label>
                 <input type="checkbox" value="remember-me" data-bind="checked:isRemember"> Remember me
             </label>
         </div>
         <input type="button" class="btn btn-lg btn-primary btn-block"
                data-bind="click:submit" value="Sign in"/>
     </div>
 </div>
 <script src="/scripts/jquery-2.1.1.min.js"></script>
 <script src="/scripts/knockout-3.2.0.js"></script>
 <script src="/scripts/Account/Login.js"></script>
 <script src="/Content/bootstrap-3.2.0-dist/js/bootstrap.min.js"></script>
 <link href="/Content/bootstrap-3.2.0-dist/css/bootstrap.min.css" rel="stylesheet" />
 <link href="/Content/bootstrap-3.2.0-dist/css/themes/signin.css" rel="stylesheet" />

三、Login.js:

 var ViewModel = function () {
     //获取当前网址，如： http://localhost:8080/ems/Pages/Basic/Person.jsp
     var curWwwPath = window.document.location.href;
     //获取主机地址之后的目录，如： /ems/Pages/Basic/Person.jsp
     var pathName = window.document.location.pathname;
     var pos = curWwwPath.indexOf(pathName);
     //获取主机地址，如： http://localhost:8080
     , pos);
     var ImageNewPath = "/tool/verifyimage?time=";
     var newDate = new Date();
     var self = this;
     self.accountName = ko.observable("");
     self.password = ko.observable("");
     self.verifyCode = ko.observable("");
     self.isRemember = ko.observable("");
     self.verifyimageSrc = ko.observable("");
     GetImage(newDate, ImageNewPath, self);
     self.ImageOnClick = function () {
         newDate = new Date();
         GetImage(newDate, ImageNewPath, self);
     }
     self.submit = function (Student) {
         $.post("/account/login",
             {
                 accountName: self.accountName(),
                 password: self.password(),
                 verifyCode: self.verifyCode(),
                 sisRemember: self.isRemember(),
                 verifyimageSrc: self.verifyimageSrc(),
             },
             function (data) {
                 alert("Data Loaded: " + data.Data);
             });
     };
 }
 var GetImage = function (Date, ImageNewPath, KoObject) {
     $.get(
            "../tool/verifyimage",
            { time: Date },
            function (data) {
                KoObject.verifyimageSrc(ImageNewPath + Date);
            }
            );
 }
 $(document).ready(function () {
     ko.applyBindings(ViewModel);
 });