Как использовать помощник MVC Ajax.BeginForm с результатом JSON?

Я пытаюсь использовать помощник ASP.NET MVC Ajax.BeginForm, но не хочу использовать существующие параметры вставки содержимого, когда вызов завершается. Вместо этого я хочу использовать пользовательскую функцию JavaScript в качестве обратного вызова.

Это работает, но результат, который я хочу, должен быть возвращен как JSON. К сожалению, структура просто обрабатывает данные как строку. Ниже приведен код клиента. Код сервера просто возвращает JsonResult с одним полем, UppercaseName.

<script type='text/javascript'>
    function onTestComplete(content) {
        var result = content.get_data();
        alert(result.UppercaseName);
    }
</script>

<% using (Ajax.BeginForm("JsonTest", new AjaxOptions() {OnComplete = "onTestComplete" })) { %>
    <%= Html.TextBox("name") %><br />
    <input type="submit" />
<%} %>

Вместо того, чтобы показывать результат в верхнем регистре, вместо него отображается undefined. content.get_data(), похоже, содержит JSON, но только в строковой форме. Как мне преобразовать это в объект?

Все это кажется немного запутанным. Есть ли лучший способ получить полученный контент с помощью Ajax.BeginForm? Если это сложно, я могу полностью пропустить Ajax.BeginForm и просто использовать библиотеку форм jQuery.

Ответ 1

Попробуйте следующее:

var json_data = content.get_response().get_object();

это даст вам результат в формате JSON, и вы можете использовать json_data[0] для получения первой записи

Ответ 2

Вы можете использовать OnFailure и OnSuccess вместо OnComplete; OnSuccess дает вам данные как надлежащий объект JSON. Вы можете найти сигнатуры метода обратного вызова, помещенные в ~/Scripts/jquery.unobtrusive-ajax.min.js, которые вы должны загрузить на своей странице.

В Ajax.BeginForm:

new AjaxOptions
    {
        OnFailure = "onTestFailure",
        OnSuccess = "onTestSuccess"
    }

Script block:

<script>
//<![CDATA[

    function onTestFailure(xhr, status, error) {

        console.log("Ajax form submission", "onTestFailure");
        console.log("xhr", xhr);
        console.log("status", status);
        console.log("error", error);

        // TODO: make me pretty
        alert(error);
    }

    function onTestSuccess(data, status, xhr) {

        console.log("Ajax form submission", "onTestSuccess");
        console.log("data", data);
        console.log("status", status);
        console.log("xhr", xhr);

        // Here where you use the JSON object
        //doSomethingUseful(data);
    }

//]]>
</script>

Эти подписи соответствуют success и error обратным вызовам в $.ajax(...), что, возможно, не является таким сюрпризом.

Это было протестировано с помощью asp.net-mvc-3 с jquery 1.6.3 и 1.7.2.

Ответ 3

Попробуйте использовать приведенный ниже код:

<script type='text/javascript'>
    function onTestComplete(content) {
        var result = eval( '(' + content.get_data() + ')' );
        alert(result.UppercaseName);
    }
</script>

Ответ 4

Я использую:

    function onTestComplete(data, status, xhr) {
       var data2 = JSON.parse(data.responseText);
       //data2 is your object
    }

Ответ 5

Убедитесь, что вы включили MicrosoftAjax.js и MicrosoftMvcAjax.js. Затем используйте следующие вызовы в возвращаемом контексте, чтобы получить объект json из возврата.

var json = context.get_data();
var data = Sys.Serialization.JavaScriptSerializer.deserialize(json);