Question

我使用MVC编写了一个简单的搜索API，我可以从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

如果您通过ajax使用API，我的方法是返回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。

MVC - 从API控制器访问视图模型

2 个答案: