Razor Page Cascade Datatables by Dropdown

Question

我有一个下拉列表，我想在更改下拉列表后重新加载数据表，请注意复选框字段 post返回页面以及更新下面的数据库是 cs 文件，并且将 post

之后的 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 && o.Group_GUID == id)).Include(c => c.tbl_Judoka_Groups.Where(o => o.Is_Active == true && 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 && o.Group_GUID == id)).Include(c => c.tbl_Judoka_Groups.Where(o => o.Is_Active == true && 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=GET&Id=" + $("#ddlGroup Option:Selected").val()).load();
                    window.location.href = '/Attendance/Index?handler=Judoka&Id=' + $("#ddlGroup Option:Selected").val();
                    });

        </script>
        
        }

Answer 1

我认为使用window.location.href已经是一种足够简单的方法来刷新datatable.Just你需要改进的一件事，OnGet和OnGetJudoka方法是一样的，为什么不只使用一种方法。

变化：

$("#ddlGroup").change(function () {
      window.location.href = '/Attendance/Index?handler=Judoka&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;
    
    //...

}

Razor Page Cascade Datatables by Dropdown

Razor Page Cascade Datatables by Dropdown

razor

asp.net-core

razor-pages