2017-05-30 144 views
0

我想在我的應用程序中有一個表返回搜索結果。我有兩個UI組件可以幫助解決這個問題。一個是用作搜索字符串的文本輸入,另一個是通過下拉菜單搜索,最終確定要查詢的數據庫表。ASP.NET - 使用部分視圖異步顯示搜索結果表

我的控制器被設置爲一個HttpGet來接受參數searchBysearchString如果搜索是「option1」,那麼它查詢「表1」,如果searchBy是「option2」它查詢「表2」。然後,我想在不更新的情況下將部分視圖返回到主視圖。我現在有這樣的設置,我有兩個不同的模型和兩個不同的局部視圖分別相互配合。這個計劃是使用AJAX發送一個「GET」給控制器動作和適當的參數。

如何在主視圖中使用razor語法,以便它可以處理返回的局部視圖?

控制器

[HttpGet] 
    public async Task<ActionResult> Table(string searchBy, string searchString) 
    { 

     switch (searchBy) 
     { 
      case "Option 1": 
       List<model1> Model1 = new List<model1>(); 
       var blah = from a in db.Table1 a; 
       blah = blah.Where(a => a.propA.Contains(searchString) 
            || a.propB.Contains(searchString)); 

       foreach (var a in blah) 
       { 
        Model1.Add(new model1 {...... }); 
       } 

       return PartialView("_PartialView1", Model1); 

      case "Option2": 
       List<model2> Model2 = new List<model2>(); 
       var foo = from p in db.Table2 select p; 
       foo = foo.Where(p => p.propC.Contains(searchString) 
            || p.propD.Contains(searchString) 
            || p.propE.Contains(searchString) 

       foreach (var p in foo) 
       { 
        Model2.Add(new mode2 { .... }); 
       } 

       return PartialView("_PartialView2", Model2); 

      default: 
       return PartialView("_DefaultPartialView"); 

     } 
    } 

enter image description here

回答

1

既然你正在一個AJAX調用,你的主視圖不會有任何剃刀語法來輸出你的部分觀點。您的AJAX調用將只返回一堆呈現的HTML(一個長字符串 - 您的部分與您的模型合併),您只需將其轉儲到頁面上某處即可。

所以回答你的問題如何在主視圖中使用razor語法,以便它可以處理返回的部分視圖?您不會爲此任務使用Razor。

您將通過JavaScript調用您的控制器操作,並且該調用將返回將轉儲到預定義區域中的HTML。

使用jQuery它可能是這樣的:

的JavaScript:

$.get('/Home/Table', { searchBy : 'Option 1', searchString : 'test' }, function(partialView) { 
    $('#output').html(partialView); 
}); 

主視圖:

<div id="output"></div>