使用jQuery发送部分视图模型和更新部分视图存在问题

时间:2014-04-12 16:40:28

标签: c# jquery asp.net-mvc-partialview

我在其他视图模型中使用小模型的局部视图。所以我通过从包装器表单中获取模型数据并使用serializeArray()来发送它的更改。然后从动作返回PartialViewResult,最后通过返回的结果填充部分视图div容器。这是我的代码:

var modelStr = $("#[wrapperFormName]").serializeArray();
$.ajax({
type: "POST",
url: targetUrl,
cache: false,
data: modelStr,
success: function (sucResult) {
$('#pa_Cnt').html(sucResult);
},
fail: function (result) {
alert("Fail");
}
});

并在视图中呈现partialview:

@using (Html.BeginForm("[ActionName]", "[CtrlName]", FormMethod.Post, new { id = "[wrapperFormName]", @enctype = "multipart/form-data" }))
{
    <div id="[partialcontainerName]">
        @Html.Partial("[partialViewName]", [partialViewModelName])
    </div>
}

其中一个问题是更新部分视图后返回结果不能使用任何绑定到partial内部元素的jQuery事件处理程序,我知道事件处理程序必须在主视图中声明而不是部分声明,并且必须委托处理程序。 第二个问题是更新结果有新值,但部分视图中的一些元素显示旧值,我将ajax的缓存设置为false,作为[OutputCache(Duration = 0)]的操作缓存。 我很困惑。任何人都可以帮助我。

2 个答案:

答案 0 :(得分:1)

您的第一个问题是因为您必须重新添加您的事件处理程序。我假设您在$(document).ready内添加事件处理程序或在页面加载时添加等效事件处理程序。在使用$ .ajax刷新部分内容之后,具有事件处理程序的原始元素不再存在 - 它们的实例已被替换,因此事件处理程序不会被激活。您需要在行后的success回调中重新添加事件处理程序:

$('#pa_Cnt').html(sucResult);

不确定第二个问题..

答案 1 :(得分:1)

我找到了。感谢@David的第一期。我将委托事件的内部操作分离到指向变量名称的函数,并在更新部分返回结果的html后将委托事件附加到它们。这是一个简单的样本:

var sampleHandler = function() { //some code }

然后在ajax成功:

success: function (sucResult) {
         $('#pa_Cnt').html(sucResult);
         $("[parentClassNameSelector]").on("click", '[childSelector]', sampleHandler);
   }

关于第二个问题MVC的ModelState是Guilty。 :)特别是在由mvc帮助器呈现的元素中。所以我决定在控制器动作中这样做。

if (ModelState.IsValid) { ModelState.Clear(); }

我不知道这是好还是有任何其他问题。现在它解决了我的问题。我正在等待新的评论和建议。非常感谢。