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

【问题标题】：Button "Select" to filter datable to another datatable using two model in single view按钮“选择”以在单个视图中使用两个模型将数据表过滤到另一个数据表
【发布时间】：2018-09-06 14:59:10
【问题描述】：

几天前，我开始在 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) 数据表，但过滤第二个数据表。

我会用图片告诉你问题。

这是我再次使用下拉菜单运行我的项目时：

当我过滤我的第一个数据表时：

然后当我点击数据中的“选择”按钮时，我会像上图一样过滤。

这变成了结果：

问题是：

上面显示我的第一个数据表的数据刷新到所有数据的相同状态，尽管我单击“选择”按钮必须对其进行过滤，但它必须只显示我的数据过滤和并非所有数据。
数据过滤时，高亮部分必须保留，但不能保留数据表中的所有数据。

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

希望您能帮助解决我的问题。

【问题讨论】：

我很快就会看一下 :)
我已经有了我的teamviewer，但是你明天再做可以吗？所以我已经在我家了
是的，当你有空时联系我
我准备好了，但我的 id 和密码已更改等等，我将把密码和 ID 发送给您
这是我的 ID 1 051 489 883 和密码 6182

标签： javascript sql model-view-controller

【解决方案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 wrtfund_category_id的action方法

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

        }

【讨论】：