使用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中显示一个很好的“Loading ...”消息，同时等待响应。

其次，提交表单：

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（<形式id =“myForm”>）序列化为“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更新。
• 这是extensible。
• 这是thoroughly tested。