javascript - 使用 ASP.NET MVC 和 jQuery 渲染部分 View /提交表单而无需刷新页面

Question

我是 ASP.NET MVC 和 jQuery 的新手，所以我想分享一下我如何实现加载部分 View 并以不需要刷新整个页面的方式提交表单。如果有更好的方法，我希望得到专家的批评:)

所有的魔力都是由 3 个 javascript 函数完成的，我将它们绑定(bind)到各种事件，例如按钮单击、jQueryUI 选项卡选择等。

首先，这就是我获得部分 View 的方式:

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!'); }); 

这再次调用 Controller 操作，但这次它使用序列化为“input1=value1&input2=value2&...&inputn=valuen”的给定表单数据 (

) 执行 POST，允许操作对用户输入执行某些操作，如下所示:

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。
• 这是 extensible .
• 这是 thoroughly tested .