使用剃须刀页面禁用按钮

Question

我通过 Razor Pages 构建了一个表单。该表单由两个提交按钮组成 - 每个按钮都分配给适当的 asp-page-handler，如下所示：

@page "{id:int}"
//...
<form asp-action="Post">
    <input type="submit" asp-page-handler="Approve" class="btn btn-success" value="Approve" />
    <input type="submit" asp-page-handler="Decline" class="btn btn-danger" value="Decline" />
</form>

处理程序工作正常。现在我需要在某些情况下禁用批准按钮。不幸的是，我无法弄清楚使用 Razor Pages?

实现此目的的正确方法是什么

我尝试了以下方法（简化了条件）：

@{ var disableTag = "disabled"; } 
...
<input type="submit" asp-page-handler="Approve" class="btn btn-success" value="Approve"  @disableTag />

应用程序启动后，标记保持不变，按钮仍然可用。似乎 asp-page-handler 标签强制剃刀引擎忽略 @disableTag 变量。

下一次尝试是（@disableTag 放在 asp-page-handler 前面）：

<input type="submit" @disableTag asp-page-handler="Approve" class="btn btn-success" value="Approve" /

现在页面呈现正确（disabled 标签），但处理程序本身停止工作（标记显示 asp-page-handler="Approve" 作为普通标签而不是 /{PageName}/{id}?handler=Approve 之类的东西）

我做错了什么？

Answer 1

尝试考虑标签助手的方式。 Disable 是一个属性，您可以像等效标签助手支持的所有其他属性一样定义它。您可以在下面找到两种不同的方式来定义按钮的禁用属性：

@{
    bool disable1 = true;
    string disable2 = "disable";    // or string disable2 = null;
}

<h2>Test</h2>
<form asp-action="Post">
    <input type="submit" asp-page-handler="Approve" class="btn btn-success" value="Approve" disabled="@(disable1 ? "disabled" : null)" />
    <input type="submit" asp-page-handler="Decline" class="btn btn-danger" value="Decline" disabled="@disable2" />
</form>

希望对您有所帮助。

完整示例

DisabledButton.cshtml.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;

namespace MyWebApplication.Pages
{
    public class DisabledButtonModel : PageModel
    {
        public bool Disbale1 { get; set; }
        public bool Disbale2 { get; set; }

        public void OnGet()
        {

        }

        public ActionResult OnPostApprove()
        {
            Disbale1 = true;
            Disbale2 = false;

            return Page();
        }

        public ActionResult OnPostDecline()
        {
            Disbale1 = false;
            Disbale2 = true;

            return Page();
        }
    }
}

DisabledButton.cshtml

@page "{handler?}"
@model MyWebApplication.Pages.DisabledButtonModel

<form asp-action="Post">
    <input type="submit" asp-page-handler="Approve" class="btn btn-success" value="Approve" disabled="@(Model.Disbale1 ? "disabled" : null)" />
    <input type="submit" asp-page-handler="Decline" class="btn btn-danger" value="Decline" disabled="@(Model.Disbale2 ? "disabled" : null)" />
</form>

使用剃须刀页面禁用按钮

Disable a button using razor pages

asp.net

razor

razor-pages