как сделать пользовательскую фильтрацию диапазона с использованием asp. net core MVC и Entity Framework - PullRequest
Новая
       0

как сделать пользовательскую фильтрацию диапазона с использованием asp. net core MVC и Entity Framework

0 голосов
/ 16 января 2020

Я хочу использовать текстовое поле, радиокнопку и флажок для фильтра и связать данные с таблицей без использования кнопки. (Начальная загрузка таблицы не требуется, например: когда я набираю текст в текстовом поле или изменяю переключатель и проверяю, данные должны быть связаны к таблице) в asp. net ядро ​​3.0

1 Ответ

0 голосов
/ 17 января 2020

Вы можете поместить таблицу в частичное представление, использовать ajax, чтобы отправить отфильтрованные данные (text.checkbox и значения радио) в действие и вернуть PartialViewResult. Наконец, ajax выводит результат в представление.

См. Мою простую демонстрацию:

1.Модель: 

public class Student
{
    [Key]       
    public int Id { get; set; }
    public string FirstName { get; set; }
    public string LastName{ get; set; }
    public string Male {get;set;}
}

2. Таблица частичная Представление (/Views/Shared/_StudentsPartial.cshtml) 

@model IEnumerable<Student>
<table class="table">
    <thead>
        <tr>
            <th>
                @Html.DisplayNameFor(model => model.FirstName)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.LastName)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Male)
            </th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model)
        {
            <tr>
                <td>
                    @Html.DisplayFor(modelItem => item.FirstName)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.LastName)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Male)
                </td>
            </tr>
        }
    </tbody>
</table>

3. Главное представление (/Views/Students/GetStudents.cshtml) 

@model IEnumerable<Student>

<h1>GetStudents</h1>

<form id="myform" >
    <p>
        Title: <input type="text" name="SearchString" oninput="filterData()">
    </p>
    <p>
        Ids: <input type="checkbox" id="require1" name="CheckboxName" value="hello" onchange="filterData()" />hello
        <input type="checkbox" id="require2" name="CheckboxName" value="world" onchange="filterData()"/>world
    </p>
    <p>
        <input type="radio" name="gender" value="male" onchange="filterData()"> Male<br>
        <input type="radio" name="gender" value="female" onchange="filterData()"> Female<br>

    </p>

</form>

<div id="content">
    @await Html.PartialAsync("_StudentsPartial")
</div>
@section Scripts{
    <script>
        function filterData() {

             var str = $( "#myform" ).serialize();
            $.ajax({
                type: "GET",
                url: '/Students/GetFilterStudents?'+ str,
                success: function (result) {
                     $("#content").html(result)
                },
                error: console.log("it did not work"),
            });
        }

    </script>
}

4.StudentsController 

public class StudentsController : Controller
{
    private readonly ApplicationDbContext _context;

    public StudentsController(ApplicationDbContext context)
    {
        _context = context;
    }

    [HttpGet]
    public async Task<ActionResult<IEnumerable<Student>>> GetStudents()
    {

        var allStudents = await _context.Students.ToListAsync();
        return View(allStudents);

    }

    //The parameters' names matches the `name` attribute of your inputs in GetStudents.cshtml
    [HttpGet]
    public async Task<IActionResult> GetFilterStudents(
             string SearchString,
             List<string> CheckboxName, 
             string gender)
    {
        //filter data with your logic
        var result = await _context.Students.Where(s=> ...).ToListAsync();

        return PartialView("_StudentsPartial", result);

    }
}
...