asp.net-core - Razor Page Cascade Datatables by Dropdown

Question

我有一个下拉列表，我想在更改下拉列表后重新加载数据表请注意，复选框字段回发页面以及更新下面的数据库是 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 && 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>
        
        }

标签： asp.net-corerazorrazor-pages

Answer 1

我认为使用window.location.href是刷新数据表的一种足够简单的方法。只需改进一件事，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;
    
    //...

}