В результате Json выводит диалоговое окно «Сохранить как» в браузере вместо обработки ASP.NET MVC

Question

Я знаю, что это было проблемой для других, но я еще не нашел ничего, что решило бы мою проблему.

У меня есть частичный вид, который отображается в лайтбоксе (colorbox). Это простая форма. Я хочу, чтобы форма отправляла и возвращала немного данных. Данные будут использоваться при вызове последующих функций, и я хочу, чтобы основной DIV просто обновлялся сообщением об «успехе». Вот полный код частичного просмотра:

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<Solution2.Models.Category>" %>

<script type="text/javascript">
    $('propcatform').submit(function(e) {
        e.preventDefault();

        $.ajax({
            type: "POST",
            url:  $(this).attr("action"),
            data: $(this).serialize(),
            dataType: "json",
            contentType: "application/json; charset=utf-8",
            success: function(data) { document.getElementById('main1').innerHTML = "Success"; },
            failure: function() { document.getElementById('main1').innerHTML = "Failure"; }
        })
    });
    </script>

    <% using (Html.BeginForm(null, null, FormMethod.Post, new { id = "propcatform", name = "propcatform" }))
       {%>
        <div id="main1">
        <fieldset>
            <legend>Fields</legend>
            <p>
                <label for="CatTitle">Category Title:</label>
                <%= Html.TextBox("CatTitle") %>
                <%= Html.ValidationMessage("CatTitle", "*") %>
            </p>
            <p>
                <input type="submit" value="Create" />
            </p>
        </fieldset>
        </div>

    <% } %>

Вот мой код контроллера. Код работает, поскольку он успешно добавляет данные формы в таблицу / базу данных. Как именно должна выглядеть моя «обратная» строка?

[AcceptVerbs(HttpVerbs.Post)]
        public JsonResult Create(Category propcat)
        {

            Category resultcat = new Category();
            _db.Categories.InsertOnSubmit(propcat);
            _db.SubmitChanges();
            resultcat = propcat;
            return Json(new { CatID = resultcat.CatID, CatTitle = resultcat.CatTitle, message = "Category successfully created!" });
        }

В настоящее время я на самом деле не использую какие-либо данные результата в моем коде частичного просмотра (хотя я ссылаюсь на него в своем параметре «success»). Я просто пытаюсь заставить его работать (и не предлагает мне сохранить результаты).

Спасибо.

Answer 1

Обычно вы не собираетесь возвращать Json в браузер пользователя напрямую через обычную отправку формы. Это отличный способ передать информацию, которую вы планируете внутренне переварить (как вы описываете), но при выполнении того, что вы показываете выше, пользователь получит данные Json, которые выглядят просто как ... как настроен браузер, может появиться диалоговое окно «Сохранить как».

В вашем примере вы можете попытаться использовать действие по умолчанию, которое будет возвращать представление Create и иметь такую ​​проверку:

if (Request.IsAjaxRequest())
{
  return Json(.......);
}
else
{
  return View(....);
}

... и измените тип возврата функции на ActionResult.

Это гарантирует, что при начальной загрузке страницы отображается фактический вид. Ajax-вызовы на ту же страницу (из кнопок на странице) вернут только те данные Json, которые вас интересуют.

UPDATE:

Если в действии должна отображаться та же страница, за исключением обновленного содержимого Json, я бы рекомендовал не использовать кнопку «Отправить». Просто используйте обычную кнопку ввода и привяжите действие щелчка к вашему вызову jQuery.ajax. Данные будут получены из действия Create/POST и будут заполнены согласно предложению success: в вызове Ajax.

Answer 2

У меня была такая же проблема, и это сработало для меня:

return new JsonResult
{
  ContentType = "text/html",
  Data = new { foo = 1, bar = "Something" }
};

Явно создайте новый объект JsonResult, установите ContentType и верните его вместо использования метода Json.

Answer 3

Используйте Firefox + Firebug.