如何在ASP.NET CORE Razor Pages中创建共享表单? [英] How to create shared form in ASP.NET CORE Razor Pages?

问题描述

我必须在页面标题中创建一个可重用的表单.它应该显示在每一页上.简单的输入和提交按钮将发送POST请求.

I have to create a reusable form in my page header. It should be displayed on each page. Simple input and submit button that will send a POST request.

我知道的选项是局部视图或视图组件. 我查看了有关视图组件的文档，但没有提及它可与表单一起使用.只有InvokeAsync方法可用于初始化视图.

Options that I'm aware of are partial views or view components. I checked a documentation about view components but there is no mention that it works with forms. Only InvokeAsync method is available to initialize a view.

使用局部视图，可能很难定义其页面模型，并且我不知道将其POST处理程序放在哪里.

With partial view, it may be hard to define its page model and I don't understand where to put its POST handler.

我看到了另一个选择，它以某种方式直接将表单放置在_Layout.cshtml上，但是同样，它没有页面模型(afaik)，

One other option I see, somehow to place a form directly on _Layout.cshtml, but, again, it doesn't have its page model (afaik),

那么创建共享表单的方法是什么，应该在哪里处理POST请求?

So what is a way to create a shared form, and where POST request should be handled?

推荐答案

您应该使用视图组件，因为这使您可以拥有一个较为独立的模型和视图交互.

You should use a view component, as this allows you to have a somewhat self-contained model and view interaction.

public class SharedFormViewComponent : ViewComponent
{
    public Task<IViewComponentResult> InvokeAsync() =>
        Task.FromResult(View(new SharedFormViewModel()));
}

然后，将表单HTML代码放入Views\Shared\Components\SharedForm\Default.cshtml.对于表单的操作，您需要指定一条路线.再过几秒钟.然后，显示您的表单:

Then, put your form HTML code in Views\Shared\Components\SharedForm\Default.cshtml. For your form's action, you'll need to specify a route. More on that in a sec. Then, to display your form:

@await Component.InvokeAsync("SharedForm")

现在，如您所知，视图组件无法发布到.这不是不支持表格"的问题；它们实际上不是请求管道的一部分，因此无法响应POST之类的请求.您将需要一个独特的操作来处理某个控制器上的POST.在组件的表单标签上，然后:

Now, as you've somewhat discerned, view components can't be posted to. It's not an issue of "not supporting forms"; they're literally not part of the request pipeline, and therefore can't respond to requests such as a POST. You'll need a distinct action that will handle the POST on some controller. On your component's form tag, then:

<form asp-action="SharedFormHandlerAction" asp-controller="Foo" asp-area="" method="post">

应提供asp-area属性，以防万一它用于不同区域的情况.

The asp-area attribute should be provided just in case this is used in the context of different areas.

您还需要一个返回URL".这将是当前页面的URL，以便用户成功发布表单后，他们将返回到其提交表单的页面.您可以通过向表单添加隐藏的输入来实现:

You'll also need a "return URL". This will be the URL of the current page, so that after the user successfully posts the form, they'll go back to the page they submitted it from. You can achieve that by adding a hidden input to your form:

<input type="hidden" name="returnUrl" value="@(Context.Request.Query["returnUrl"].FirstOrDefault() ?? (Context.Request.Path + Context.Request.QueryString))" />

然后，您的处理程序操作应采用类似string returnUrl = null的参数，并在成功后执行以下操作:

Your handler action should then take a param like string returnUrl = null, and on success you should do:

return !string.IsNullOrEmpty(returnUrl) && Url.IsLocalUrl(returnUrl)
    ? Redirect(returnUrl)
    : RedirectToAction("SomeDefaultAction");

在处理验证错误方面有些棘手.由于要发布到其他操作，因此无法返回用户所在的先前视图，以在布局中的from或其他内容中显示验证错误.相反，您需要一个特定于此处理程序操作的视图，该视图将只是您的共享表单.您可以在此处将视图部分用作视图组件:

Where things get a little tricky is in handling validation errors. Since you're posting to a different action, you can't return the previous view the user was on to show the validation errors within the from in the layout or whatever. Instead, you'll want a view specific to this handler action which will simply be your shared form. You can use the view for your view component here as a partial:

<partial name="~\Views\Shared\Components\SharedForm\Default.cshtml" />

这篇关于如何在ASP.NET CORE Razor Pages中创建共享表单?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！