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

Question

Я пытаюсь использовать помощник Ajax.BeginForm ASP.NET MVC, но не хочу использовать существующие параметры вставки содержимого после завершения вызова. Вместо этого я хочу использовать пользовательскую функцию 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" />
<%} %>

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

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

Answer 1

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

В вашем Ajax.BeginForm:

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

Блок скриптов:

<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's where you use the JSON object
        //doSomethingUseful(data);
    }

//]]>
</script>

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

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

Answer 2

Попробуйте это:

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

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

Answer 3

Я использую:

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

Answer 4

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

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

Answer 5

Попробуйте использовать следующий код:

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