英文:
Asp.Net Core XpagedList Paging reload the page instead render inside a div
问题
I am writing and Asp.Net Core MVC 6 App and I am using X.PagedList
我正在编写一个 Asp.Net Core MVC 6 应用程序,我正在使用 X.PagedList
I render a PartialView inside a <div="dvBody">
in the parent View.
我在父视图中的 <div="dvBody">
内呈现一个部分视图。
In parent View I fill that div using Ajax
在父视图中,我使用 Ajax 填充该 div
$.ajax(
{
type: "POST",
data: model,
headers: {
"RequestVerificationToken":
$('input:hidden[name="__RequestVerificationToken"]').val()
},
url: '@Url.Action("Search", "Participant")',
success:function(result){
$("#dvBody").html(result);
},
error:function (req,status,error){
alert("error");
}
});
That Partial Page has a table with PageList
and when I change the PageNumer, I want to render the page in the same div
该部分页面包含一个带有 PageList
的表格,当我更改页数时,我希望在相同的 div 中呈现页面
@Html.PagedListPager((IPagedList)Model.SearchResultViewPaging, page => Url.Action("ResultPaging", "Participant", new { page = page }),
X.PagedList.Web.Common.PagedListRenderOptions.EnableUnobtrusiveAjaxReplacing(new AjaxOptions
{
HttpMethod = "GET",
UpdateTargetId = "dvBody",
}))
The Url of the Application is https://localhost:7063/Home/Participant
应用程序的URL是 https://localhost:7063/Home/Participant
When it runs and click Page 2 the Page redirect the Url to https://localhost:7063/ResultPaging?page=2
instead of render it inside the div defined in the Parent View and keep the Url
当运行并单击第2页时,页面将重定向到 https://localhost:7063/ResultPaging?page=2
而不是在父视图中定义的 div 内呈现页面并保持URL不变
My ResultPaging
Mehtod looks like this
我的 ResultPaging
方法如下
[HttpGet("ResultPaging")]
[ClientPartialWebError]
public IActionResult ResultPaging(int? page)
{
try
{
resultViewModel.SearchResultViewPaging = data.ToPagedList(pageNumber, 10);
return PartialView("SearchResult", resultViewModel);
}
catch (Exception ex)
{
}
}
mi Program.cs looks like this
我的 Program.cs 如下
var app = builder.Build();
var app = builder.Build();
// Configure the HTTP request pipeline.
// 配置HTTP请求管道
if (!app.Environment.IsDevelopment())
{
app.UseExceptionHandler("/ErrorPage/Error");
// The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
app.UseHsts();
}
app.UseSession();
app.UseDeveloperExceptionPage();
app.UseCors(ConstantValues.CORS_POLICY_NAME);
app.UseHttpsRedirection();
app.UseStaticFiles();
app.UseRouting();
app.UseAuthorization();
app.MapControllerRoute(
name: "default",
pattern: "{controller=Home}/{action=Menu}/{id?}");
app.MapControllerRoute(
name: "auth",
pattern: "/{controller}/{action}",
defaults: new { controller = "Auth", action = "Login" })
.RequireCors(ConstantValues.CORS_POLICY_NAME);
app.MapControllerRoute(
name: "logout",
pattern: "{controller}/{action}",
defaults: new { controller = "Auth", action = "Logout" });
app.MapControllerRoute(
name: "refreshsession",
pattern: "{controller}/{action}",
defaults: new { controller = "Auth", action = "RefreshSession" });
app.MapControllerRoute(
name: "changeprimarynavigation",
pattern: "{controller}/{action}",
defaults: new { controller = "Auth", action = "ChangePrimaryNavigation" });
app.Run();
What I am missing?
我漏掉了什么?
英文:
I am writing and Asp.Net Core MVC 6 App and I am using X.PagedList
I render a PartialView inside a <div="dvBody">
in the parent View.
In parent View I fill that div using Ajax
$.ajax(
{
type: "POST",
data: model,
headers: {
"RequestVerificationToken":
$('input:hidden[name="__RequestVerificationToken"]').val()
},
url: '@Url.Action("Search", "Participant")',
success:function(result){
$("#dvBody").html(result);
},
error:function (req,status,error){
alert("error");
}
});
That Partial Page has a table with PageList
and when I change the PageNumer, I want to render the page in the same div
@Html.PagedListPager((IPagedList)Model.SearchResultViewPaging, page => Url.Action("ResultPaging", "Participant", new { page = page }),
X.PagedList.Web.Common.PagedListRenderOptions.EnableUnobtrusiveAjaxReplacing(new AjaxOptions
{
HttpMethod = "GET",
UpdateTargetId = "dvBody",
}))
The Url of the Application is https://localhost:7063/Home/Participant
When it runs and click Page 2 the Page redirect the Url to https://localhost:7063/ResultPaging?page=2
instead of render it inside the div defined in the Parent View and keep the Url
My ResultPaging
Mehtod looks like this
[HttpGet("ResultPaging")]
[ClientPartialWebError]
public IActionResult ResultPaging(int? page)
{
try
{
resultViewModel.SearchResultViewPaging = data.ToPagedList(pageNumber, 10);
return PartialView("SearchResult", resultViewModel);
}
catch (Exception ex)
{
}
}
mi Program.cs looks like this
....
var app = builder.Build();
// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment())
{
app.UseExceptionHandler("/ErrorPage/Error");
// The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
app.UseHsts();
}
app.UseSession();
app.UseDeveloperExceptionPage();
app.UseCors(ConstantValues.CORS_POLICY_NAME);
app.UseHttpsRedirection();
app.UseStaticFiles();
app.UseRouting();
app.UseAuthorization();
app.MapControllerRoute(
name: "default",
pattern: "{controller=Home}/{action=Menu}/{id?}");
app.MapControllerRoute(
name: "auth",
pattern: "/{controller}/{action}",
defaults: new { controller = "Auth", action = "Login" })
.RequireCors(ConstantValues.CORS_POLICY_NAME);
app.MapControllerRoute(
name: "logout",
pattern: "{controller}/{action}",
defaults: new { controller = "Auth", action = "Logout" });
app.MapControllerRoute(
name: "refreshsession",
pattern: "{controller}/{action}",
defaults: new { controller = "Auth", action = "RefreshSession" });
app.MapControllerRoute(
name: "changeprimarynavigation",
pattern: "{controller}/{action}",
defaults: new { controller = "Auth", action = "ChangePrimaryNavigation" });
app.Run();
What I am missing?
thanks
答案1
得分: 1
请确保在您的父视图中添加jquery.unobtrusive-ajax.js
的引用:
<div id="dvBody">
</div>
@section Scripts
{
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-ajax-unobtrusive/3.2.6/jquery.unobtrusive-ajax.js" integrity="sha256-v2nySZafnswY87um3ymbg7p9f766IQspC5oqaqZVX2c=" crossorigin="anonymous"></script>
<script>
$(function(){
$.ajax(
{
//....
success: function (result) {
$("#dvBody").html(result);
},
error: function (req, status, error) {
alert("error");
}
});
})
</script>
}
英文:
Be sure add the jquery.unobtrusive-ajax.js
reference in your parent view:
<div id="dvBody">
</div>
@section Scripts
{
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-ajax-unobtrusive/3.2.6/jquery.unobtrusive-ajax.js" integrity="sha256-v2nySZafnswY87um3ymbg7p9f766IQspC5oqaqZVX2c=" crossorigin="anonymous"></script>
<script>
$(function(){
$.ajax(
{
//....
success: function (result) {
$("#dvBody").html(result);
},
error: function (req, status, error) {
alert("error");
}
});
})
</script>
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论