ネストされたAjax.Actionlink（InsertionMode.insertが何らかの混乱を引き起こした後）

Question

私のアプリケーションで3つのビュー（1つのメイン、1つの部分、1つのネストされた部分）何度も何度も

• ActionLinkのは、このActionLinkののメインビューで
  

  
  フローを使用::私は（再びとagaiこのリンクをクリックすると、 n）は、新しいpartailビュー（createPackage）は
  

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

  createPackage部分ビュー（メインビューからのリンクをクリックした後にレンダリングされたビュー）内で使用さ
  
  

• ActionLinkのをクリックし、すべての上のid = "newPackage" の後に追加されますすべての上のID =「newPackageは」
  
  をクリックした後

  
  このActionLinkのの流れに::私は、このリンク（何度も何度も）、新しいネストされたpartailビュー（addAnotherCheck）をクリックし、私が追加されます。 e主な目的は、複数のチェックを保持する各パッケージで複数のパッケージを作成することです
  すべてを完了しました（すべての作業は完了し、アプリケーション（ASP> NET MVC3）は正常に動作しています）
  問題は（表示のみ）複数のチェックを含む複数のパッケージをクリックしてからpackage2,3..nの「add check」リンクをクリックする（入れ子部分の）ビュー（1を除く）別の「addAnotherCheck」ネストされたビューはpackage1「add check」リンク
  の後に追加されますが、 "add check"を呼び出した後に追加する
  ナットシェルで :: ajax.actionlink（with insertionmode.InsertAfter）を使用して、ネストされた部分を何度も何度も（partialから（私はメインビューから何度も呼び出している）それはその入れ子部分を第1の部分のみに挿入することです。

Answer 1

InsertionMode = InsertionMode.InsertAfterはHTML要素IDを探しています。これらはあなたのページで一意でなければなりません。 「newCheck」IDを追加すると、MVC Ajaxが最初のIDを探しています。あなたが本当に必要とするのは、最後にプレースホルダーを置き、InsertionMode.InsertBeforeを使用することです。あなたのビューは次のようになります：

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

次に、部分ビューからid = "newCheck"を削除します。部分ビューからのマークアップは、divのすぐ上に配置され、newCheck IDは常にページの一番下に表示されます。動作するはずですし、今、あなたはどちらかあなたのHTML内の任意のより多くの重複したIDを持っていない

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

：

あなたresutlingのHTMLは次のようにsomethigになります。

Answer 2

問題は、あなたのコードが同じIDを持つ複数のdivを挿入していることです：部分ビューは常に<div id='newCheck'>...</div>を追加するため、ページは同じIDのdivでいっぱいになります。

• まず、これは法的ではありません。 HTMLドキュメントは、同じIDを持つ要素を複数持つことはできません。
• 第2に、UpdateTargetIdの最初の要素のみが見つかりました（同じIDを持つ要素が1つだけであるため）。"addAnotherCheck"をクリックすると、したがって、チェックは常に最初のものの後に挿入されます。これは許可されていないので、すべてのブラウザが異なることができます。

したがって、同じページ内で同じ部分をレンダリングするときは常にIDを変更する必要があります。 idの後ろに何かをランダムに追加して、divとUpdateTargetIdに同じIDを使用することができます。安全に使用できる明白なランダムなものはGuidです。この場合、タイムスタンプも機能します。