Я написал простой API поиска, используя MVC, который я могу запросить из JQuery. Сейчас мой код выглядит примерно так:
$.ajax({
url: 'api/search',
type: "POST",
data: paramString,
dataType: "json",
success: function(data) {
$('#dataTable').append('<tr>' + '<td>' + params.SearchString + '</td>' + '<td>' + params.DateFrom + '</td>' + '<td>'+ params.DateTo + '</td>' + '<td>'+ JSON.stringify(data) + '</td>' + '</tr>');
}
});
В основном все, что я делаю, это отправить критерии поиска в API, вернуть результаты, а затем записать соответствующие критерии и результат поиска в новую строку в таблице результатов непосредственно в HTML.
По понятным причинам мне не нравится это решение; он фактически не помещает данные в какую-либо структуру данных, а просто отбрасывает их в HTML, что затрудняет манипулирование ими в будущем и не выполняет хорошую работу по основным принципам проектирования MVC.
Я пытаюсь реорганизовать его так, что вызов API ничего не возвращает и добавляет результат поиска в список в ViewModel, который я могу отображать динамически.
Однако я не могу понять разумный способ получить модель для контроллера API. Он хранит серверную сторону, поэтому я не думаю, что мне нужно передать ее через представление через javascript, но я не могу придумать лучший способ.
Благодарю!
Если вы используете API через ajax, мой подход состоял в том, чтобы вернуть json, а затем использовать шаблоны усов, чтобы данные выглядели хорошо.
$.ajax({
url: 'api/search',
type: "POST",
data: paramString,
dataType: "json",
success: function(data) {
var template = $('#searchTpl').html();
var html = Mustache.to_html(template, data);
$('#dataTable').append('<tr><td>' + params.SearchString + '</td><td>' + params.DateFrom + '</td><td>'+ params.DateTo + '</td><td>'+ html + '</td></tr>');
}
});
И если бы ваш джсон выглядел бы так;
{
results: [
{
pageName : "Header of hit 1",
pageDescription: "Description of page",
searchHitUrl: "http://stackoverflow.com"
},
{
pageName : "Header of hit 2",
pageDescription: "Description of page",
searchHitUrl: "http://imdb.com"
}]
};
Шаблон определяется следующим образом в index.html:
<script id="searchTpl" type="text/template">
{{#results}}
<h3>{{pageName}}</h3>
<p>{{pageDescription}} <a href="{{searchHitUrl}}">{{searchHitUrl}}</a></p>
{{/results}}
</script>
То, что вы ищете, это MVC на стороне клиента, и именно поэтому я бросил ASP.NET MVC в пользу AngularJS + ASP.NET Web API. Я ненавидел возвращать HTML-фрагменты в ответ на запросы AJAX, но не имел простого способа привязать JSON без написания много беспорядочного, неструктурированного jQuery. Есть много других вариантов, таких как Backbone, KnockoutJS, Mustache.