使用jQuery发送部分视图模型和更新部分视图存在问题
我在其他视图模型中使用局部视图用于小模型。 所以我通过从包装器表单中获取模型数据并使用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" })) { @Html.Partial("[partialViewName]", [partialViewModelName]) }
问题之一是更新后的部分视图与返回的结果不起作用任何绑定到局部内部元素的jQuery事件处理程序,我知道事件处理程序必须在主视图中声明而不是部分,并且必须委托处理程序。 第二个问题是更新结果有新值,但部分视图中的一些元素显示旧值,我将ajax的缓存设置为false,作为[OutputCache(Duration = 0)]
的操作缓存。 我很困惑。 谁能帮我。
您的第一个问题是因为您必须重新添加您的事件处理程序。 我假设您在页面加载时在$(document).ready
或等效内容中添加事件处理程序。 在使用$ .ajax刷新部分后,具有事件处理程序的原始元素不再存在 – 它们的实例已被替换,因此事件处理程序不会触发。 您需要在行之后重新添加事件处理程序作为success
回调的一部分:
$('#pa_Cnt').html(sucResult);
不确定第二个问题..
我找到了。 感谢@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(); }
我不知道这是好还是有任何其他问题。 现在它解决了我的问题。 我正在等待新的评论和建议。 非常感谢。