ASP.NET - 使用分部视图异步显示搜索结果 Table

ASP.NET - Using Partial Views to Asynchronously Display Search Results Table

我想在我的应用程序中有一个 table 作为搜索结果的 return。我有两个 UI 组件可以协助完成此操作。一是用作搜索字符串的文本输入,二是通过下拉菜单进行搜索,最终确定要查询的数据库 table。

我的控制器设置为 HttpGet 以接受参数 searchBysearchString 如果搜索依据是 "option1" 那么它查询 "table 1" 如果搜索依据是 "option2" 它查询 "Table2"。然后我想 return 不刷新主视图的局部视图。我目前将此设置为我有两个不同的模型和两个不同的局部视图,它们分别相互对应。计划是使用 AJAX 发送带有适当参数的 "GET" tot 控制器操作。

如何在主视图中使用 razor 语法,以便它可以处理正在 returned 的任一局部视图?

控制器

[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");

        }
    }

由于您正在进行 AJAX 调用,您的主视图将没有任何 Razor 语法来输出您的部分视图。您的 AJAX 调用只会 return 一堆呈现的 HTML (一个长字符串 - 您的部分与您的模型合并),您只需要将其转储到页面上的某个位置。

所以回答你的问题我如何在主视图中使用剃刀语法,以便它可以处理正在 returned 的任一局部视图? 你不会使用 Razor 完成此任务。

您将通过 JavaScript 调用控制器操作,该调用将 return HTML 转储到预定义区域。

使用 jQuery 它可能看起来像这样:

JavaScript:

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

主视图:

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