I have a table in my code with action links to make updates and deletes of some data. And this table is inside a div that has to change when i make the updates or deletes.
The problem is: when i click those actionlinks, i have some ajax propagation. I tried to stop that propagation linking the click event with the jquery method stopPropagation. And it works, but when the page loads, it loads only with the elements of the partial view. So i have no order in the elements, and it does not use the layout. Even, the url changes into the one specified in the ajax options of the actionlink. When i do not use the stop propagation, it works well and all the elements loads well, using the layout, but the propagation exists (the more i use the page, it gets slower, so is a problem)
View Page:
<div id="divToUpdate">
@using (Ajax.BeginForm("LanguageSkills", "Employee",
new AjaxOptions
{
OnFailure = "searchFailed",
HttpMethod = "POST",
UpdateTargetId = "divtoUpdate",
OnBegin = "validateForm",
}))
{
Html.RenderPartial("PartialViewButtons");
Html.RenderPartial("PartialViewLanguageSkillsForm", Model);
}
@if (ViewBag.Languages == 1)
{ Html.RenderPartial("PartialViewLanguageTable"); }
</div>
Partial View with the table:
<table id="LanguageTable">
<tr>
<th align="center">Language</th>
<th align="center">Skill 1</th>
<th align="center">Skill 2</th>
<th align="center">Skill 3</th>
<th align="center">Skill 4</th>
</tr>
@foreach (var item in (List<Project.Models.Language>)ViewBag.LanguageSkills)
{
<tr>
<td align="center">
@Html.DisplayFor(modelItem => item.Language.Language1)
</td>
<td align="center">@Html.DisplayFor(modelItem => item.Skill1)</td>
<td align="center">@Html.DisplayFor(modelItem => item.Skill2)</td>
<td align="center">@Html.DisplayFor(modelItem => item.Skill3)</td>
<td align="center">@Html.DisplayFor(modelItem => item.Skill4)</td>
</tr>
@Ajax.ActionLink("Modify", "ModifyLanguage", "Employee", new { id = item.LanguageId},
new AjaxOptions {
UpdateTargetId = "divtoUpdate",
OnBegin = "validateForm",
HttpMethod="GET"
}, new {@class = "ModifyLink"})
@Ajax.ActionLink("Delete", "DeleteLanguage", "Employee", new { id = item.LanguageId },
new AjaxOptions {
HttpMethod="POST",
}, new { @class = "DeleteLink" })
</td>
</tr>
}
</table>
And Finally the javascript in the Partial View:
$($('.ModifyLink')).load(function (event) {
event.stopImmediatePropagation();
});