为什么我的Razor Pages表单未发布到正确的处理程序？

问题描述 投票：0回答：1

我正在使用ASP.NET Core 3.0构建Web应用程序。我有一个名为Article的模型。我在应用程序的两个部分都遇到问题，其中编辑或删除文章都没有调用正确的POST方法处理程序。

我的Article类在命名空间Models中的定义如下：

Models / Articles.cs

public class Article
{
  public int Id { get; set; }

  [Required]
  [StringLength(32)]
  public string Title { get; set; }

  [StringLength(512)]
  public string Description { get; set; }

  public string Content { get; set; }
}

编辑

我有一个称为_Editor.cshtml的共享局部视图。它的定义如下：

Pages / Articles__E​​ditor.cshtml

@model Models.Article

<div class="form-group">
    <label asp-for="Title" class="control-label col-xs-4 col-md-2"></label>
    <input asp-for="Title" class="form-control col-xs-8 col-md-10" />
    <span asp-validation-for="Title" class="text-danger col"></span>
</div>

<div class="form-group">
    <label asp-for="Description" class="control-label col-xs-4 col-md-2"></label>
    <textarea asp-for="Description" class="form-control col-xs-8 col-md-10" style="height:4em"></textarea>
    <span asp-validation-for="Description" class="text-danger col"></span>
</div>

<hr />

<div class="form-group">
    <label asp-for="Content" class="control-label col-xs-4 col-md-2"></label>
    <textarea asp-for="Content" class="form-control col-xs-8 col-md-10" style="height:16em"></textarea>
    <span asp-validation-for="Content" class="text-danger col"></span>
</div>

我从Edit.cshtml和Create.cshtml文件内部使用此局部视图，如下所示：

Pages / Articles / Edit.cshtml

@page
@model Pages.Articles.EditModel

<form method="post">
    <div asp-validation-summary="ModelOnly" class="text-danger"></div>
    <input type="hidden" asp-for="Article.Id" />
    <partial name="_Editor" model="Model.Article" />

    <div class="form-group">
        <input type="submit" value="Save" class="btn btn-primary" />
    </div>
</div>

</form>

Pages / Articles / Create.cshtml

@page
@model Pages.Articles.CreateModel

<form method="post">
    <div asp-validation-summary="ModelOnly" class="text-danger"></div>
    <partial name="_Editor" model="Model.Article" />

    <div class="form-group">
        <input type="submit" value="Create" class="btn btn-primary" />
    </div>
</form>

这两个Razor页面都有标准的脚手架代码隐藏（.cshtml.cs）文件。 创建页面成功工作，但编辑页面实际上并未保存编辑。

正在删除

在我的View.cshtml剃刀页面上，我希望有一个文章删除对话框，该对话框可以在整个项目的其他页面中使用。我为此使用Delete.cshtml部分视图。它的代码如下：

Pages / Articles / Delete.cshtml

@model Models.Article

<div class="modal" tabindex="-1" role="dialog" id="deletionModal">
    <form id="deletionModalForm" asp-page="Articles/Delete" method="post">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Delete Article</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p>Are you sure you want to delete the article "@Model.Title"?</p>

                    <input type="hidden" asp-for="@Model.Id" />
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-danger">Delete</button>
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                </div>
            </div>
        </div>
    </form>
</div>

在View.cshtml剃刀页面中对其的引用如下：

Pages / Articles / View.cshtml

@page
@model Comprehension.Pages.Articles.ViewModel

<partial name="Delete" model="Model.Article" />

<div class="row mb-4">
    <h2 class="col">@Model.Article.Title</h2>
    <p class="col-auto">
        <a asp-page="./Edit" asp-route-id="@Model.Article.Id" class="text-primary">Edit</a>
    </p>
    <p class="col-auto">
        <a class="text-danger" data-toggle="modal" data-target="#deletionModal">Delete</a>
    </p>
</div>

这两个页面都有以常规方式设置的代码隐藏（.cshtml.cs）文件。 [只要在Delete.cshtml中按下提交按钮，就会调用OnPost中的View.cshtml.cs方法而不是OnPost中的Delete.cshtml.cs方法。

我尝试将@page添加到Delete.cshtml无济于事。我也按照@Xing Zou的建议尝试了所有内容。

在我看来，这两个问题均来自同一错误，但我不确定该错误是什么。任何帮助将不胜感激。

关于上下文，这是我的项目结构的屏幕截图。

Directory structure of my ASP.NET Razor Pages Project

c# asp.net-core razor partial-views razor-pages
1个回答
1
投票

我的理解是，首先单击一个按钮（名为Delete），然后弹出一个共享对话框，您可以在对话框中看到Title进行确认。最后，单击对话框中的Delete按钮以调用实际的帖子处理程序以删除该文章。

下面是我的简单演示：

1._Delete.cshtml

为模型添加id并添加<form>标记以提交到删除处理程序

@model Models.Article
<div class="modal" tabindex="-1" role="dialog" id="myModal">
    <form id="myForm" method="post">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Delete Article</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p>Are you sure you want to delete the article "@Model.Title"?</p>

                    @*Pass current article ID*@
                    <input type="hidden" asp-for="@Model.Id" />
                </div>
                <div class="modal-footer">
                    <button type="submit" asp-page="Articles/Delete"  class="btn btn-danger">Delete</button>
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                </div>
            </div>
        </div>
     </form>
</div>

2.Index.cshtml：

<partial name="_Delete" model="@Model.Article" />
<button type="button" class="btn btn-primary myButton" data-toggle="modal" data-target="#myModal">
    Delete
</button>

3.Pages / Articles / Delete.cshtml（Delete.cshtml.cs）剃刀页面

public async Task<IActionResult> OnPostAsync(int? id)
{
 //your delete logic
}

enter image description here

编辑12/24/2019

[不要将局部视图作为剃须刀页面放置，您只需要在一个剃须刀页面后面提交到后期处理。

此外，asp-page应该使用正确的路径，如果将部分视图放在相同的Articles文件夹中，那么它将变为asp-page="Delete"

演示：

1。以Pages/Articles/MyDeletePartilaView.cshtml创建部分视图：

@model Models.Article

<div class="modal" tabindex="-1" role="dialog" id="deletionModal">
    <form id="deletionModalForm" asp-page="Delete" method="post">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Delete Article</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p>Are you sure you want to delete the article "@Model.Title"?</p>

                    <input type="hidden" asp-for="@Model.Id" />
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-danger">Delete</button>
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                </div>
            </div>
        </div>
    </form>
</div>

2.Pages / Articles / View.cshtml

 <partial name="MyDeletePartilaView.cshtml" model="Model.Article" />

3.Pages / Articles / Delete.cshtml

@page
@model RazorpagesCore.Pages.Movies.DeleteModel

4.Pages / Articles / Delete.cshtml.cs

public class DeleteModel : PageModel
{
   public async Task<IActionResult> OnPostAsync(int? id)
    {
       //your delete logic         

    }
}
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.