0

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

私は学習 Web サイトに取り組んでおり、メッセージがある場合はユーザーにメッセージのリストを表示することになっています。このようなもの：

代替テキスト

ユーザーが閉じるボタンを押すと、そのメッセージは「既読」とマークされ、次回は表示されないようにする必要があります。これらのメッセージを生成するには、次のコードを使用します。

<% 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 を処理するため)。

[AcceptVerbs(HttpVerbs.Post)]
public ActionResult CloseMessage (int id) {
    using (var dl = new DL ()) {
        dl.MarkAsRead (id);
    }

    if (Request.IsAjaxRequest ()) {
        return new EmptyResult ();
    }
    else {
        return RedirectToAction ("Index");
    }
}

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

そのため、ビューページに奇妙に見える 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 コードを作成していますが、消化するには多すぎます。これを行うより良い方法はありますか？

4

3 に答える 3

3

要素 ID をパラメーターとして受け取る JavaScript 関数を 1 つ作成するだけです。

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>
<% } %>
于 2009-07-29T13:10:53.743 に答える
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>
<% } %>

入力に ​​class="MyCloseButton" のみを追加しました

次に、JS (私は mootools を使用しますが、JQuery にも CSS セレクターがありますが、残念ながら移植する必要があります) で、次のようなことができます。

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

このようにすると、Plan JS で小さな関数を 1 つ書き出すだけで済み、サーバー側で行うことを心配する必要はありません。JS がボタンを見つけられるように、css クラスでボタンを装飾するだけです。

于 2009-07-29T13:06:42.670 に答える
1

きれいではないことは理解していますが、それほど悪くもありません。ただし、これを行う簡単な方法があると思います。

ボタンのクリック イベント ハンドラーから 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>
于 2009-07-29T13:09:07.083 に答える