knockout+bootstrap+MVC 登陸頁實現

1、環境概述

一、MVC4.0項目

二、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

三、KnockoutJS引入：

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

四、JQuery引入

2、前端CSHTML

 1 <div class="container">
 2     <div class="form-signin">
 3         <h2 class="form-signin-heading">Please sign in</h2>
 4         <input type="email" data-bind="value:accountName" autofocus="" required="" placeholder="Email address" class="form-control">
 5         <input type="password" data-bind="value:password" required="" placeholder="Password" class="form-control">
 6         <div class="row">
 7             <div class="col-sm-7">
 8                 <input type="email" data-bind="value:verifyCode" autofocus="" required="" placeholder="Email address" class="form-control">
 9             </div>
10             <div class="col-sm-3">
11                 <img height="24" title="點擊刷新驗證碼" data-bind="attr: { 'src': verifyimageSrc },click:ImageOnClick" />
12             </div>
13         </div>
14         <div class="checkbox">
15             <label>
16                 <input type="checkbox" value="remember-me" data-bind="checked:isRemember"> Remember me
17             </label>
18         </div>
19         <input type="button" class="btn btn-lg btn-primary btn-block"
20                data-bind="click:submit" value="Sign in"/>
21     </div>
22 </div>
23 <script src="/scripts/jquery-2.1.1.min.js"></script>
24 <script src="/scripts/knockout-3.2.0.js"></script>
25 <script src="/scripts/Account/Login.js"></script>
26 <script src="/Content/bootstrap-3.2.0-dist/js/bootstrap.min.js"></script>
27 <link href="/Content/bootstrap-3.2.0-dist/css/bootstrap.min.css" rel="stylesheet" />
28 <link href="/Content/bootstrap-3.2.0-dist/css/themes/signin.css" rel="stylesheet" />

3、Login.js:

 1 var ViewModel = function () {
 2     //獲取當前網址，如： http://localhost:8080/ems/Pages/Basic/Person.jsp
 3     var curWwwPath = window.document.location.href;
 4     //獲取主機地址以後的目錄，如： /ems/Pages/Basic/Person.jsp
 5     var pathName = window.document.location.pathname;
 6     var pos = curWwwPath.indexOf(pathName);
 7     //獲取主機地址，如： http://localhost:8080
 8     var localhostPath = curWwwPath.substring(0, pos);
 9     var ImageNewPath = "/tool/verifyimage?time=";
10     var newDate = new Date();
11     var self = this;
12     self.accountName = ko.observable("");
13     self.password = ko.observable("");
14     self.verifyCode = ko.observable("");
15     self.isRemember = ko.observable("");
16     self.verifyimageSrc = ko.observable("");
17     GetImage(newDate, ImageNewPath, self);
18     self.ImageOnClick = function () {
19         newDate = new Date();
20         GetImage(newDate, ImageNewPath, self);
21     }
22     self.submit = function (Student) {
23         $.post("/account/login",
24             {
25                 accountName: self.accountName(),
26                 password: self.password(),
27                 verifyCode: self.verifyCode(),
28                 sisRemember: self.isRemember(),
29                 verifyimageSrc: self.verifyimageSrc(),
30             },
31             function (data) {
32                 alert("Data Loaded: " + data.Data);
33             });
34     };
35 }
36 var GetImage = function (Date, ImageNewPath, KoObject) {
37     $.get(
38            "../tool/verifyimage",
39            { time: Date },
40            function (data) {
41                KoObject.verifyimageSrc(ImageNewPath + Date);
42            }
43            );
44 }
45 $(document).ready(function () {
46     ko.applyBindings(ViewModel);
47 });