ASP.NET MVC шаблоны для клиента и сервера

Question

Возможно ли это?Для примера того, чего я хочу достичь, возьмите систему комментирования Facebook.Существующие комментарии отображаются на сервере, но если я оставляю новый комментарий, он создается с помощью AJAX на клиенте.В идеале я хотел бы хранить шаблон для комментария только в одном месте и иметь доступ к нему как на сервере (предоставленном Razor), так и на клиенте (отображаемом в Javascript с использованием JSON, возвращенного сервером).

Есть идеи?

РЕДАКТИРОВАТЬ : я полагаю, что другой вариант - придерживаться чисто серверной визуализации, а когда пользователь публикует новый комментарий, возвращать визуализированный HTML-код в браузербыть вставленным в DOM.Это не так хорошо, но мне было бы интересно узнать, возможно ли это тоже.

Answer 1

Я бы возражал против рендеринга на стороне сервера и последующей отправки его обратно в ваш JS-скрипт для пропускной способности и производительности.Скорее вы должны использовать шаблонизатор, который работает как на сервере, так и на клиенте.Когда клиент хочет обновить комментарии, он запрашивает только данные для комментариев, а затем заменяет старый html комментариев новым html, отображаемым из данных с использованием того же шаблона, который используется на сервере.

Я использовал шаблонизатор Mustache для достижения этой цели с помощью PHP и JS.Существует версия .NET, которая, как мне кажется, работает для ASP.NET, и я предполагаю, что вы используете ASP.NET.

Итак, я должен убедиться, что данные отформатированы таким же образомв PHP и JS, а затем рендеринг с использованием шаблона Усы.

http://mustache.github.com/

Усы прост в использовании.Вы берете один объект и один шаблон и получаете обратно HTML.

Пример объекта:

object->user = "Kilroy"
object->comment = "was here"
object->edited = true

Пример шаблона:

{{user}} {{comment}} {{#edited}}(This comment has been edited){{//edited}}

Результат:

Kilroy was here (This commment has been edited)

Answer 2

Подход, который я использовал, заключается в наличии скрытого HTML-шаблона с подстановочными знаками и / или именами классов, затем в готовом документе загружается содержимое с помощью вызова AJAX / JSON и, наконец, обновляется или добавляется новый элемент с использованием того же шаблона в javascript.

<ul id="template">
  <li>
     <span class="message"></span>
     <span class="date"></span>
  </li>
</ul>

<ul id="comments"></ul>

<script type="text/javascript">
    $().ready(function() {
        loadComments();
    });
    function loadComments() {
        $.post('@Url.Action("GetComments", "Forum")', {}, function(comments) {
            for (i = 0; i < comments.length; i++){
                loadComment(comments[i]);
            } 
        }, 'json');
    }
    function loadComment(comment) {
        var template = $('#template li').clone();
        template.find('.message').text(comment.message);
        template.find('.date').text(comment.date);
        $('#comments').append(template);
    }
</script>

Для новых сообщений вы можете опубликовать сообщение на сервере, а затем добавить его в список с помощью функции loadComment или обновить весь список комментариев. Это не полный пример, но надеюсь, что вы поняли идею.

Answer 3

Я не очень много работал с бритвой или ASP.NET MVC, но обычно я использую Monorail и NVelocity:

Есть шаблон для страницы. Для комментариев есть частичный шаблон, который вы включаете в свой основной шаблон. Для запроса AJAX используйте этот частичный шаблон для визуализации разметки для части комментариев. Замените его на стороне клиента предпочитаемым вами методом.

Таким образом, вы сможете разместить разметку в одном месте, независимо от того, является ли это обычный запрос или запрос ajax.