部分视图渲染的UI问题

LazyLoading 发表于 Dev

延迟加载

下面的Ajax Action链接调用Controller Action，并在局部视图中返回结果。问题是，我多次单击操作链接“ Academic Details”，它会生成结果并再次使用局部视图进行div。我想防止这种情况。

您能否建议任何简单的jQuery Tab视图来解决此问题。我用过一个，但是它为链接的每次点击触发了控制器，无论它是否适用于普通DIV。

@Ajax.ActionLink(
    "Academic Details",
    "GetAcademicInfo",
    "Employee", new { empId = Model.Id },            
    new AjaxOptions { UpdateTargetId = "AcademicDetails", InsertionMode = InsertionMode.InsertBefore },
    new { @id = "AcademicDetailsLink" }
)

Rui

您可以做的一件事是为每个ajax链接使用一个div，并为其指定特定的ID InsertionMode = InsertionMode.Replace。例如

@Ajax.ActionLink(
    "Academic Details",
    "GetAcademicInfo",
    "Employee", new { empId = Model.Id },            
    new AjaxOptions { UpdateTargetId = "AcademicDetails", InsertionMode = InsertionMode.Replace},
    new { @id = "AcademicDetailsLink" }
)
<div id="AcademicDetails"></div>

@Ajax.ActionLink(
    "Other Details",
    "GetOtherInfo",
    "Employee", new { empId = Model.Id },            
    new AjaxOptions { UpdateTargetId = "OtherDetailsDivId", InsertionMode = InsertionMode.Replace},
    new { @id = "OtherDetailsLinkId" }
)
<div id="OtherDetailsDivId"></div>

如果要在每个div上单击显示或隐藏，则使用jQuery的方法如下：

<script>
$('#AcademicDetailsLink').click(function(){
  $('#OtherDetailsDivId').hide();
  $('#AcademicDetails').show();
});

$('#OtherDetailsLinkId').click(function(){
  $('#OtherDetailsDivId').show();
  $('#AcademicDetails').hide();
});
</script>

您必须为每个链接执行此操作。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。