0

私の MVC アプリには、テーブルに行を追加する JavaScript があります。行は、javascript (jquery) を使用して追加されます。追加される文字列には、いくつかの mvc 固有のコードも含まれています。引用符とエスケープを正しく取得できません。私はいくつかの異なるコンボを試しましたが、ここに私が持っているものがあります：

var row = $("<tr><td><input type='hidden' name='LocationArray' value='"
 + CellValue + "'>" + CellText +
 "</td><td class='delete' >" +
 "<img src='@Url.Content(\"~/Content/images/delete_x.png\")' /></td></tr>");
4

2 に答える 2

6

Razor 文字列をエスケープしたいとは思わない:

@Url.Content("~/Content/images/delete_x.png")

Razor 構文が最初に解析されることに注意してください。これにより、何が起こっているのかが明確になります。

@{ var url = Url.Content("~/Content/images/delete_x.png"); }

var row = $("<tr><td><input type='hidden' name='LocationArray' value='"
    + CellValue + "'>" + CellText +
    "</td><td class='delete' >" +
    "<img src='@url' /></td></tr>");

脚注: このレベルの動的 HTML 構築に到達したら、クライアント側のテンプレート ライブラリ (Underscore、Mustache、$.tmpl など) を検討する時期かもしれません。アンダースコアの使用:

<script type='text/template' id='the-template'>
    <tr>
        <td>
            <input type='hidden' name='LocationArray' value='<%= val %>' />
            <%= text %>
        </td>
        <td class='delete' >
           <img src='@Url.Content("~/Content/images/delete_x.png");' />
        </td>
   </tr>
</script>

<script>
    var tmpl = _.template($("#the-template").html());
    var data = { val: "hello", text: "world" };
    var html = tmpl(data);
    $("#target").html(html);
</script>
于 2012-11-28T23:38:06.797 に答える
0

これが、要素を jquery で構築する必要がある理由です。

var el = $("<tr>")
  .append($("<td>")
    .append($("<input>")
    .attr({type: "hidden", name: "LocationArray"})
    .val(CellValue)
    .text(CellText)
  )
)

などなど。何を達成しようとしているのかがより明確になり、エラーを見つけて変更を簡単に行うことができます。

于 2012-11-28T23:45:03.240 に答える