按钮“选择”可在单个视图中使用两个模型将数据过滤到另一个数据表

Question

几天前，我开始在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. 上面显示了我的第一个数据表的数据刷新到相同的状态，该状态再次包含所有数据，尽管必须通过单击“选择”按钮对其进行过滤，但必须仅显示过滤后的数据并并非所有数据。

2. 过滤后的数据必须保留突出显示的部分，但不能保留数据表中的所有数据。

一定是这样的（我刚刚编辑了这张图片）：

希望您对我的问题有所帮助。

Answer 1

第一次运行项目时，您的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);

        }