Избегайте дублирования форматирования между представлением Razor на стороне сервера и шаблоном JQuery на стороне клиента - PullRequest
Новая
       2

Избегайте дублирования форматирования между представлением Razor на стороне сервера и шаблоном JQuery на стороне клиента

5 голосов
/ 28 августа 2011

У меня есть страница с результатами поиска, на которой я выводлю список элементов, отформатированных определенным образом с использованием представления MVC Razor. 

@for (int i = 0; i < group.Count(); i++) {
  <div class="result">
    <div class="ordinal">@((i+1).ToString()).</div>
    <div class="detail"><p>@group.ElementAt(i).Name</p></div>
  </div>
}

Клиент может дополнительно отфильтровать эти результаты, используя jQuery AJAX, чтобы получить новый набор данных в виде шаблонов JSON и jQuery, чтобы отобразить набор результатов вместо оригинала. Это шаблон jQuery: 

<script id="resultTemplate" type="text/x-jquery-tmpl">
  {{each(i, result) results}}
    <div class="result">
      <div class="ordinal">${i+1}.</div>
      <div class="detail"><p>${name}</p></div>
    </div>
  {{/each}}
</script>

, который связан после вызова AJAX: 

var result = $("#resultTemplate").tmpl({ results: data });
$("#resultsColumn").empty().append(result);

Обратите внимание, как мне пришлось продублировать форматирование HTML для результата поиска как в коде Razor на стороне сервера, так и в коде jQuery на стороне клиента. Я хотел бы иметь только одну версию шаблона с привязкой к данным, чтобы уменьшить вероятность несоответствия при необходимости вносить изменения.

Чтение Вступление Стивена Уолтера к шаблонам jQuery он намекает на интеграцию «лучше вместе» при использовании шаблонов jQuery с ASP.NET MVC, поэтому мне было интересно, есть ли средство, которое решает вышеуказанный сценарий.

Спасибо.

Ответы [ 2 ]

1 голос
/ 28 августа 2011

Полагаю, вы могли бы использовать синтаксис @helper, чтобы избежать дублирования разметки. 

@helper Result(string ordinal, string name) {
    <div class="result">
        <div class="ordinal">@ordinal.</div>
        <div class="detail"><p>@name</p></div>
    </div>
}

Затем используйте помощник для обоих видов Razor 

@for (int i = 0; i < group.Count(); i++) {
    @Result((i+1).ToString(), group.ElementAt(i).Name)
}

и шаблон jQuery 

<script id="resultTemplate" type="text/x-jquery-tmpl">
    {{each(i, result) results}}
        @Result("${i+1}", "${name}")
    {{/each}}
</script>

Предполагается, что ваш шаблон jQuery находится в самом представлении Razor.

С другой стороны, вы должны преобразовать каждый аргумент в строку, прежде чем передавать их помощнику. И по какой-то причине передача "${i+1}" помощнику кажется неправильной.

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

0 голосов
/ 28 августа 2011

Вы можете визуализировать исходный результат поиска с тем же шаблоном jquery вместо использования синтаксиса бритвы, это позволяет избежать дублирования. Вы могли бы поместить это в представление: 

<script type="text/javascript">
    $('#resultTemplate')
    .tmpl(@group.ToJson()))
    .appendTo("#resultTemplate");
</script>

Я создал метод ToJson для группового объекта. Это может быть метод, который вы реализуете в своей модели представления, или что бы ни делала группа var для сериализации коллекции в json.

...