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