Правильно ли создавать javascript с использованием C # на странице просмотра ASP.NET MVC? - PullRequest
Новая
       34

Правильно ли создавать javascript с использованием C # на странице просмотра ASP.NET MVC?

0 голосов
/ 29 июля 2009

[Извините за длинный вопрос, но необходимо объяснить проблему]

Я работаю над учебным веб-сайтом, и он должен показывать пользователю список сообщений, если они есть. Примерно так:

alt text

Когда пользователь нажимает кнопку закрытия, это сообщение должно быть помечено как «прочитанное» и не должно отображаться в следующий раз. Следующий код используется для генерации этих сообщений: 

<% 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>

Это в основном создание кода javascript в цикле C #, который на самом деле работает, но слишком много для меня, чтобы переварить. Есть ли лучший способ сделать это?

Ответы [ 3 ]

3 голосов
/ 29 июля 2009

Вы можете просто создать одну функцию 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>
<% } %>
2 голосов
/ 29 июля 2009

Вы можете использовать селектор CSS в вашем JS, чтобы получить все кнопки с определенным классом, назначенным для них. Затем вы можете подключить событие клика к ним. Таким образом, ваш 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 мог их найти.

1 голос
/ 29 июля 2009

Я понимаю, что это не красиво, но и не так уж плохо. Однако я думаю, что есть более простые способы сделать это.

Вы можете использовать позиционные селекторы 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>
...