Кнопка «Выбрать» для фильтрации данных к другим данным с использованием двух моделей в одном представлении

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

      }

Когда я запускаю его, работает кнопка «Выбрать» Таблица данных показывает, что другая таблица данных соответствует данным, выбранным в таблице данных на основе идентификатора таблицы данных.

Это результат при запуске программы:

Это результат, когда вы нажимаете кнопку «Выбрать», а затем показывает, что другая таблица данных соответствует идентификатору первой таблицы данных:

Но проблема в следующем:

Когда я добавил раскрывающиеся списки в качестве инструмента для фильтрации данных моей первой таблицы данных.

Теперь это мой код для 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>

Затем добавьте скрипт, чтобы получить выпадающие значения и идентификатор категории фонда, например

$(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);

        }