Как вернуть результат JSON в MVC2 на пост

Question

Я использую метод публикации ajax для отправки формы, например: -

$ (function () {

        $('#BtnName').submit(function () {
            $.ajax({
                url: 'Home/Index',
                type: "POST",
                data: $(this).serialize(),
                dataType: "json",
                async:false,
                contentType: 'application/json; charset=utf-8',
                success: function (data) { var message = data.Result; $("#Result").html(message); },


            });
            return false;
        });
    });

На контроллере действий я возвращаюсь

return Json (new {Result = "Success"}, JsonRequestBehavior.AllowGet);

Я не могу получить Результат в div; вместо этого он возвращает всю страницу рендеринга как полный файл. Пожалуйста, скажите мне, что я должен сделать, чтобы показать результат на странице, а также хотите, чтобы на той же странице, без очистки формы.

Answer 1

ОК, биты кода, содержащиеся в вашем вопросе, абсолютно недостаточны, чтобы делать какие-либо выводы. Итак, давайте сделаем полный пример.

Модель:

public class MyViewModel
{
    public string Foo { get; set; }
}

Контроллер:

public class HomeController : Controller
{
    public ActionResult Index()
    {
        return View(new MyViewModel());
    }

    [HttpPost]
    public ActionResult Index(MyViewModel model)
    {
        // TODO : process the model ...

        return Json(new { Result = "Success" });
    }
}

Вид:

<% using (Html.BeginForm(null, null, FormMethod.Post, new { id = "myForm" })) { %>
    <%= Html.LabelFor(x => x.Foo) %>
    <%= Html.EditorFor(x => x.Foo) %>
    <input type="submit" value="Save" />
<% } %>

Внешний javascript, чтобы ненавязчиво AJAXify форму:

$(function () {
    $('#myForm').submit(function () {
        $.ajax({
            url: this.action,
            type: this.method,
            data: $(this).serialize(),
            success: function (data) {
                var message = data.Result; 
                $('#Result').html(message);
            }
        });
        return false;
    });
});

На что обратить внимание:

• Я прикрепляю событие .submit к if формы (#myForm), тогда как в вашем примере вы используете #BtnName, что выглядит странно подозрительным именем для формы. К сожалению, вы не показали свою разметку, поэтому мы не знаем, что она на самом деле представляет
• Я больше не пишу URL формы (Home/Index), а использую Html.BeginForm. Это дает два преимущества: 1. теперь вы можете поместить свой javascript в отдельный файл => вы больше не смешиваете разметку и сценарий, и ваши HTML-страницы теперь становятся меньше и быстрее загружаются (внешние статические файлы javascript кэшируются) и 2 . когда вы развертываете свое приложение на каком-либо другом сервере или решаете изменить маршруты, оно все равно будет работать без каких-либо изменений на вашем js.
• Я больше не использую contentType: 'application/json', потому что когда вы используете $(this).serialize(), это не сериализует форму в JSON. Он сериализует его в стиле application/x-www-form-urlencoded. Итак, вы в основном вводите противоречие: вы говорите серверу, что отправите запрос JSON, но на практике это не так.
• Я удалил атрибут async: false, поскольку он выполняет синхронный запрос и замораживает браузер во время его выполнения. Это больше не AJAX. Поэтому, если вы не хотите этого, не используйте его.
• Я удалил параметр dataType: 'json', так как jQuery достаточно умен, чтобы вывести его из фактического заголовка Content-Type ответа, автоматически проанализировать возвращенный JSON и передать его в обратный вызов успеха в качестве объекта javascript, который вы можете напрямую использовать.