CODEWITHSUNDEEP
asp.net-corerazorrazor-pages
Artem
Artem

Reputation: 2314

Disable a button using Razor Pages

I have a form built via Razor Pages. The form consists of two submit buttons - each of them is assigned to an appropriate asp-page-handler, like this:

@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>

My handlers work correctly. Now I need to disable the Approve button by some condition. Unfortunately I can't figure out what is the right way to achieve this using Razor Pages?

I tried the following (condition is simplified):

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

After launch of the app, the markup remained unchanged and the button is still enabled. Seems like the asp-page-handler tag forces the Razor engine to ignore @disableTag variable.

Next attempt was (@disableTag was put in front of asp-page-handler):

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

Now the page rendered correctly (disabled tag is there), but the handler itself stopped working (the markup shows asp-page-handler="Approve" as a plain tag instead of something like /{PageName}/{id}?handler=Approve)

What am I doing wrong here?

Upvotes: 10

Views: 17989

Answers (1)

pitaridis
pitaridis

Reputation: 2983

Try to think the tag helper way. Disable is a property that you can define like all the other properties which are supported by the equivalent tag helper. Below you can find two different ways do define your disable attribute for your buttons:

@{
    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>

I hope it helps.

Complete Example

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>

Upvotes: 15

Related Questions