ASP.NET - 使用局部视图异步显示搜索结果表答案

【问题标题】：ASP.NET - Using Partial Views to Asynchronously Display Search Results TableASP.NET - 使用局部视图异步显示搜索结果表
【发布时间】：2017-05-31 04:30:21
【问题描述】：

我想在我的应用程序中有一个返回搜索结果的表。我有两个 UI 组件可以帮助实现这一点。一是作为搜索字符串的文本输入，二是通过下拉菜单进行搜索，最终确定要查询的数据库表。

我的控制器设置为 HttpGet 以接受参数 searchBy 和 searchString 如果 search by 是“option1”那么它会查询“table 1”如果 searchBy 是“option2”它会查询“Table2”。然后我想在不刷新的情况下将部分视图返回到主视图。我目前有这个设置，我有两个不同的模型和两个不同的局部视图，它们分别相互配合。计划是使用 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");

        }
    }

【问题讨论】：

标签： c# asp.net asp.net-mvc partial-views

【解决方案1】：

由于您正在进行 AJAX 调用，因此您的主视图将没有任何 Razor 语法来输出您的局部视图。您的 AJAX 调用将只返回一堆呈现的 HTML（一个长字符串 - 您的 Partial 与您的模型合并），您只需要将其转储到页面上的某个位置。

所以回答你的问题我如何在主视图中使用 razor 语法，以便它可以处理返回的部分视图？你不会使用 Razor 来完成这项任务。

您将通过 JavaScript 调用控制器操作，该调用将返回 HTML，您将在预定义区域中转储该 HTML。

使用 jQuery 可能看起来像这样：

JavaScript：

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

主视图：

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

【讨论】：