Как отфильтровать данные в html-таблице, изменив опцию в выпадающем меню в asp.net mvc? - PullRequest
0 голосов
/ 31 августа 2018

Прошло несколько дней с тех пор, как я начал изучать программирование MVC, и, честно говоря, я все еще справляюсь с новой средой MVC.

В моем проекте я начал создавать таблицу данных, которая отображает данные в моей базе данных с использованием этих кодов.

Это мои коды и контроллер. Эта часть работает очень хорошо.

 <table id="table1" >
<thead>
    <tr>
        <th>id</th>
        <th>title </th>
        <th>
            description
        </th>

    </tr>
</thead>
<tbody>
    @foreach (var item in Model)
    {

        <tr>
            <td>
                @Html.DisplayFor(modelItem => item.id)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.title)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.description)
            </td>

        </tr>
    }
    </tbody>
  </table>
     }

   var charts = (from p in db.pmTA_ProjectCategory

                      select new
                      {
                          id = p.id,
                          title = p.title,
                          description = p.description,

                      }).ToList()
                 .Select(x => new pmTA_ProjectCategory()
                 {
                     id = x.id,
                     title = x.title,
                     description = x.description,

                 });

        return View(charts.ToList());

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

Это мой код и контроллер для отображения раскрывающегося списка и данных внутри раскрывающегося списка.

 <div>
 @Html.DropDownList("projectcat", ViewBag.proj as SelectList, "Select...", new { 
 @class = "form-control" })
 </div>

         var data1 = from p in db.pmTA_ProjectCategory
                    select new
                    {
                        id = p.id,
                        title = p.title,
                        description = p.description
                    };

         SelectList list = new SelectList(data1, "id", "title");
         ViewBag.proj = list;

когда дело доходит до отображения данных внутри выпадающего меню, оно снова работает гладко.

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

Я создал коды в javascript для фильтрации данных, используя выпадающий список.

Это код:

 <script>
    $(document).ready(function () {
        var table = $("#table1").DataTable();

        $("#projectcat").change(function () {
            table.search(this.value).draw();
        });

    });
   </script>

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

Ответы [ 2 ]

0 голосов
/ 31 августа 2018

1) Ваше мнение должно быть строго типа IEnumerable<ProjectCategory>

2) Добавить выпадающий список

<div class="dropdown">
    @Html.DropDownList("id", (List<SelectListItem>)ViewBag.proj, "--Select id--", new { @onchange = "CallChangefunc(this.value)" })
</div>

3) Добавьте частичное представление IEnumerable<ProjectCategory> в вашем представлении. Когда вы добавляете частичное представление, отметьте его как Create as a partial view.

Имя вашего частичного просмотра: _GetItem.cshtml

Содержание частичного просмотра

<table id="table1" >
<thead>
    <tr>
        <th>id</th>
        <th>title </th>
        <th>
            description
        </th>

    </tr>
</thead>
<tbody>
    @foreach (var item in Model)
    {

        <tr>
            <td>
                @Html.DisplayFor(modelItem => item.id)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.title)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.description)
            </td>

        </tr>
    }
    </tbody>
  </table>

И назовите это частичное представление в вашем представлении чуть ниже вашего выпадающего, который вы добавили ранее.

<div id="myPartialView">
    @{Html.RenderPartial("_GetItem", Model);}
</div>

4) Ваш метод действия в контроллере будет

public ActionResult Index()
{
    var charts = db.ProjectCategories.ToList();

    List<SelectListItem> dropDownItems = charts.Select(c => new SelectListItem { Text = c.title, Value = c.id.ToString() }).ToList();
    ViewBag.proj = dropDownItems;

    return View(charts);
}

5) Добавьте вызов ajax к вашему представлению, который вызывается при изменении любого параметра в раскрывающемся списке

<script>

    function CallChangefunc(id) {
         $.ajax({
             url: "@Url.Action("GetItem", "Default")",
             data: { id: id },
            type: "Get",
            dataType: "html",    
             success: function (data) {
                 console.log(data);
                //Whatever result you have got from your controller with html partial view replace with a specific html.
                $("#myPartialView").html( data ); // HTML DOM replace
            }
        });
    }

</script>

6) И, наконец, ваш вызов ajax достиг метода ниже действия, которое может отображать только частичное представление

public PartialViewResult GetItem(int id)
{
    var charts = db.ProjectCategories.ToList();
    var model = charts.Where(x => x.id == id).ToList();
    return PartialView("_GetItem", model);
}
0 голосов
/ 31 августа 2018

Текущий статус:

  • Вы создали раскрывающийся список id='projectcat'
  • Datatable $("#table1") не отвечает на событие изменения

Решение:

  • Ваш код выглядит правильно, в этом нет ничего плохого.
  • Выполнение приведенного ниже примера работает правильно
  • Убедитесь, что нет других ошибок JavaScript, блокирующих этот код
  • Применить debugger внутри $("#projectcat").change(function () { debugger; }); для отладки кода на панели инструментов разработчика

Проверьте приведенный ниже пример, изменив раскрывающееся значение и отфильтровывая данные:

$(document).ready(function () {
    var table = $("#table1").DataTable();

    $("#projectcat").change(function () {
        console.log('Groing for folter : ' + this.value);
        table.search(this.value).draw();
    });

});
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" />


<p>Change datatable filter value : </p>
<select id="projectcat">
    <option>Rhona</option>
    <option>Colleen</option>
    <option>Jena</option>
    <option>Tiger</option>
</select>

<hr />
<table id="table1" class="display" style="width:100%">
    <thead>
        <tr>
            <th>Name</th>
            <th>Salary</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Tiger Nixon</td>
            <td>$320,800</td>
        </tr>
        <tr>
            <td>Rhona Davidson</td>
            <td>$327,900</td>
        </tr>
        <tr>
            <td>Colleen Hurst</td>
            <td>$205,500</td>
        </tr>
        <tr>
            <td>Sonya Frost</td>
            <td>$103,600</td>
        </tr>
        <tr>
            <td>Tiger Kennedy</td>
            <td>$313,500</td>
        </tr>
        <tr>
            <td>Rhona Kennedy</td>
            <td>$12,900</td>
        </tr>
    </tbody>
</table>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...