KNOCKOUT+BOOTSTRAP+MVC Login Page Implementation

I. Overview of the Environment

1. MVC4.0 Project

2, Bootstrap introduced:

• Production Environment Release Introduction: Introducing Bootstrap-3.2.0-dist in the Web\content folder,
• Source Version CSS Introduction: Copy all CSS from Bootstrap-3.2.0\docs\examples to Web\content\bootstrap-3.2.0-dist\css\themes

3, Knockoutjs introduced:

• Introducing the Knockout-3.2.0.js file to the Web\scripts

4. jquery Introduction

Second, the front-end cshtml

1<divclass="Container">2<divclass="Form-signin">3class="form-signin-heading">please Signinch4<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<divclass="Row">7<divclass="col-sm-7">8<input type="Email"Data-bind="Value:verifycode"autofocus=""Required=""Placeholder="Email Address" class="Form-control">9</div>Ten<divclass="col-sm-3"> One" -"title="Click Refresh Verification Code"Data-bind="attr: {' src ': verifyimagesrc},click:imageonclick"/> A</div> -</div> -<divclass="checkbox"> the<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> A</div> at<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"/>

Third, Login.js:

1 varViewModel =function () {2     //get the current URL, such as:http://localhost: 8080/ems/pages/basic/person.jsp3     varCurwwwpath =Window.document.location.href;4     //gets the directory after the host address, such as:/ems/pages/basic/person.jsp5     varPathName =Window.document.location.pathname;6     varpos =Curwwwpath.indexof (pathName);7     //get the host address, such as:http://localhost: 80808     varLocalhostpath = curwwwpath.substring (0, POS);9     varImagenewpath ="/tool/verifyimage?time=";Ten     varNewdate =NewDate (); One     varSelf = This; ASelf.accountname = Ko.observable (""); -Self.password = Ko.observable (""); -Self.verifycode = Ko.observable (""); theSelf.isremember = Ko.observable (""); -SELF.VERIFYIMAGESRC = Ko.observable (""); - GetImage (newdate, Imagenewpath, self); -Self. Imageonclick =function () { +Newdate =NewDate (); - GetImage (newdate, Imagenewpath, self); +     } ASelf.submit =function (Student) { at$.post ("/account/login", -             { - accountName:self.accountName (), - Password:self.password (), - VerifyCode:self.verifyCode (), - SisRemember:self.isRemember (), in VERIFYIMAGESRC:SELF.VERIFYIMAGESRC (), -             }, to function (data) { +Alert"Data Loaded:"+data. Data); -             }); the     }; * } $ varGetImage =function (Date, Imagenewpath, koobject) {Panax Notoginseng$.Get( -            ".. /tool/verifyimage", the {time:date}, + function (data) { AKOOBJECT.VERIFYIMAGESRC (Imagenewpath +Date); the            } +            ); - } $ $ (document). Ready (function () { $ ko.applybindings (ViewModel); -});

KNOCKOUT+BOOTSTRAP+MVC Login Page Implementation