如何将dom元素值传递给ajax请求(html.Pagedlist参数) [英] how pass dom element value to ajax request (html.Pagedlist parameters)
问题描述
我正在学习ajax请求，我想知道我是否在这里做.好吧，我有一个页面，其中包括分页，排序和搜索.我想通过ajax来获得此信息，因为我不想再次加载整个页面.所以这是我父母观点的一部分:
I am learning ajax requests and I was wondering if I am doing right here. Well I have a page which include pagination, sorting and searching. I am trying to get this by ajax because I don't want to load the whole page again. so this is part of my parent view : .
..
<div id="nursesList">
@Html.Partial("PaginatedNurses", Model)
</div>
...
这是我尝试使用ajax的部分:
And this is my partial which I try to use 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中添加输入值.例如:
I want to add the value of inputs in my dom. For example:
<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()不是有效的代码，但是我想为此或其他更好的方法找到替代方法.这是我的控制器:
I know this sortOrder=('#sortOrder').val() is not a valid code, but I want to find an alternative for this or even any better approach.
This is my controller:
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);
}
推荐答案
我在这里的答案将为您提供帮助: https://stackoverflow.com/a/50727347/177416
My answer here will help you: https://stackoverflow.com/a/50727347/177416
您要捕获用户在寻呼机控件中对页码的点击，并在允许链接通过之前重写该链接.这是通过页面编号上的JavaScript onClick 处理程序在客户端上完成的；下列处理程序会在您的jQuery文档就绪事件处理程序中使用:
You want to capture the user's clicking of a page number in the pager control and rewrite the link before letting it through. This is done on the client via JavaScript onClick handler on the page numbers; the following handler goes in your jQuery document ready event handler:
$('#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 而没有查询字符串；在这种情况下， this 是URI:
This line gets us the raw URL without the querystring; this in this case is the URI:
this.split('?')[0]
设置 location.href 就像单击一个链接；它将将页面重定向到指定的URI.
Setting location.href is like clicking a link; it'll redirect the page to the indicated URI.
这篇关于如何将dom元素值传递给ajax请求(html.Pagedlist参数)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
