Использование ASP.NET MVC и jQuery для частичного просмотра / отправки формы без обновления страницы

Question

Я новичок в ASP.NET MVC и jQuery, поэтому я подумал, что поделюсь, как я реализовал загрузку частичных представлений и отправку форм таким образом, чтобы не требовалось обновления всей страницы. Я надеюсь получить некоторую критику от экспертов, если есть лучший способ сделать это :)

Вся магия совершается с помощью 3 функций javascript, которые я связываю с различными событиями, такими как нажатие кнопки, выбор вкладки jQueryUI и т. Д.

Во-первых, вот как я получаю частичное представление:

function showAjaxMessage(targetDiv, ajaxMessage) {    
    var ajaxLoader = "<img src='Content/loader.gif' alt=''>";
    $(targetDiv).html("<p>" + ajaxLoader + " " + ajaxMessage+"</p>"); 
}

function getPartialView(actionUrl, targetDiv, ajaxMessage, callback) {
    showAjaxMessage(targetDiv, ajaxMessage);

    $.get(actionUrl, null, function(result) {
        $(targetDiv).html(result);
        callback();
    });
}

Использование:

getPartialView("MyController/MyAction", "#myDiv", "Loading...", function() { alert('Loaded!'); });

Это установит любое возвращаемое действие (PartialView) в качестве содержимого myDiv, а затем вызовет функцию обратного вызова (в этом случае это просто вызовет предупреждение) с красивым сообщением «Загрузка ...», отображаемым в div, пока мы ждем ответа.

Во-вторых, отправив форму:

function submitForm(actionUrl, targetDiv, ajaxMessage, form, callback) {

    var data = $(form).serialize();
    showAjaxMessage(targetDiv, ajaxMessage);
    $.post(
        actionUrl,
        data,
        function(data) {
            $(targetDiv).html(data);
            callback();
        }
    );
}

Использование:

submitForm("MyController/MyAction", "#myDiv", "Submitting...", "#myForm", function() { alert('Submitted!'); }); 

Еще раз, это вызывает действие контроллера, но на этот раз он выполняет POST с данными данной формы (), сериализованными как "input1 = value1 & input2 = value2 & ... & inputn = valuen", что позволяет действию что-то делать с пользовательским вводом, например:

public ActionResult MyAction(FormCollection form)
{
    // eg. TryUpdateModel<MyActionViewModel>(this.myActionViewModel);
    // or 
    // do something with form["input1"] ...

    return PartialView("MyPartialView", this.myActionViewModel);
}

Возвращенный HTML-код снова отображается в myDiv, и вызывается функция обратного вызова.

Я еще не добавил никакой проверки, но основы работают довольно хорошо, но если есть лучший способ, пожалуйста, поделитесь:)

Answer 1

Я бы просто использовал jQuery.taconite :

• это более гибко, позволяя несколько обновлений DOM в одном запросе.
• Это расширяемый .
• Это тщательно проверено .