UI issues for partial view rendering

Question

The below Ajax Action Link calls a Controller Action and returns the result within a partial view. The problem is as many times I click on the Action Link "Academic Details" it generates the result and div with partial view again. I want to prevent this.

Can you suggest any simple jQuery Tab view to solve this please. I've used one but it fires the controller for each click on link whether it works for the normal DIV.

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

Answer 1

One thing you can do is to have a div with a particular id for each ajax link and use InsertionMode = InsertionMode.Replace. For example

@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>

If you want to show and hide on each click the other divs, here's how you do it with jQuery:

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

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

You'll have to do this for each link.