jQueryを使用してMVCビューにコードをレンダリングする

Question

文字列の形でコントローラに到達する文字列があります。それは、以下の要素テンプレートを持つリスト（Model.ToParticipantList）です：

string.Format("<li id=\"Id_{0}" style=\"font-weight: bold; margin-top: 1px; list-style-type: none; display: inline; margin-bottom: 3px; cursor: pointer; font-size: 11px; color: Black; padding-top: 1px; padding-bottom: 1px; margin-left: 2px; width: 150px;\" 
onclick=\"RemFromList('{0}__#{2}');\"> 
<a>{1}</a> 
</li>,", el.Id, el.Name, "To")); 

私はこれが私のjQueryの関数に渡すと、次の結果を希望：

<li id="Id_1" style="font-weight: bold; margin-top: 1px; list-style-type: none; display: inline; margin-bottom: 3px; cursor: pointer; font-size: 11px; color: Black; padding-top: 1px; padding-bottom: 1px; margin-left: 2px; width: 150px;" onclick="RemFromList('1__#To');"> 
<a>System System</a> 
</li> 

これは動作します：

を

   document.getElementById('To1').innerHTML=@Html.Raw(Model.ToParticipantList); //this works 
      // $("#To1").html('@Html.Raw(Model.ToParticipantList)'); //this doesn't 
      // $("#To1").append('@Html.Raw(Model.ToParticipantList)'); //this doesn't 

最後の2つの例で何が間違っていますか？

Answer 1

HTMLを挿入する方法のいずれかが機能するはずです。あなたはこの単純な例を取る場合：

<div id="div1"></div> 
<div id="div2"></div> 
<div id="div3"></div> 
<script type="text/javascript"> 
    document.getElementById('div1').innerHTML = '@Html.Raw("<li>Using getElementById</li>")'; 
    $("#div2").html('@Html.Raw("<li>Using jQuery html</li>")'); 
    $("#div3").append('@Html.Raw("<li>Using jQuery append</li>")'); 
</script> 

それはDOMに、このHTMLをレンダリングします：

<div id="div1"><li>Using getElementById</li></div> 
<div id="div2"><li>Using jQuery html</li></div> 
<div id="div3"><li>Using jQuery append</li></div> 

は、基本的にそれらはすべて同じ結果を得ます。あなたの例では表示されていないコードに何かが起こっているはずです。私はあなたが getElementByIdをを使用するときにと はメソッドを追加jQueryの htmlのためにやっているようHtml.Rawは、単一引用符で囲まれていないことをリストあなたのコード内で告知をしました。 ToParticipantListに含まれている文字列に一重引用符を含める場合は、動作しません。