2017-05-30 70 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>