UI issues for partial view
Below Ajax Action Link calls Controller action and returns result in partial view. The problem is when I click on the Academic Data link that generates the result and the partial view div again. I want to prevent this from happening.
Can you suggest any simple kind of jQuery tab to solve this problem. I used one, but it fires the controller for every link click, does it work for normal DIV.
@Ajax.ActionLink(
"Academic Details",
"GetAcademicInfo",
"Employee", new { empId = Model.Id },
new AjaxOptions { UpdateTargetId = "AcademicDetails", InsertionMode = InsertionMode.InsertBefore },
new { @id = "AcademicDetailsLink" }
)
source to share
One thing you can do is have a div with a specific 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 every click on other divs, here's how you would do it with jQuery:
<script>
$('#AcademicDetailsLink').click(function(){
$('#OtherDetailsDivId').hide();
$('#AcademicDetails').show();
});
$('#OtherDetailsLinkId').click(function(){
$('#OtherDetailsDivId').show();
$('#AcademicDetails').hide();
});
</script>
You will need to do this for each link.
source to share
Make insert mode InsertionMode = InsertionMode.Replace
. This way every click will just replace that div again instead of adding the same content on every click
@Ajax.ActionLink(
"Academic Details",
"GetAcademicInfo",
"Employee", new { empId = Model.Id },
new AjaxOptions { UpdateTargetId = "AcademicDetails", InsertionMode = InsertionMode.Replace },
new { @id = "AcademicDetailsLink" }
)
source to share