0

[对不起，问题很长，但有必要解释问题]

我正在一个学习网站上工作，如果有的话，它应该向用户显示一个消息列表。像这样的东西：

替代文字

当用户按下关闭按钮时，该消息必须标记为“已读”，下次不应显示。以下代码用于生成这些消息：

<% 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 函数：

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
  }
});

这样你只需要在计划 JS 中写出一个小函数，而不用担心在服务器端做它，你需要做的就是用一个 css 类来装饰你的按钮，这样 JS 就可以找到它们。

于 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 回答