MVC - доступ к модели представления с контроллера API

Question

Я написал простой 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, но я не могу придумать лучший способ.

Спасибо!

Answer 1

Если вы используете API через ajax, мой подход состоял в том, чтобы вернуть json, а затем использовать шаблоны mustache, чтобы данные выглядели хорошо.

$.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>'); 
    } 
}); 

И если ваш json будет выглядеть;

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

Answer 2

Что вы ищете, это MVC на стороне клиента, и именно поэтому я бросил ASP.NET MVC в пользу AngularJS + ASP.NET Web API. Я ненавидел возвращать HTML-фрагменты в ответ на запросы AJAX, но не имел простого способа привязать JSON без написания много беспорядочного, неструктурированного jQuery. Есть много других вариантов, таких как Backbone, KnockoutJS, Mustache.