Ajax 無重新整理登陸
截圖：
檢視.cshtml：
@{
ViewBag.Title = "LoginView";
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>My LoginPage</title>
</head>
<body id="loginPage" class="loginPageBody">
<div id="mainDiv" class="mainDiv">
<div id="loginDiv" class="loginDiv">
<h3 id="title" class="titleH3">OSCAR 催收管理系統 v2017</h3>
<label id="idLable" class="idLable">Id</label>
<input id="userName" class="userNameInput" type="text" placeholder="使用者名稱" /><br />
<label id="pwdLable" class="pwdLable">password</label>
<input id="passWord" class="passWordInput" type="passWord" placeholder="密碼" />
<input id="login" class="loginButton" type="button" value="GO!" />
</div>
</div>
<div id="messageBox" class="messageBoxDiv" />
</body>
</html>
<link href="~/Css/Login/mdialog.css" rel="stylesheet" />
<link href="~/Css/Login/LoginStyle.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.7.1.min.js"></script>
<script src="~/Scripts/Login/mdialog.js"></script>
<script src="~/Scripts/Login/zepto.min.js"></script>
<script type="text/javascript">
$("#login").click(function () {
var userName = $("#userName").val();
var passWord = $("#passWord").val();
if (userName.trim() == "") {
new TipBox({ type: 'tip', str: '提示:使用者名稱不能為空！', clickDomCancel: true, setTime: 10000500, hasBtn: true })
return;
}
if (passWord.trim() == "") {
new TipBox({ type: 'tip', str: '提示:密碼不能為空！', clickDomCancel: true, setTime: 10000500, hasBtn: true })
return;
}
$.ajax({
url: "/Login/Login",
type: "Post",
data: { "userName": userName, "passWord": passWord },
cache: false,
success: function (message) {
message ? "" +
new TipBox({
type: 'load', str: "努力載入中..", setTime: 1500, callBack: function () {
new TipBox({ type: 'success', str: '登陸成功', hasBtn: true })
}
})
+ "" : "" + new TipBox({ type: 'error', str: '登陸失敗!', hasBtn: true }) + ""
},
error: function () {
new TipBox({ type: 'tip', str: '提示:請稍後重試！', clickDomCancel: true, setTime: 10000500, hasBtn: true })
return;
}
});
})
</script>
控制器.cs：
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace DeveloperWebMvc.Controllers
{
public class LoginController : Controller
{
[HttpPost]
public JsonResult Login()
{
string userName = (string)Request["userName"];
string passWord = (string)Request["passWord"];
bool falg = (userName == "admin" && passWord == "123") ? true : false;
return Json(falg);
}
public ActionResult LoginView()
{
return View();
}
}
}
樣式.css：
.loginPageBody {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
.mainDiv {
position: absolute;
top: 50%;
left: 45%;
margin-top: -250px;
margin-left: -250px;
width: 600px;
height: 300px;
padding: 30px;
border: 1px solid rgb(204, 241, 251);
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
background: rgb(204, 241, 251);
-moz-box-shadow: 0 0 13px 3px rgb(204, 241, 251);
-webkit-box-shadow: 0 0 13px 3px rgb(204, 241, 251);
box-shadow: 0 0 13px 3px rgb(96, 144, 146);
overflow: hidden;
background: url("../../Images/Login/StartPage2.png") #14b1f6;
}
.loginDiv {
margin: 40px auto;
width: 400px;
height: 200px;
background: #D9BBA5;
opacity: 0.9;
padding-top: 15px;
}
.titleH3 {
margin-left: 50px;
color: #8B0000;
}
.idLable {
margin-left: 85px;
color: #8B0000;
font-size: 12px;
}
.pwdLable {
margin-left: 48px;
color: #8B0000;
font-size: 12px;
}
.userNameInput {
width: 120px;
margin-bottom: 10px;
border-radius: 0;
padding-left: 10px;
background-color: #fff;
}
.passWordInput {
width: 120px;
margin-bottom: 10px;
border-radius: 0;
padding-left: 10px;
background-color: #fff;
}
.loginButton {
border: none;
font-size: 14px;
font-weight: bold;
display: block;
background: url("../../Images/Login/rightarror.png")no-repeat 38px 18px #808080;
background-repeat: no-repeat;
background-size: 30% 30%;
text-align: left;
width: 15%;
height: 27%;
margin-left: 240px;
margin-top: -64px;
}
.messageBoxDiv {
text-align: center;
clear: both;
}
其他下載：