I have a table in my code with links to actions to make updates and delete some data. And this table is inside the div, which should change when I make updates or delete.
The problem is this: when I click on these actionlinks, I have some ajax spread. I tried to stop the propagation associated with the click event using the jQuery stopPropagation method. And it works, but when the page loads, it only loads with partial view elements. Therefore, I have no order in the elements, and it does not use a layout. Even, the url changes to the one specified in the ajax actionlink parameters. When I do not use stop spreading, it works well, and all elements load well using layout, but spreading exists (the more I use the page, the slower, so this is a problem)
Pageview:
<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 following 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, javascript in partial view:
$($('.ModifyLink')).load(function (event) { event.stopImmediatePropagation(); });