MVC - 從API控制器訪問視圖模型

我使用MVC編寫了一個簡單的搜索API，我可以從JQuery中進行查詢。現在我的代碼看起來是這樣的：MVC - 從API控制器訪問視圖模型

$.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將它傳遞給視圖，但我無法想出更好的方法。

謝謝！

來源

2013-12-20 UpQuark

，我認爲最好的辦法是讓你的服務回報JSON，然後輸出反正你喜歡你的觀點之內。 – user1477388

您無法「將搜索結果添加到視圖模型中的列表」，因爲一旦提供了ajax響應（實際上一旦頁面加載），視圖模型就不再存在。 –

如果您通過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>

來源

2013-12-20 20:27:12 Steddie

你在找什麼是客戶端MVC，正是我爲什麼放棄了ASP.NET MVC而贊成AngularJS + ASP.NET Web API。爲了迴應AJAX請求，我討厭返回HTML片段，但沒有簡單的方法來綁定JSON，而沒有編寫大量雜亂無章的jQuery。還有很多其他選項，例如Backbone，KnockoutJS，Moustache。

來源

2013-12-20 20:06:04 natwallbank

您是否覺得這適用於大規模應用？我最近一直在研究所有這些，但質疑它們的規模。也許不是最好的地方... – statue

那麼我們只用它來構建由數百（而不是數千）用戶使用的內部應用程序。事實上，我們將傳統上實現爲Windows窗體應用程序，所以很難從經驗中講出來。就服務器端而言，它只是API調用，所以這一切都取決於您的API實現：緩存等。在客戶端，Angular處理緩存視圖模板，並且還支持輕鬆緩存其他持久數據。您往往只能看到對API的調用，而不是整頁加載，所以它的響應速度非常快。 – natwallbank

當綁定大量數據時，我們已經看到了客戶端上的一個奇怪的性能問題，例如，巨大的名單，但通常能夠圍繞這個設計。每個新版本都有性能改進，在路線圖中有一些大的計劃用於進一步改進。 – natwallbank

MVC - 從API控制器訪問視圖模型

回答

相關問題