ASP.NET MVCビューページでC＃を使用してJavaScriptを生成するのは正しいですか？

Question

[長い質問のため申し訳ありませんが、問題を説明する必要があります]

私は学習用のウェブサイトに取り組んでおり、ユーザーにメッセージの一覧を表示することになっています。

alt text http://i25.tinypic.com/107j504.png

ユーザーが閉じるボタンを押すと、そのメッセージは「読み取り」と次回を示すべきではないとマークする必要があります。このような何か。次のコードは、それらのメッセージを生成するために使用されます：ガイドラインに従って、その後

<% foreach (var m in Model.UserMessages) { %> 
    <div class="um" id="m<%=Html.AttributeEncode(m.ID) %>"> 
     <p class="mh"><%= Html.Encode (String.Format ("From {0} ({1})", m.From, m.Sent)) %></p> 
     <p><%= Html.Encode (m.Text) %></p> 
     <% using (Html.BeginForm ("CloseMessage", "Home", new { id = m.ID })) { %> 
      <input type="submit" value="Close<%= Html.AttributeEncode (m.ID) %>" id="c<%= Html.AttributeEncode (m.ID) %>"/> 
     <% } %> 
    </div> 
<% } %> 

を、私は読んとしてメッセージをマークして、ビューをリフレッシュコントローラにおけるHTTP POSTメソッドのサポートを追加（JavaScriptを無効にし処理するために） ：

次に、メッセージのみがなくなるように（jQueryを使用して）JavaScriptサポートを追加したいと考えました。しかし、問題は、ボタンとメッセージをプログラムで生成していることです。

だからビューページに奇妙な探してjavascriptのコードになってしまった：

<script type="text/javascript"> 
    $().ready(function() { 
     <% foreach (var m in Model.UserMessages) { %> 
     $("#c<%=Html.AttributeEncode (m.ID) %>").click(function(event) { 
      $.post("Home/CloseMessage/<%=Html.AttributeEncode (m.ID) %>"); 
      $("#m<%=Html.AttributeEncode (m.ID) %>").slideUp("slow"); 
      event.preventDefault(); 
     }); 
     <% } %> 
    }); 
</script> 

これは、基本的には、実際に動作しますが、私が消化するためにあまりにも多くのC＃のループ内のJavaScriptコードを作成しています。これを行うためのより良い方法はありますか？

Answer 1

あなただけのパラメータとして要素IDを取る1つのjavascript関数作成することができます。

function myFunction(ID) { 
    $.post("Home/CloseMessage/" + ID); 
    $("#m" + ID).slideUp("slow"); 
} 

そして：

<% foreach (var m in Model.UserMessages) { %> 
<div class="um" id="m<%=Html.AttributeEncode(m.ID) %>"> 
    <p class="mh"><%= Html.Encode (String.Format ("From {0} ({1})", m.From, m.Sent)) %></p> 
    <p><%= Html.Encode (m.Text) %></p> 
    <% using (Html.BeginForm ("CloseMessage", "Home", new { id = m.ID })) { %> 
     <input type="submit" value="Close<%= Html.AttributeEncode (m.ID) %>" 
     id="c<%= Html.AttributeEncode (m.ID) %>" 
     onclick="myFunction('<%=Html.AttributeEncode(m.ID)%>')"/> 
    <% } %> 
</div> 
<% } %> 

Answer 2

JSでCSSセレクタを使用して、特定のクラスが割り当てられたボタンをすべて取得することができます。それから、クリックイベントをそれらに結びつけることができます。だからあなたのHTMLは、このようなものになるだろう：

<% foreach (var m in Model.UserMessages) { %> 
    <div class="um" id="m<%=Html.AttributeEncode(m.ID) %>"> 
     <p class="mh"><%= Html.Encode (String.Format ("From {0} ({1})", m.From, m.Sent)) %></p> 
     <p><%= Html.Encode (m.Text) %></p> 
     <% using (Html.BeginForm ("CloseMessage", "Home", new { id = m.ID })) { %> 
      <input type="submit" class="MyCloseButton" value="Close<%= Html.AttributeEncode (m.ID) %>" id="c<%= Html.AttributeEncode (m.ID) %>"/> 
     <% } %> 
    </div> 
<% } %> 

私は（私はMooToolsはを使用しますが、jQueryのは、あまりにもCSSセレクタを持っていますあなたのJSに次に、あなたの入力に

をクラス=「MyCloseButton」を追加しましたポートにする必要がありますそれは）申し訳ありませんが、あなたがこのような何かを行うことができます。

window.addEvent("domready", function() { 
    $$("input.MyCloseButton").each(function(button) { 
    // Add your code here, you can reference button.id etc for each of your buttons 
    } 
}); 

すべてはあなたがする必要がある、それをサーバ側をやって心配計画JSに一つの小さな機能を書いていないためにあなたが唯一持っている。この方法はJSがそれらを見つけることができるように、それはあなたのボタンをCSSクラスで飾る。

Answer 3

わかりませんが、それほど悪くはありません。しかし、これをやる方が簡単だと思います。

jqueryの位置セレクタは、ボタンのクリックイベントハンドラから使用できます。次に、すべてのボタンに同じハンドラを割り当てます。

<script type="text/javascript"> 
    $(document).ready(function() {   
     $("input[type=submit]").click(function(){ 
      $(this).parent().slideup("slow"); 
      $.post("Home/CloseMessage/" + $(this).parent().attr("id")); 
      event.preventDefault(); 
      }); 
     }); 
    }); 
</script>