按钮“选择”在单个视图中使用两个模型将datable过滤到另一个数据表 [英] Button "Select" to filter datable to another datatable using two model in single view
问题描述
几天前，我开始在MVC中创建另一个关于过滤数据表的项目。
Days ago, I started to create another project in MVC about filtering data tables.
我决定创建使用选择按钮过滤另一个数据表的数据表。
I decided to create datatable that filters another datatable using a "Select" button.
我做的第一件事是创建一个可用于在单个视图中显示两个数据表的类。
The first thing that I did was to create a class that can be used to display two data tables in single view.
这是我的班级：
public class MyData
{
public IEnumerable<pmTA_ProjectCategory> ProjectCategory { get; set; }
public IEnumerable<pmTA_FundCategory> FundCategory { get; set; }
}
然后我在一个视图中创建了两个数据表。
Then I created two data table in a single view.
这是我的代码：
@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>
如果数据表中有大量数据，则上述脚本用于分页数据表。
The script above is for the paging of a data table if there are lots of data in data table only.
为了完全发挥作用，单个视图中的两个数据表我在控制器中创建了代码来显示两个数据表的数据。
In order to fully function, the two data tables in single view I created codes in controller to display the data of two data table.
这是我的索引控制器中的代码：
This is my code in my Index controller:
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选择的数据。
When I run it, the button "Select" functions. The data table shows another data table corresponds to the data selected in data table based on the ID of data table.
这是运行程序时的结果：
This is the result when you run the program:
这是您点击按钮时的结果选择，然后显示另一个数据表对应于第一个数据表的ID：
This is the result when you click the button "Select", then show the another data table corresponds to the ID of the first data table:
但问题是：
当我添加下拉菜单作为我的工具来过滤我的第一个数据表的数据。
When I added drop downs as my tool to filter the data of my first data table.
这是我添加下拉列表作为过滤工具时的View代码：
This is now my code for View when I Added the drop downs as tool for filtering:
@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>
现在这是我控制器的代码
and this is now the codes for my controller
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 ）数据表的所有数据，但过滤第二个数据表。
The first data table filters the data table, but when you click the "Select" Button, it can't highlight the data selected, and the data table of Model.FundCategory refreshes and shows again all the data of the first(Model.FundCategory) data table, but filters the second data table.
我会用图片向你展示这个问题。
I will show you the problem using pictures.
这是我用下拉列表重新运行项目的时候：
This is when I run again my project with drop down:
当我过滤我的第一个数据表时：
This when I filter my first data table:
然后当我点击选择但是吨数据我过滤就像上图。
Then when I click the "Select" button in the data I filter just like the picture above.
这就是结果：
问题是：
-
上面显示我的第一个数据表的数据刷新到相同的状态，它再次包含所有数据虽然必须过滤，但我点击选择按钮，它必须只显示我的数据已过滤而不是所有数据。
It shows above that the data of my first data table refreshes to the same state which has all the data again though it must be filtered though I click the "Select" button, it must only show my data filtered and not all data.
当过滤数据时，必须保留突出显示的部分，但不能保留数据表中的所有数据。
When the data filtered the highlighted portion must be retain but not all the data in data table.
一定是这样的（我刚刚编辑了这张图片）：
It must be like this (I just edited this picture):
希望您能解决我的问题。
Hope that you will help in my problem.
推荐答案
第一次运行项目时，索引操作方法将构造查询以从 FundCategory 和 ProjectCategory 获取所有数据并将其绑定到您在上面的图片中显示的razor视图。
When you run your project first time, your Index action method will construct query to get all data from FundCategory and ProjectCategory and bind it to razor view that you shown in above pictures.
现在，如果你从两个下拉菜单中选择任何一个选项，那么它将过滤你的 FundCategory 并显示相应的记录关于在两个下拉列表中选择的选项。
Now if you select any option from both of drop downs then it will filter your FundCategory and show respective record regarding option selected in both of drop downs.
现在如果你点击过滤记录中的选择按钮那么它将会再次点击相同的索引操作方法，但这次 fund_category_id 已经提供给它但是 title 和代码参数变为null，因为您没有从select中提供 Index 操作方法按钮，以便在操作方法中您的 FundCategory 返回所有数据。
Now if you click on Select button in filtered record then it will hit again to same Index action method but this time fund_category_id has been supplied to it but title and code parameters become null because your did not supplied to your Index action method from select button so that in action method your FundCategory returns all of data.
所以你必须也传递这些参数从选择按钮开始，如
So for you have to also pass these parameter from select button like
<td>
@Html.ActionLink("Select", "Index", new { fund_category_id = item.id, title = titleSelectedFomDropDown, code = codeSelectedFromDropDown }, null)
</td>
但我认为这很难做到，所以你可以按照以下步骤来实现你的目标。
But i think this is hard to do this, So you may follow below steps to achieve your goal.
你必须用两种不同的动作方法分开两个操作，一个用于第一次加载所有数据，第二个用于从选择按钮点击获取过滤数据。
You have to separate both of operation in two different action method, one for load all data for first time and second for getting filtered data from select button click.
1）编写带有下拉数据的 Index 操作方法和 FunCategory 数据如
1) Write your Index action method that carry your drop down data and FunCategory data like
您的下拉菜单将保留在主视图中并为两个表创建部分视图，这样如果您从向下选择选项，则只有部分视图将刷新后，主视图的选定下拉值将保持原样，否则每次单击选择按钮时下拉都会刷新。
You drop down will remain in your main view and create partial view for both of tables so that if you select option from down then only partial view will get refreshed and your main view's selected drop down values will remain as it is, otherwise your drop down will refreshed every time when you click on select button.
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 以便修改你的剃须刀，如下所示
2) Now if you click on select button for any record then you have to pass fund_category_id so for modify your razor like below
<td>
@Html.ActionLink("Select", "Index", "Default", new { fund_category_id = item.id }, new { @class = "myLink" })
</td>
然后添加脚本以获取下拉值和基金类别ID，如
Then add script to get drop down values and fund category id like
$(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调用将触及下面只能过滤 fund_category_id
3) And the above ajax call will hit below action method that can only filter 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);
}
这篇关于按钮“选择”在单个视图中使用两个模型将datable过滤到另一个数据表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
