jquery - 部分 View 渲染的 UI 问题

Question

下面的 Ajax 操作链接调用 Controller 操作并在分部 View 中返回结果。问题是，我多次点击操作链接“学术详细信息”，它会再次生成结果和具有部分 View 的 div。我想阻止这种情况。

您能建议任何简单的 jQuery Tab View 来解决这个问题吗？我已经使用过一个，但每次点击链接时它都会触发 Controller ，无论它是否适用于普通 DIV。

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

Answer 1

您可以做的一件事是为每个 ajax 链接设置一个具有特定 id 的 div 并使用 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>

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