Javascript 使用ASP.NET MVC和jQuery在不刷新页面的情况下呈现部分视图/提交表单

我不熟悉ASP.NETMVC和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();
    });
}

这将把返回的任何操作（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();
        }
    );
}

用法：

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

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

再次调用控制器操作，但这次它使用序列化为“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);
}

public ActionResult MyAction（FormCollection表单）
{
//例如TryUpdateModel（this.myActionViewModel）；
//或
//使用表单[“input1”]执行某些操作。。。
返回PartialView（“MyPartialView”，this.myActionViewModel）；
}

返回的HTML再次呈现到myDiv中，并调用回调函数

我还没有添加任何验证，但是基本功能非常好，但是如果有更好的方法，请分享：）

我只使用：

• 它更灵活，允许在一个请求中进行多个DOM更新
• 是的
• 是的

---

对我来说，这更像是一篇博文，而不是一个问题。@Mauricio Scheffer-两者兼而有之，我想知道我做的事情是否正确。