嵌套Ajax.Actionlink (InsertionMode.插入(在造成一些混乱之后)

Question

我的应用程序中有3个视图(1 main, 1 partial, 1 nested partial)，我曾经一次又一次地调用partial(从main)和嵌套partial(从partial)

• ActionLink用于主视图
  

  <div id="newPackage">@Ajax.ActionLink("Create New Package", "createPackage", "test",
  new AjaxOptions
      {
          InsertionMode = InsertionMode.InsertAfter,
          HttpMethod = "post",
          UpdateTargetId = "newPackage"
      })</div>`
  

  
  这个actionlink的流程::当我点击这个链接(一次又一次)，然后在每次点击id="newPackage"之后添加新的部分视图(createPackage)
  
  

• ActionLink在createPackage部分视图中使用(从主视图点击链接后呈现的视图)
  

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

  
  这个ActionLink的流程::当我点击这个链接(一次又一次)，然后在每次点击id="newPackage"之后添加新的嵌套的组件视图(addAnotherCheck)
  
  即主要目标是创建多个包，每个包持有多个检查
  完成一切(我所有的工作都完成了，我的应用程序(ASP> . NET MVC3)工作正常)
  问题是(仅在视图中)当我尝试创建多个包与多个检查，然后点击"添加检查"链接从package2,3..n视图(嵌套部分)(不包括1)另一个"addAnotherCheck"嵌套视图在package1"添加检查"链接
  后追加，但我需要它在调用"添加检查"
  后追加在坚果壳::调用嵌套部分一次又一次(从部分(到我从主视图一次又一次地调用))与ajax。

Answer 1

InsertionMode = InsertionMode。InsertAfter正在查找HTML元素ID。这些在你的页面上应该是唯一的。一旦添加了"newCheck"ID, MVC Ajax就会找到第一个。您真正需要做的是在末尾放置一个占位符并使用InsertionMode.InsertBefore。所以你的视图应该是这样的:

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

然后从部分视图中删除id="newCheck"。现在，您的部分视图的标记将始终放置在具有newCheck ID的div的上方，该div将始终位于页面的底部。

最终得到的HTML应该是这样的:

<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" />

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

Answer 2

问题是您的代码插入几个div具有相同的id:您的部分视图总是添加<div id='newCheck'>...</div>，因此页面最终充满了具有相同id的div。

首先，这是不合法的。一个HTML文档不应该有多个具有相同ID的元素。
• 第二，当您单击"addAnotherCheck"时，只会找到具有UpdateTargetId的第一个元素(因为它应该只有一个具有相同ID的元素)。所以校验总是在第一个之后插入。由于这是不允许的，每个浏览器可以做不同的事情。

因此，无论何时在同一页面中呈现相同的部分，都应该更改ID。您可以简单地在id之后添加一些随机的内容，并为div和UpdateTargetId使用相同的id。可以安全使用的明显随机的东西是Guid。对于这种情况，也可以使用时间戳。