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的内容，然后调用回调函数（在这种情况下，它只会弹出一个警报），并显示一个很好的“正在加载...”消息在我们等待回应的时候。

其次，提交表格：

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

再一次，这会调用一个控制器动作，但这次它使用给定表单的数据（＆lt; form id =“myForm”＆gt;）进行POST，序列化为“input1 = value1＆amp; input2 = value2＆amp; ... ＆amp; 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更新。
这是extensible。
这是thoroughly tested。

使用ASP.NET MVC和jQuery呈现部分视图/提交表单而不刷新页面

1 个答案: