Каскадные таблицы данных страницы Razor по раскрывающемуся списку

#asp.net-core #razor #razor-pages

Вопрос:

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

 public class IndexModel : PageModel
    {
        private readonly IpponAcademy.Models.IJAContext _context;
        public List<SelectListItem> judokaGroupList { get; set; }
       
        [BindProperty]
        public Boolean IsAttend { get; set; }

        

        public IList<tbl_Judoka> tbl_Judoka { get;set; }
        public IndexModel(IpponAcademy.Models.IJAContext context)
        {
            _context = context;
        }
        public void OnGet(Guid? id)
        {
            var GroupList = _context.LK_Groups.ToList();
            judokaGroupList = GroupList.Select(a =>
                                  new SelectListItem
                                  {
                                      Value = a.Group_GUID.ToString(),
                                      Text = a.Group_Name
                                  }).OrderBy(t => t.Text).ToList();

            if (id == null)
            {
                id = Guid.Parse("7F299B82-3397-40F2-8105-65AECB1BA2A8"); //Group A
            }
            tbl_Judoka = _context.tbl_Judokas.Where(c => c.tbl_Judoka_Groups.Any(o => o.Is_Active == true amp;amp; o.Group_GUID == id)).Include(c => c.tbl_Judoka_Groups.Where(o => o.Is_Active == true amp;amp; o.Group_GUID == id)).ToList();

        }

        public void OnGetJudoka(Guid? id)
        {
            var GroupList = _context.LK_Groups.ToList();
            judokaGroupList = GroupList.Select(a =>
                                  new SelectListItem
                                  {
                                      Value = a.Group_GUID.ToString(),
                                      Text = a.Group_Name
                                  }).OrderBy(t => t.Text).ToList();

            if (id == null)
            {
                id = Guid.Parse("7F299B82-3397-40F2-8105-65AECB1BA2A8"); //Group A
            }
            
            tbl_Judoka = _context.tbl_Judokas.Where(c => c.tbl_Judoka_Groups.Any(o => o.Is_Active == true amp;amp; o.Group_GUID == id)).Include(c => c.tbl_Judoka_Groups.Where(o => o.Is_Active == true amp;amp; o.Group_GUID == id)).ToList();

        }
    }
 

ниже приведен файл cshtml, я был бы признателен, если бы нашел простой способ обновить данные с помощью нового выбранного поля из выпадающего списка

 @page
@model IpponAcademy.Pages.Attendance.IndexModel

        
        @{
            ViewData["Title"] = "Index";
            Layout = "~/Pages/Shared/_Layout.cshtml";
        }
        
        
        <form method="post">
       
            <div class="form-group">
                <label class="control-label">Group</label>
                <select id="ddlGroup" class="form-control" asp-items="Model.judokaGroupList"></select>
                @*onchange="alert(@Model.judokaGroupList)"*@
            </div>
        
            <table id="taskDt" class="table table-striped table-bordered nowrap" style="width:100%">
                <thead>
                    <tr>
                        <th>
                            Attended
                        </th>
                        <th>
                            Code
                        </th>
                        <th>
                            Image
                        </th>
                        <th>
                            Judoka
                        </th>
                    </tr>
                </thead>
                <tbody>
                    @foreach (var item in Model.tbl_Judoka)
                    {
                        var imagePath = @"UploadedFiles/"   item.J_Image;
                        <tr>
                            <td>
        
                                <input type="hidden" name="J_GUID" id="J_GUID" value="@item.J_GUID" />
        
                                <input asp-for="IsAttend" name="IsAttend" id="IsAttend" type="checkbox" onclick="this.form.submit()" />
        
                            </td>
                            <td>
                                @Html.DisplayFor(modelItem => item.J_Code)
                            </td>
                            <td align="center">
        
                                <img src="@imagePath" alt="Judoka" width="50" height="50" class="rounded-circle mr-1" onclick="return LoadDiv(this.src);" style="cursor: pointer" />
                            </td>
                            <td>
                                @Html.DisplayFor(modelItem => item.J_Name)
                            </td>
        
                        </tr>
                    }
                   
                </tbody>
            </table>

        </form>

        @section scripts{
            <script>
        
                var table;
                function LoadData() {
                    //alert('in');
                    table = $("#taskDt").DataTable({
                        
                        paging: true,
                        responsive: true,
                        searching: true,
                        ordering: true,
                        order: [[1, "asc"]]
                    });
                }
        
                $(document).ready(function () {
                    LoadData();
                    
                })
                $("#ddlGroup").change(function () {
                    alert('DDLGroup');
                    //table.ajax.url("/Attendance/Index?handler=GETamp;Id="   $("#ddlGroup Option:Selected").val()).load();
                    window.location.href = '/Attendance/Index?handler=Judokaamp;Id='   $("#ddlGroup Option:Selected").val();
                    });

        </script>
        
        }
 

Ответ №1:

Я думаю, что использование window.location.href было достаточно простым способом обновить данные.Только одну вещь вам нужно улучшить, OnGet и OnGetJudoka метод один и тот же,почему бы не использовать только один метод.

Изменить:

 $("#ddlGroup").change(function () {
      window.location.href = '/Attendance/Index?handler=Judokaamp;Id='   $("#ddlGroup Option:Selected").val();
});
 

Для:

 $("#ddlGroup").change(function () {
      window.location.href = '/Attendance/Index?Id='   $("#ddlGroup Option:Selected").val();
});
 

Если вам нужно использовать другой способ,вы могли бы использовать form.submit() :

Примечание:Обязательно добавьте name="id" ,иначе параметр не будет привязан к серверной части.

 <form method="post" asp-page-handler="Judoka">

    <div class="form-group">
        <label class="control-label">Group</label>
        <select id="ddlGroup" class="form-control" name="id" asp-items="Model.judokaGroupList" 
                                                   onchange="this.form.submit()"></select>         
    </div>
</form>
 

Внутренний код:

Изменить:

 public void OnGetJudoka(Guid? id)
 

Для:

 public void OnPostJudoka(Guid? id)
 

Кстати,у меня также есть предложение, что вам лучше сохранить выбранное значение после обратной передачи :

 public void OnGetJudoka(Guid? id)
{
    var GroupList = _context.LK_Groups.ToList();
    judokaGroupList = GroupList.Select(a =>
                            new SelectListItem
                            {
                                Value = a.Group_GUID.ToString(),
                                Text = a.Group_Name
                            }).OrderBy(t => t.Text).ToList();
    //maintain the selected value after post back...
    var selectedValue= judokaGroupList.Where(a => a.Value == id.ToString()).FirstOrDefault();
    selectedValue.Selected = true;
    
    //...

}