ASP.NET - 使用分部视图异步显示搜索结果 Table
ASP.NET - Using Partial Views to Asynchronously Display Search Results Table
我想在我的应用程序中有一个 table 作为搜索结果的 return。我有两个 UI 组件可以协助完成此操作。一是用作搜索字符串的文本输入,二是通过下拉菜单进行搜索,最终确定要查询的数据库 table。
我的控制器设置为 HttpGet 以接受参数 searchBy
和 searchString
如果搜索依据是 "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>
我想在我的应用程序中有一个 table 作为搜索结果的 return。我有两个 UI 组件可以协助完成此操作。一是用作搜索字符串的文本输入,二是通过下拉菜单进行搜索,最终确定要查询的数据库 table。
我的控制器设置为 HttpGet 以接受参数 searchBy
和 searchString
如果搜索依据是 "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>