Используя ASP.NET MVC и JQuery, как запустить функцию JS для каждого элемента в списке при загрузке?

Question

Представьте себе представление, предназначенное для отображения списка элементов типа Foo :

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<IEnumerable<Foo>>" %>

Теперь на странице отображается список элементов типа Foo :

<table>
        <tr>
            <th>
                Name
            </th>
        </tr>

    <% foreach (var item in Model) { %>
        <tr>
            <td>
                <%= Html.Encode(item.Name) %>
            </td>
        </tr>
    <% } %>
</table>

В дополнение к отображению списка элементов на странице мне также необходимо выполнить функцию Javascript Bar для каждого из элементов. Вот моя первая попытка:

<% foreach (var item in Model) { %>
<script type="text/javascript">

    $(document).ready(function() {
        var name = "<%=item.Name %>";
        Bar(name)
    });

</script>
<% } %>

Я получаю сообщение об ошибке " Невозможно разрешить элемент символа " для строки, которая начинается " имя переменной ... ".

Это правильный способ достичь этого? Какой правильный синтаксис использовать?

Answer 1

Попробуйте что-то вроде этого:

<script type="text/javascript">
    $(document).ready(function() {
        $("table tr td").each(function() {
            Bar(this.text());
        });
    });
</script>

Этот скрипт должен быть статическим и не генерироваться вашим представлением. Поместите его вверху страницы или поместите во внешний файл и создайте ссылку на этот файл.

Answer 2

Я не уверен, откуда исходит ваша ошибка (это может быть потому, что вы используете двойные кавычки, а не одинарные кавычки для блоков кода), но вы также вводите отдельный элемент сценария для каждого имени. @ Эндрю метод будет работать хорошо, но вы также можете сделать что-то вроде ниже. Он создает массив javascript (в виде строки), содержащий имена, затем внедряет один блок сценария, который выполняет итерацию по элементам массива, и вызывает функцию Bar для каждого из них. Я бы использовал метод @ Andrew, если вам нужно взаимодействовать с самими элементами DOM и, возможно, с этим механизмом, если вам нужно взаимодействовать только с данными.

<% string names = "[";
   foreach (var item in Model)
   {
      names = names + item.Name + ",";
   }
   names = names.TrimEnd(',') + "]";
%>

<script type="text/javascript">
   $(function() {
       $.each( <%= names %>, function(i,val) {
          Bar(val);
       });
   });
</script>

Answer 3

<script type="text/javascript">

    $(document).ready(function() {
        <% foreach (var item in Model) { %>
            Bar('<%=item.Name %>');
        <% } %>
    });

</script>

Я использую это, отлично работает, за исключением того, что visual studio немного запуталась.