Question

以下Ajax Action Link调用Controller Action并在局部视图中返回结果。问题是我多次点击Action Link＆＃34; Academic Details＆＃34;它再次生成部分视图的结果和div。我想阻止这个。

你能否建议任何简单的jQuery Tab视图来解决这个问题。我已经使用了一个，但它会在链接上每次点击时触发控制器是否适用于正常的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>

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

Answer 2

将插入模式设为InsertionMode = InsertionMode.Replace。这样每次点击只会再次替换该div，而不是在每次点击时添加相同的内容

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

部分视图渲染的UI问题

2 个答案: