按钮“选择”可在单个视图中使用两个模型将数据过滤到另一个数据表
[英]Button “Select” to filter datable to another datatable using two model in single view
问题描述
几天前，我开始在MVC中创建另一个有关过滤数据表的项目。
我决定创建一个数据表，以使用“选择”按钮过滤另一个数据表。
我要做的第一件事是创建一个可用于在单个视图中显示两个数据表的类。
这是我的课：
public class MyData
{
public IEnumerable<pmTA_ProjectCategory> ProjectCategory { get; set; }
public IEnumerable<pmTA_FundCategory> FundCategory { get; set; }
}
然后，我在一个视图中创建了两个数据表。
这是我的代码：
@using iBUDGET.Models;
@model MyData
<table id="myDataTable" class="table table-bordered table-hover ">
<thead>
<tr>
<th>id</th>
<th>code</th>
<th>
title
</th>
<th>
description
</th>
<th>--</th>
</tr>
</thead>
<tbody>
@foreach (var item in Model.FundCategory)
{
string selectedRow = "";
if (item.id == ViewBag.fund)
{
selectedRow = "success";
}
<tr class="@selectedRow">
<td>
@Html.DisplayFor(modelItem => item.id)
</td>
<td>
@Html.DisplayFor(modelItem => item.code)
</td>
<td>
@Html.DisplayFor(modelItem => item.title)
</td>
<td>
@Html.DisplayFor(modelItem => item.description)
</td>
<td>
@Html.ActionLink("Select", "Index", new { fund_category_id = item.id }, null)
</td>
</tr>
}
</tbody>
</table>
@if (Model.ProjectCategory != null) {
<table class="table table-bordered table-hover ">
<thead>
<tr>
<th>id</th>
<th>title </th>
<th>
description
</th>
<th>Edit</th>
</tr>
</thead>
<tbody>
@foreach (var item in Model.ProjectCategory)
{
<tr>
<td>
@Html.DisplayFor(modelItem => item.id)
</td>
<td>
@Html.DisplayFor(modelItem => item.title)
</td>
<td>
@Html.DisplayFor(modelItem => item.description)
</td>
<td>
@Html.ActionLink("Edit", "ProjectCategoryEdit", new { id = item.id }, new { @class = "btn btn-primary" })
</td>
</tr>
}
</tbody>
</table>
}
@section Scripts{
<script>
$(document).ready(function () {
$("#myDataTable").DataTable({
searching: false,
dom: 'Bfrtip'
});
});
</script>
如果仅在数据表中有很多数据，则上面的脚本用于分页数据表。
为了充分发挥功能，我在单一视图中创建了两个数据表，在控制器中创建了代码以显示两个数据表的数据。
这是我在索引控制器中的代码：
pppmsTAYABAS_dbEntities db = new pppmsTAYABAS_dbEntities();
public ActionResult Index(int? fund_category_id)
{
var viewModel = new InstructorIndexData();
viewModel.FundCategory = (from p in db.pmTA_FundCategory
select new
{
id = p.id,
code = p.code,
title = p.title,
description = p.description,
status = p.status
}).ToList()
.Select(x => new pmTA_FundCategory()
{
id = x.id,
code = x.code,
title = x.title,
description = x.description,
status = x.status
});
if (fund_category_id != null)
{
ViewBag.fund = fund_category_id.Value;
viewModel.ProjectCategory = (from p in db.pmTA_ProjectCategory
join g in db.pmTA_FundCategory
on p.fund_category_id equals g.id
where p.fund_category_id == fund_category_id
select new
{
id = p.id,
title = p.title,
description = p.description,
title1 = g.title,
status = p.status
}).ToList()
.Select(x => new pmTA_ProjectCategory()
{
id = x.id,
title = x.title,
description = x.description,
title1 = x.title1,
status = x.status
});
}d
return View(viewModel);
}
当我运行它时，按钮“选择”起作用。 数据表显示了另一个数据表，该数据表与基于数据表的ID在数据表中选择的数据相对应。
这是运行程序时的结果：
这是当您单击按钮“选择”，然后显示另一个数据表对应于第一个数据表的ID时的结果：
但是问题是：
当我添加下拉列表作为我的工具来过滤我的第一个数据表的数据时。
现在，当我添加下拉列表作为过滤工具时，这就是我的View代码：
@using iBUDGET.Models;
@model MyData
<div>
@using (Html.BeginForm("Index", "Test", FormMethod.Get))
{
@Html.DropDownList("title", new SelectList(ViewBag.funds) , "Select...", new
{ @class = "form-control" })
@Html.DropDownList("code", new SelectList(ViewBag.codes), "Select...", new
{ @class = "form-control" })
<input type = "submit" value= "Search" />
}
</div>
<table id="myDataTable" class="table table-bordered table-hover ">
<thead>
<tr>
<th>id</th>
<th>code</th>
<th>
title
</th>
<th>
description
</th>
<th>--</th>
</tr>
</thead>
<tbody>
@foreach (var item in Model.FundCategory)
{
string selectedRow = "";
if (item.id == ViewBag.fund)
{
selectedRow = "success";
}
<tr class="@selectedRow">
<td>
@Html.DisplayFor(modelItem => item.id)
</td>
<td>
@Html.DisplayFor(modelItem => item.code)
</td>
<td>
@Html.DisplayFor(modelItem => item.title)
</td>
<td>
@Html.DisplayFor(modelItem => item.description)
</td>
<td>
@Html.ActionLink("Select", "Index", new { fund_category_id = item.id }, null)
</td>
</tr>
}
</tbody>
</table>
@if (Model.ProjectCategory != null) {
<table class="table table-bordered table-hover ">
<thead>
<tr>
<th>id</th>
<th>title </th>
<th>
description
</th>
<th>Edit</th>
</tr>
</thead>
<tbody>
@foreach (var item in Model.ProjectCategory)
{
<tr>
<td>
@Html.DisplayFor(modelItem => item.id)
</td>
<td>
@Html.DisplayFor(modelItem => item.title)
</td>
<td>
@Html.DisplayFor(modelItem => item.description)
</td>
<td>
@Html.ActionLink("Edit", "ProjectCategoryEdit", new { id = item.id }, new { @class = "btn btn-primary" })
</td>
</tr>
}
</tbody>
</table>
}
@section Scripts{
<script>
$(document).ready(function () {
$("#myDataTable").DataTable({
searching: false,
dom: 'Bfrtip'
});
});
</script>
这就是我控制器的代码
pppmsTAYABAS_dbEntities db = new pppmsTAYABAS_dbEntities();
[HttpGet]
public ActionResult Index(int? fund_category_id, string title,
string code)
{
ViewBag.funds = (from r in db.pmTA_FundCategory
select r.title).Distinct();
ViewBag.codes = (from r in db.pmTA_FundCategory
select r.code).Distinct();
var viewModel = new InstructorIndexData();
viewModel.FundCategory = (from p in db.pmTA_FundCategory
where p.title == title || title == null || title = ""
where p.code == code || code || code == null || code = ""
select new
{
id = p.id,
code = p.code,
title = p.title,
description = p.description,
status = p.status
}).ToList()
.Select(x => new pmTA_FundCategory()
{
id = x.id,
code = x.code,
title = x.title,
description = x.description,
status = x.status
});
if (fund_category_id != null)
{
ViewBag.fund = fund_category_id.Value;
viewModel.ProjectCategory = (from p in db.pmTA_ProjectCategory
join g in db.pmTA_FundCategory
on p.fund_category_id equals g.id
where p.fund_category_id == fund_category_id
select new
{
id = p.id,
title = p.title,
description = p.description,
title1 = g.title,
status = p.status
}).ToList()
.Select(x => new pmTA_ProjectCategory()
{
id = x.id,
title = x.title,
description = x.description,
title1 = x.title1,
status = x.status
});
}
return View(viewModel);
}
这就是问题：
第一个数据表过滤数据表，但是当您单击“选择”按钮时，它无法突出显示所选数据，并且Model.FundCategory的数据表刷新并再次显示第一个数据（ Model.FundCategory ）数据表，但过滤第二个数据表。
我将使用图片向您展示问题。
这是当我再次运行带有下拉菜单的项目时：
当我过滤我的第一个数据表时：
然后，当我单击数据中的“选择”按钮时，就像上图一样进行过滤。
这成为结果：
问题是：
上面显示了我的第一个数据表的数据刷新到相同的状态，该状态再次包含所有数据，尽管单击“选择”按钮必须对其进行过滤，但它必须仅显示经过过滤的数据，而不是所有数据。
过滤数据后，必须保留突出显示的部分，但不能保留数据表中的所有数据。
一定是这样的（我刚刚编辑了这张图片）：
希望您能帮助我解决问题。
1 个解决方案
解决方案1
0 2018-09-06 06:59:10
首次运行项目时，您的Index操作方法将构造查询以从FundCategory和ProjectCategory获取所有数据，并将其绑定到上图所示的剃刀视图。
现在，如果您从两个下拉菜单中选择任何一个选项，则它将过滤您的FundCategory并显示有关在两个下拉菜单中选择的选项的相应记录。
现在，如果您在过滤记录中单击“ Select按钮，则它将再次击中相同的“ Index操作方法，但是这次已经向它提供了fund_category_id ，但是title和code参数变为空，因为您没有从选择按钮提供给“ Index操作方法，因此行动方法中，您的FundCategory将返回所有数据。
因此，您还必须从选择按钮中传递这些参数，例如
<td>
@Html.ActionLink("Select", "Index", new { fund_category_id = item.id, title = titleSelectedFomDropDown, code = codeSelectedFromDropDown }, null)
</td>
但是我认为这很难做到，因此您可以按照以下步骤实现您的目标。
您必须用两种不同的操作方法将这两种操作分开，一种方法是第一次加载所有数据，第二种方法是从选择按钮单击中获取过滤的数据。
1）编写您的Index操作方法，以携带您的下拉数据和FunCategory数据，例如
您的下拉菜单将保留在主视图中，并为两个表创建部分视图，因此，如果您从下拉菜单中选择选项，则仅刷新部分视图，并且主视图的所选下拉列表值将保持不变，否则，您的下拉菜单每次单击选择按钮时都会刷新。
public ActionResult Index()
{
ViewBag.funds = (from r in db.pmTA_FundCategory
select r.title).Distinct();
ViewBag.codes = (from r in db.pmTA_FundCategory
select r.code).Distinct();
var viewModel = new InstructorIndexData();
viewModel.FundCategory = (from p in db.pmTA_FundCategory
where p.title == title || title == null || title = ""
where p.code == code || code || code == null || code = ""
select new
{
id = p.id,
code = p.code,
title = p.title,
description = p.description,
status = p.status
}).ToList()
.Select(x => new pmTA_FundCategory()
{
id = x.id,
code = x.code,
title = x.title,
description = x.description,
status = x.status
});
}
2）现在，如果您单击任何记录的选择按钮，则必须通过fund_category_id以便按如下所示修改剃须刀
<td>
@Html.ActionLink("Select", "Index", "Default", new { fund_category_id = item.id }, new { @class = "myLink" })
</td>
然后添加脚本以获取下拉值和基金类别ID，例如
$(document).on('click', '.myLink', function (e) {
e.preventDefault();
var fund_category_id = $(this).attr('href').split('?')[1].split('=')[1];
$.ajax({
url: "@Url.Action("GetFilteredData", "Default")",
data: { fund_category_id: fund_category_id },
type: "Get",
dataType: "html",
success: function (data) {
$("#myPartialView").html( data );
}
});
});
3）上面的ajax调用将击中下面的操作方法，该方法只能过滤ProjectCateogry wrt fund_category_id
[HttpGet]
public ActionResult GetFilteredData(int? fund_category_id)
{
var viewModel = new InstructorIndexData();
if (fund_category_id != null)
{
ViewBag.fund = fund_category_id.Value;
viewModel.ProjectCategory = (from p in db.pmTA_ProjectCategory
join g in db.pmTA_FundCategory
on p.fund_category_id equals g.id
where p.fund_category_id == fund_category_id
select new
{
id = p.id,
title = p.title,
description = p.description,
title1 = g.title,
status = p.status
}).ToList()
.Select(x => new pmTA_ProjectCategory()
{
id = x.id,
title = x.title,
description = x.description,
title1 = x.title1,
status = x.status
});
}
return View(viewModel);
}
如何使用jQuery Datable插件突出显示DataTable的搜索文本
[英]How to highlight search text of DataTable using jQuery Datable plug-in
使用带有日历选择的单个文本框将Javascript日期过滤器过滤到DataTable
[英]Javascript date filter to DataTable using single textbox with calendar selection
使用带有复选框的多选下拉列表在 jquery 数据表中搜索或过滤列
[英]Search or filter a column in jquery datatable using multi select dropdown with checkbox
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.