Возвращение объекта Json из действия контроллера в jQuery
Я пытаюсь сделать это правильно (2 дня). Я работаю над журналом, где я вызываю действие контроллера из jQuery, передавая ему объект JSON (используя json2.js) и возвращаю объект Json из контроллера. Я могу назвать действие прекрасным, но вместо того, чтобы помещать ответ, где я его хочу, он просто открывает новое окно с этим, напечатанным на экране:
{"Message":"Invalid username/password combination"}
И URL-адрес выглядит как http://localhost: 13719/Account/LogOn, поэтому вместо вызова действия и не перезагрузки страницы он берет пользователя на контроллер, что плохо.
Итак, теперь для некоторого кода сначала код контроллера
[HttpPost]
public ActionResult LogOn(LogOnModel model, string returnUrl = "")
{
if (ModelState.IsValid)
{
var login = ObjectFactory.GetInstance<IRepository<PhotographerLogin>>();
var user = login.FindOne(x => x.Login == model.Username && x.Pwd == model.Password);
if (user == null)
return Json(new FailedLoginViewModel { Message = "Invalid username/password combination" });
else
{
if (!string.IsNullOrEmpty(returnUrl))
return Redirect(returnUrl);
else
return RedirectToAction("Index", "Home");
}
}
return RedirectToAction("Index", "Home");
}
И код jQuery
$("#signin_submit").click(function () {
var login = getLogin();
$.ajax({
type: "POST",
url: "../Account/LogOn",
data: JSON.stringify(login),
dataType: 'json',
contentType: 'application/json; charset=utf-8',
error: function (xhr) {
$("#message").text(xhr.statusText);
},
success: function (result) {
}
});
});
function getLogin() {
var un = $("#username").val();
var pwd = $("#password").val();
var rememberMe = $("#rememberme").val();
return (un == "") ? null : { Username: un, Password: pwd, RememberMe: rememberMe };
}
Если вам нужна реальная форма входа здесь, а также
<fieldset id="signin_menu">
<div>
<span id="message"></span>
</div>
<% Html.EnableClientValidation(); %>
<% using (Html.BeginForm("LogOn", "Account", FormMethod.Post, new { @id = "signin" }))
{%>
<% ViewContext.FormContext.ValidationSummaryId = "valLogOnContainer"; %>
<%= Html.LabelFor(m => m.Username) %>
<%= Html.TextBoxFor(m => m.Username, new { @class = "inputbox", @tabindex = "4", @id = "username" })%><%= Html.ValidationMessageFor(m => m.Username, "*")%>
<p>
<%= Html.LabelFor(m=>m.Password) %>
<%= Html.PasswordFor(m => m.Password, new { @class = "inputbox", @tabindex = "5", @id = "password" })%><%= Html.ValidationMessageFor(m => m.Password, "*")%>
</p>
<p class="remember">
<input id="signin_submit" value="Sign in" tabindex="6" type="submit"/>
<%= Html.CheckBoxFor(m => m.RememberMe, new { @class = "inputbox", @tabindex = "7", @id = "rememberme" })%>
<%= Html.LabelFor(m => m.RememberMe) %>
<p class="forgot"> <a href="#" id="forgot_password_link" title="Click here to reset your password.">Forgot your password?</a> </p>
<p class="forgot-username"> <a href="#" id="forgot_username_link" title="Fogot your login name? We can help with that">Forgot your username?</a> </p>
</p>
<%= Html.ValidationSummaryJQuery("Please fix the following errors.", new Dictionary<string, object> { { "id", "valLogOnContainer" } })%>
<% } %>
</fieldset>
Форма входа загружается на главной странице с помощью
<% Html.RenderPartial("LogonControl");%>
Не уверен, что это имеет какое-либо отношение к этому или нет, но я думал, что упомянул об этом.
РЕДАКТИРОВАТЬ: Форма входа загружается аналогично имени входа в Twitter, щелкните ссылку и загрузите форму с помощью jQuery и CSS
Ответы
Ответ 1
Размышляя о том, что @user350374 сказал о создании подписи моего действия JsonResult вместо ActionResult, я немного потрудился и модифицировал свое первоначальное решение для использования JsonResult и сделал все проверки/перенаправления в jQuery, а не в действии.
Мое действие изменилось на
[HttpPost,MoveFormsScript]
public JsonResult LogOn(LogOnModel model, string returnUrl = "")
{
if (ModelState.IsValid)
{
var login = ObjectFactory.GetInstance<IRepository<PhotographerLogin>>();
var user = login.FindOne(x => x.Login == model.Username && x.Pwd == model.Password);
if (user == null)
return Json(new LoginResult { Success = false, Message = "Invalid login" });
else
{
return Json(new LoginResult
{
Success = true,
Message = "Redirecting...",
ReturnUrl = (!string.IsNullOrEmpty(returnUrl)) ? returnUrl : string.Format("Account/Index/{0}", user.Photographer.Key)
});
}
}
else
{
return Json(new LoginResultDTO { Success = false, Message = "Incomplete fields" });
}
}
И мой вызов jQuery для
$("#signin_submit").click(function () {
var f = $($("form")[0]);
f.submit(function () {
var loginData = f.serialize();
$.post(f.attr("action"), loginData, function (result, status) {
if (!result.Success) {
$("#message").text(result.Message);
$("#username").focus();
$("#username").select();
}
else {
window.location.replace(result.ReturnUrl);
}
}, "json");
return false;
});
});
LoginResult - это простой класс, чтобы удерживать части
public class LoginResult
{
public bool Success { get; set; }
public string Message { get; set; }
public string ReturnUrl { get; set; }
}
Спасибо за подсказку @user35037, теперь у меня есть 2 способа приблизиться к этому в будущем.
Ответ 2
Ваша сигнатура действия будет выглядеть следующим образом:
public virtual JsonResult ActionName()
{
var abcObj = new ABC{a=1,b=2};
return Json(abcObj);
}
Ответ 3
Если вы используете MVC 2, вам нужно вернуть что-то вроде этого:
return Json(your_object, JsonRequestBehavior.AllowGet);
Я нашел здесь
Для другого использования, вот мой код.
JQuery:
$(document).ready(function () {
$("#InputDate").live('click', function () {
var date = $("#InputDate").val();
if (date != "") {
$.getJSON("/Home/GetNames",
{ date: $("#InputDate").val() },
function (data) {
$("#ProviderName").empty();
// [...]
});
});
}
});
});
И С#
public JsonResult GetNames(string date)
{
List<Provider> list = new List<Provider>();
// [...]
return Json(list, JsonRequestBehavior.AllowGet);
}
Ответ 4
Ok придумал резолюцию, которую, как я думал, я поделюсь здесь, если кто-то придет вместе с проблемой simliar. Вместо использования $.ajax я переключился на использование $.post и изменил код jQuery, чтобы выглядеть так, и все работает так, как я и ожидал:
$("#signin_submit").click(function () {
var f = $($("form")[0]);
f.submit(function () {
var loginData = f.serialize();
$.post(f.attr("action"), loginData, function (result, status) {
if (!result.Success) {
$("#message").text(result.Message);
}
}, "json");
return false;
});
});
Спасибо всем, кто посмотрел на мой вопрос, и на @kerrubin, поскольку я не знал об этой проблеме.