asp.net的MVC的jQuery的Ajax部分页面更新问题
问题描述:
我有在Asp.net MVC 3剃须刀的部分页面更新的问题,我无法通过asp.net的MVC的jQuery的Ajax部分页面更新问题
让我有有2个文本框这个_LogOn局部视图电子邮件和密码,用于登录目的的按钮联接:
@using (Html.BeginForm())
{
@Html.ValidationSummary(true)
<div class="editor-label">
@Html.LabelFor(model => model.Email)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.Email)
@Html.ValidationMessageFor(model => model.Email)
</div>
<div class="editor-label">
@Html.LabelFor(model => model.Password)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.Password)
@Html.ValidationMessageFor(model => model.Password)
</div>
<p>
<input id="submitConnexion" type="submit" value="Connexion" />
<a id="lnForgetPwd"> Mot de passe oublié</a>
</p>
}
这里是控制器:该GET控制器不无非就是抓住_Logon partialV视图,并把它交给jQuery来更新一个div更叫DIV-2 。
// GET: Account/Logon
public ActionResult LogOn()
{
return PartialView("_LogOn");
}
的POST控制器应该检查密码是否正确,如果是,则返回到真实的Json值,如果登录/密码就可以了,otherwhise刷新DIV-2有错误。
// POST: Account/Logon
[HttpPost]
public ActionResult LogOn(UserLogon model)
{
bool result = false;
if (ModelState.IsValid)
{
UserManager userManager = new UserManager();
string password = userManager.GetUserPassword(model.Email);
if (string.IsNullOrEmpty(password))
{
ModelState.AddModelError("", "Mot de passe ou email incorrect.");
result = false;
}
if (model.Password == password)
{
FormsAuthentication.SetAuthCookie(model.Email, false);
result = true;
}
}
//return Json(new { JsResult = result });
return PartialView("_Logon", model);
}
这里是最后的Ajax jQuery代码
// Ajax call POST for login form button submitConnexion
$("#submitConnexion").live('click', function() {
var email = $("#div-2 #Email").val();
var password = $("#div-2 #Password").val();
var data = { Email: "hello", Password: password };
alert(email + password);
$.ajax({
url: "/Account/LogOn",
type: "POST",
//data: JSON.stringify(data),
//contentType: 'application/json; charset=utf-8',
success: function (result) {
alert("Hello");
$("#div-2").empty();
$("#div-2").html(result).hide().fadeIn(300);
}
});
});
// Ajax call POST for login form button
这是行不通的2个问题
- 每次我点击“联接”按钮,邮政控制器发射(我假设从@ html.Beginform的_Logon部分视图)而不是从Ajax Jquery
其结果是,在partialView显示,而不是在DIV-2
- 内显示我想更新DIV-2返回局部视图在登录/密码检查的情况下,一个新的互联网页面上失败,但我怎么能告诉动作控制器发送回JSON的结果为AJAX JQuery的如果登录/密码确定,而不是部分视图?
谢谢
答
好了一个问题,在一个时间
- 使用
'@Url.Action("ActionMethodName", "ControllerName")'
在网址:字段,一个是你做是不准确的。 - 来的第二个问题,多数民众赞成简单只需使用
dataType: "json"
数据后,你的Ajax代码块:即确保您可以返回JSON作为结果,而不是局部视图
答
的有,为什么你不使用任何理由Ajax.BeginForm而不是Html.BeginForm?你应该可以这样做:
@using (Ajax.BeginForm("LogOn", "Account", new AjaxOptions { UpdateTargetId = "div-2", OnBegin = "hideMessage", OnSuccess = "fadeInMessage" }))
其中hideMessage和fadeMessage是JS函数来隐藏和淡入你的div。
答
你应该挂钩的形式提交事件,而不是点击按钮的事件,并在提交处理你必须告诉浏览器不要简单地返回false或使用preventDefault()
像
$('form').live('submit',function(ev){
ev.preventDefault();//to stop normal form post
var email = $("#div-2 #Email").val();
var password = $("#div-2 #Password").val();
var data = { Email: "hello", Password: password };
alert(email + password);
$.ajax({
url: "/Account/LogOn",
type: "POST",
data: JSON.stringify(data),
contentType: 'application/json; charset=utf-8',
dataType:'json',
success: function (result) {
alert("Hello");
$("#div-2").empty();
$("#div-2").html(result).hide().fadeIn(300);
}
});
//return false; you can simply uncomment this line and remove ev.preventDefault() to get same result
});
去正常后回