Asp.net 嵌套的Ajax.Actionlink（InsertionMode.insertafter导致一些混乱）

我的应用程序中有3个视图（1个主视图、1个局部视图、1个嵌套局部视图），我经常一次又一次地调用partial（从主视图）和嵌套局部视图（从局部视图）

• 主视图中使用的ActionLink
  

  @Ajax.ActionLink（“创建新包”、“创建包”、“测试”，
  新选择
  {
  InsertionMode=InsertionMode.InsertAfter，
  HttpMethod=“post”，
  UpdateTargetId=“newPackage”
  })`
  

  
  此操作链接的流程：：当我（一次又一次）单击此链接时，每次单击id=“newPackage”后都会添加新的部分邮件视图（createPackage）
  
  

• createPackage部分视图中使用的ActionLink（单击主视图中的链接后呈现的视图）
  

  
  @ActionLink（“添加检查”、“添加其他检查”、新AjaxOptions{InsertionMode=InsertionMode.InsertAfter、UpdateTargetId=“newCheck”}）
  
  
  

  
  此操作链接的流程：：当我（一次又一次）单击此链接时，每次单击id=“newPackage”后都会添加新的嵌套部分邮件视图（addAnotherCheck）
  
  i、 e主要目标是创建多个包，每个包都有多个检查
  完成所有工作（我的所有工作都完成了，我的应用程序（ASP>NET MVC3）工作正常）
  问题是（仅在视图中）当我尝试使用多个检查创建多个包时，然后单击package2,3..n视图（嵌套部分）中的“添加检查”链接（不包括1）另一个“addAnotherCheck”嵌套视图在package1“AddCheck”链接后追加
  ，但我需要在调用“AddCheck”后追加它。简而言之，
  ：使用ajax.actionlink（使用insertionmode.InsertAfter）一次又一次地调用嵌套分部（从分部（我从主视图一次又一次调用到分部））即仅将嵌套的部分插入到第一个部分

---

InsertionMode=InsertionMode.InsertAfter正在查找HTML元素ID。这些ID在您的页面上应该是唯一的。一旦添加了“newCheck”ID，MVC Ajax将查找第一个ID。您真正需要做的是在末尾放置一个占位符并使用InsertionMode.InsertBefore。因此您的视图如下所示：

<div id="newPackage">...
<div id="newCheck" />

<div id="newPackage">...
<div> @Ajax.ActionLink("add Checks", "addAnotherCheck", new AjaxOptions { InsertionMode = InsertionMode.InsertBefore, UpdateTargetId = "newCheck" })<br/><br/></div>
<div> @Ajax.ActionLink("add Checks", "addAnotherCheck", new AjaxOptions { InsertionMode = InsertionMode.InsertBefore, UpdateTargetId = "newCheck" })<br/><br/></div>
<div> @Ajax.ActionLink("add Checks", "addAnotherCheck", new AjaxOptions { InsertionMode = InsertionMode.InsertBefore, UpdateTargetId = "newCheck" })<br/><br/></div>
<div> @Ajax.ActionLink("add Checks", "addAnotherCheck", new AjaxOptions { InsertionMode = InsertionMode.InsertBefore, UpdateTargetId = "newCheck" })<br/><br/></div>
<div id="newCheck" />

。。。

然后从部分视图中删除id=“newCheck”。现在，部分视图中的标记将始终放置在div的正上方，newCheck id将始终位于页面底部

您的重新填充HTML应该如下所示：

<div id="newPackage">...
<div id="newCheck" />

<div id="newPackage">...
<div> @Ajax.ActionLink("add Checks", "addAnotherCheck", new AjaxOptions { InsertionMode = InsertionMode.InsertBefore, UpdateTargetId = "newCheck" })<br/><br/></div>
<div> @Ajax.ActionLink("add Checks", "addAnotherCheck", new AjaxOptions { InsertionMode = InsertionMode.InsertBefore, UpdateTargetId = "newCheck" })<br/><br/></div>
<div> @Ajax.ActionLink("add Checks", "addAnotherCheck", new AjaxOptions { InsertionMode = InsertionMode.InsertBefore, UpdateTargetId = "newCheck" })<br/><br/></div>
<div> @Ajax.ActionLink("add Checks", "addAnotherCheck", new AjaxOptions { InsertionMode = InsertionMode.InsertBefore, UpdateTargetId = "newCheck" })<br/><br/></div>
<div id="newCheck" />

。。。
@ActionLink（“添加检查”、“添加其他检查”、新AjaxOptions{InsertionMode=InsertionMode.InsertBefore，UpdateTargetId=“newCheck”}）


@ActionLink（“添加检查”、“添加其他检查”、新AjaxOptions{InsertionMode=InsertionMode.InsertBefore，UpdateTargetId=“newCheck”}）


@ActionLink（“添加检查”、“添加其他检查”、新AjaxOptions{InsertionMode=InsertionMode.InsertBefore，UpdateTargetId=“newCheck”}）


@ActionLink（“添加检查”、“添加其他检查”、新AjaxOptions{InsertionMode=InsertionMode.InsertBefore，UpdateTargetId=“newCheck”}）

---

这应该是可行的，现在你的HTML中也不会有任何重复的id。

问题是你的代码插入了几个具有相同id的div：你的局部视图总是添加

…

，因此页面最终充满了具有相同id的div

• 首先，这是不合法的。一个HTML文档不应该有多个ID相同的元素
• 其次，当您单击“addAnotherCheck”时，只会找到具有

  UpdateTargetId

  的第一个元素（因为它应该只有一个元素具有相同的ID）。因此检查总是插入在第一个元素之后。由于这是不允许的，每个浏览器都可以执行不同的操作

因此，无论何时在同一页面中呈现相同的部分，都应该更改ID。您只需在ID之后添加一些随机项，并对div和

UpdateTargetId

使用相同的ID。可以安全使用的明显随机项是

Guid

。在这种情况下，时间戳也会起作用