Asp.Net Core XpagedList分页重新加载页面而不是在div内渲染

huangapple go评论49阅读模式
英文:

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 &lt;div=&quot;dvBody&quot;&gt; in the parent View.

In parent View I fill that div using Ajax

 $.ajax(
            {
                    type: &quot;POST&quot;,
                    data: model,
                    headers: {
                        &quot;RequestVerificationToken&quot;:
                            $(&#39;input:hidden[name=&quot;__RequestVerificationToken&quot;]&#39;).val()
                    },
                    url: &#39;@Url.Action(&quot;Search&quot;, &quot;Participant&quot;)&#39;,
                    success:function(result){
                        $(&quot;#dvBody&quot;).html(result);
                    },
                    error:function (req,status,error){
                        alert(&quot;error&quot;);
                    }
            });

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 =&gt; Url.Action(&quot;ResultPaging&quot;, &quot;Participant&quot;, new { page = page }),
                                     X.PagedList.Web.Common.PagedListRenderOptions.EnableUnobtrusiveAjaxReplacing(new AjaxOptions
                                    {
                                         HttpMethod = &quot;GET&quot;,
                                         UpdateTargetId = &quot;dvBody&quot;,
                                     }))

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(&quot;ResultPaging&quot;)]
    [ClientPartialWebError]
    public IActionResult ResultPaging(int? page)
    {
        try
        {
               resultViewModel.SearchResultViewPaging = data.ToPagedList(pageNumber, 10);
            return PartialView(&quot;SearchResult&quot;, 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(&quot;/ErrorPage/Error&quot;);
    // 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: &quot;default&quot;,
    pattern: &quot;{controller=Home}/{action=Menu}/{id?}&quot;);

app.MapControllerRoute(
    name: &quot;auth&quot;,
    pattern: &quot;/{controller}/{action}&quot;,
    defaults: new { controller = &quot;Auth&quot;, action = &quot;Login&quot; })
    .RequireCors(ConstantValues.CORS_POLICY_NAME);

app.MapControllerRoute(
    name: &quot;logout&quot;,
    pattern: &quot;{controller}/{action}&quot;,
    defaults: new { controller = &quot;Auth&quot;, action = &quot;Logout&quot; });

app.MapControllerRoute(
    name: &quot;refreshsession&quot;,
    pattern: &quot;{controller}/{action}&quot;,
    defaults: new { controller = &quot;Auth&quot;, action = &quot;RefreshSession&quot; });

app.MapControllerRoute(
    name: &quot;changeprimarynavigation&quot;,
    pattern: &quot;{controller}/{action}&quot;,
    defaults: new { controller = &quot;Auth&quot;, action = &quot;ChangePrimaryNavigation&quot; });

app.Run();

What I am missing?

thanks

答案1

得分: 1

请确保在您的父视图中添加jquery.unobtrusive-ajax.js的引用:

&lt;div id=&quot;dvBody&quot;&gt;
    
&lt;/div&gt;
    
@section Scripts
{    
    &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/jquery-ajax-unobtrusive/3.2.6/jquery.unobtrusive-ajax.js&quot; integrity=&quot;sha256-v2nySZafnswY87um3ymbg7p9f766IQspC5oqaqZVX2c=&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;

    &lt;script&gt;
        $(function(){
            $.ajax(
            {
                //....
                success: function (result) {
                    $(&quot;#dvBody&quot;).html(result);
                },
                error: function (req, status, error) {
                    alert(&quot;error&quot;);
                }
            });
        })      
    &lt;/script&gt;
}
英文:

Be sure add the jquery.unobtrusive-ajax.js reference in your parent view:

&lt;div id=&quot;dvBody&quot;&gt;
    
&lt;/div&gt;
    
@section Scripts
{    
    &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/jquery-ajax-unobtrusive/3.2.6/jquery.unobtrusive-ajax.js&quot; integrity=&quot;sha256-v2nySZafnswY87um3ymbg7p9f766IQspC5oqaqZVX2c=&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;

    &lt;script&gt;
        $(function(){
            $.ajax(
            {
                //....
                success: function (result) {
                    $(&quot;#dvBody&quot;).html(result);
                },
                error: function (req, status, error) {
                    alert(&quot;error&quot;);
                }
            });
        })      
    &lt;/script&gt;
}

huangapple
  • 本文由 发表于 2023年2月16日 03:03:38
  • 转载请务必保留本文链接:https://go.coder-hub.com/75464377.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定