Публикация формы без @HTML.Beginform и использование JQuery (ajax) в asp.net MVC

Как заполнить форму без использования @HTML.Beginform и вместо этого использовать JQuery Ajax? Сейчас я попробовал:

    var postData = { form1: username, form2: password };

    $.ajax({
        type: "POST",
        url: '/Controller/Method',
        data: postData,
        dataType: "json",
        traditional: true
    });

Но после публикации браузер не перейдет к правильному виду. Конечно, я правильно вернул View() в контроллер. Используя Fiddler, я вижу, что он правильно размещен и ответ тоже верен...

У меня есть, чтобы использовать @HTML.Beginform или я могу сделать это с помощью Ajax?

Ответы

Ответ 1

Вы можете использовать либо тег HTML <form>, либо хелпер @HTML.BeginForm. Вот пример, используя только HTML

Готовое решение:

<form action"/Controller/Method" method="POST" id="signInForm">
    <input type="text" name="form1" />
    <input type="text" name="form2" />
    <input type="submit" value="Sign in" />
</form>

$( function() {
    $( 'signInForm' ).submit( function( evt ) {
        //prevent the browsers default function
        evt.preventDefault();
        //grab the form and wrap it with jQuery
        var $form = $( this );
        //if client side validation fails, don't do anything
        if( !$form.valid() ) return;
        //send your ajax request
        $.ajax( {
            type: $form.prop( 'method' ),
            url: $form.prop( 'action' ),
            data: $form.serialize(),
            dataType: "json",
            traditional: true,
            success: function( response ) {
                document.body.innerHTML = response;
            }
        });
    });
});

Я рекомендую использовать @Url.Action для установки URL-адреса вашего действия формы. Таким образом, маршрутизация может сгенерировать ваш URL.

<form action"@Url.Action("Method", "Controller")" method="POST" id="signInForm">
    <input type="text" name="form1" />
    <input type="text" name="form2" />
    <input type="submit" value="Sign in" />
</form>

Это немного более продвинутый, но я бы попытался использовать что-то вроде Take Command для управления вашими вызовами jQuery Ajax.

Отказ от ответственности, я являюсь участником проекта TakeCommand.

Ответ 2

Когда вы используете @Html.BeginForm, вывод HTML:

<form method="POST" action="/Controller/Method">

И когда вы отправляете эту форму, браузер обрабатывает ее так же, как и другую навигацию по страницам (только с использованием метода POST), поэтому ответ загружается в родительский фрейм.

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

Если вы хотите имитировать регулярное поведение представления формы, это будет примерно так:

$.ajax({
    type: "POST",
    url: '/Controller/Method',
    data: postData,
    dataType: "json",
    traditional: true,
    success: function(response)
    {
        document.body.innerHTML = response;
    }
});

Это не заменит весь контент страницы ответом (только содержимое BODY), но в большинстве случаев это будет нормально.

Ответ 3

Это сделает сообщение xhr на сервере и вернет представление как данные (ответ) Он не будет перемещаться, если он вернет html, вам нужно установить правильный тип данных в своем запросе, чтобы сообщить, что вы ожидаете возвращения html с сервера:

Учитывая, что ваше действие возвращает html, вы можете поместить возвращенный html на свою страницу в свою функцию успеха.

postData = "{'ID':'test'}";
$.ajax({
    type: "POST",
    url: '/Home/Test',
    data: postData,
    dataType: 'html',
    contentType: 'application/json',
    traditional: true,
    success: function (data) {
        $("#yourdomelement").html(data);
    }
});

В вашем действии

public ActionResult Test([FromBody]PostData id)
{
    return Content("<p>hello</p>");
}