如何将 dom 元素值传递给 ajax 请求（html.Pagedlist 参数）

Posted 2023-02-22

【中文标题】如何将 dom 元素值传递给 ajax 请求（html.Pagedlist 参数）

【英文标题】：how pass dom element value to ajax request (html.Pagedlist parameters)

【发布时间】：2021-01-26 07:06:46

【问题描述】：

我正在学习 ajax 请求，我想知道我是否在这里做。好吧，我有一个页面，其中包括分页、排序和搜索。我试图通过 ajax 来获取它，因为我不想再次加载整个页面。所以这是我父母观点的一部分： .

..
<div id="nursesList">
               @html.Partial("PaginatedNurses", Model)
</div>
...

这是我尝试使用 ajax 的部分内容：

@using Microsoft.AspNetCore.Server.Kestrel.Core.Internal.Http
@using X.PagedList
@using X.PagedList.Mvc.Core
@using X.PagedList.Mvc.Core.Common
@model X.PagedList.IPagedList<Services.ViewModel.Admin.Nurse.NurseDetailsViewModel>
    <form>
    <div id="RegisteredNurses">
        <div class="form-group row">
            <div class="col-md-3">
                از سن <input class="form-control" id="minAge" type="number" name="MinAge" value="@ViewBag.MinAge" />

            </div>
            <div class="col-md-3">
                تا سن <input class="form-control" id="maxAge" type="number" name="maxAge" value="@ViewBag.MaxAge" />
            </div>
            <div class="col-md-3">
                مرتب سازی بر اساس
                <select class="form-control" name="SortOrder" value="@ViewBag.SortOrder" style="width: 200px" id="sortOrder">
                    <option value="age">
                        سن
                    </option>
                    <option value="registerDate">
                        زمان ثبت نام
                    </option>
                </select>
            </div>
            <div class="col-md-3">
                نحوه مرتب سازی
                <select class="form-control" name="SortType" value="@ViewBag.SortType" style="width: 200px" id="sortType">
                    <option value=1>
                        صعودی
                    </option>
                    <option value=0>
                        نزولی
                    </option>
                </select>
            </div>
        </div>
        <input type="submit" value="جست و جو" id="btnSearch" />
        <div class="table-responsive">
            <table id="table-extended-transactions" class="table mb-0">
                <thead>
                <tr>
                    <th>نام</th>
                    <th>سن</th>
                    <th>شماره پروانه کار</th>
                    @*<th>شماره ملی</th>*@
                    <th>دوره حرفه ای</th>
                    <th>تاریخ ثبت نام</th>
                </tr>
                </thead>
                <tbody>
                @foreach (var nurse in Model)
                
                    <tr>
                        <td><i class="bx bxs-circle success font-small-1 mr-50 align-middle"></i><span>@nurse.FullName</span></td>
                        <td class="text-bold-700">@nurse.Age</td>
                        <td class="text-bold-700">@nurse.NurseSystemNumber</td>
                        <td>
                            @nurse.ProfessionalCourseDescription
                        </td>
                        <td>
                            @nurse.SubmissionDatePersian
                        </td>
                        <td>
                            <div class="dropdown">
                                <span class="bx bx-dots-horizontal-rounded font-medium-3 dropdown-toggle nav-hide-arrow cursor-pointer" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" role="menu">
                                </span>
                                <div class="dropdown-menu">
                                    <a class="dropdown-item" href="@Url.Action("NurseDetails", "Admin", new id = @nurse.Id)"><i class="bx bx-edit-alt mr-1"></i> نمایش جزئیات</a>
                                    <a class="dropdown-item" onclick="setInvitation('@nurse.Id')">تایید</a>
                                    <a class="dropdown-item" onclick="refuseRegister('@nurse.Id')"><i class="bx bx-trash mr-1"></i>عدم تایید</a>
                                </div>
                            </div>
                        </td>
                    </tr>

                
                </tbody>
            </table>
            <div id="pager">
                @Html.PagedListPager((IPagedList)Model, page => Url.Action("RegisteredNurseList", new  page),
                    PagedListRenderOptions.EnableUnobtrusiveAjaxReplacing(new AjaxOptions()  HttpMethod = "GET", UpdateTargetId = "RegisteredNurses" ))
            </div>
        </div>

    </div>
    </form>
        @section modalSection
        
            <script src="~/js/jquery.unobtrusive-ajax.min.js"></script>
        

主要部分在这里：

<div id="pager">
                @Html.PagedListPager((IPagedList)Model, page => Url.Action("RegisteredNurseList", new  page),
                    PagedListRenderOptions.EnableUnobtrusiveAjaxReplacing(new AjaxOptions()  HttpMethod = "GET", UpdateTargetId = "RegisteredNurses" ))
            </div>

我想在我的 dom 中添加输入值。例如：

<div id="pager">
                @Html.PagedListPager((IPagedList)Model, page => Url.Action("RegisteredNurseList", new  page , sortOrder=('#sortOrder').val()), 
                    PagedListRenderOptions.EnableUnobtrusiveAjaxReplacing(new AjaxOptions()  HttpMethod = "GET", UpdateTargetId = "RegisteredNurses" ))
            </div>

我知道这个sortOrder=('#sortOrder').val() 不是一个有效的代码，但我想为此找到一个替代方法，甚至是更好的方法。 这是我的控制器：

public async Task<ActionResult> RegisteredNurseList(int? page, int? sortType,string sortOrder,
            int? minAge, int? maxAge)
        
            bool isAjax = HttpContext.Request.Headers["X-Requested-With"] == "XMLHttpRequest";
            int pageNumber = page ?? 1;
            int pageSize = 2;
            int skip = (pageNumber - 1) * pageSize;
           
            ViewBag.MinAge = minAge ?? 18;
            ViewBag.MaxAge = maxAge ?? 99;
            ViewBag.sortType = sortType ?? 1;
            ViewBag.SortOrder = sortOrder;
           
            
            var tuple = await _admin.GetNurses(skip, pageSize, sortOrder, sortType ?? 1, minAge ?? 18, maxAge ?? 99);
            int total = tuple.Item2;
            var nurses = tuple.Item1;
            var result = new StaticPagedList<NurseDetailsViewModel>(nurses, pageNumber, pageSize, total);
            
            
            if (isAjax)
            
                return (ActionResult) PartialView("PaginatedNurses", result);
            
            return View(result);
            
        

【参考方案1】：

我在这里的回答会对你有所帮助：https://***.com/a/50727347/177416

您希望捕获用户单击分页器控件中的页码并在让链接通过之前重写链接。这是通过页面编号上的 javascript onClick 处理程序在客户端完成的；以下处理程序进入您的 jQuery 文档就绪事件处理程序：

$('#pager').find('a[href]').on('click', function (e) 
    e.preventDefault();
    location.href = this.split('?')[0]
        + "?page=" + getQueryStringValue(this, 0).replace('page=','') 
        + "&sortOrder=" + $("#sortOrder").val(); // Add other values if needed
    
);

这里是辅助函数：

getQueryStringValue: function (anchor, index) 
    var queryString = $(anchor).attr('href').split('?')[1];
    var values = queryString.split('&');
    return values[index];

这一行为我们提供了原始 URL without the querystring； this 在这种情况下是 URI：

this.split('?')[0]

设置location.href就像点击一个链接；它会 redirect the page 到指定的 URI。

【讨论】：

谢谢老兄，你提到的那个问题我已经让你知道了。