ASP.NET MVC - 根据数据库中的值禁用按钮（WebGrid）

Question

我想在 webgrid 中创建一个提交按钮，它将一行发送到另一个表，但是当用户已经这样做时，我不知道如何禁用此按钮。

第一个表：

CREATE TABLE [dbo].[Applications] (
    [ApplicationId]  INT            IDENTITY (1, 1) NOT NULL,
    [ApplicantName]  NVARCHAR (50)  NOT NULL,
    [DepartmentName] NVARCHAR (100) NOT NULL,
    [StartDate]      DATETIME       NOT NULL,
    [EndDate]        DATETIME       NOT NULL,
    [AssistantName]  NVARCHAR (50)  NOT NULL,
    [Description]    NVARCHAR (MAX) NULL,
    [Approved]       BIT            NULL,
    PRIMARY KEY CLUSTERED ([ApplicationId] ASC)
);

我在这里创建了一个“已批准”值，当用户单击按钮时，该值将变为“真”。然后，当 Approved==True 按钮应该被禁用时。

第二张表：

CREATE TABLE [dbo].[Events] (
    [EventID]        INT            IDENTITY (1, 1) NOT NULL,
    [Subject]        NVARCHAR (100) NOT NULL,
    [DepartmentName] NVARCHAR (100) NULL,
    [AssistantName]  NVARCHAR (50)  NULL,
    [Description]    NVARCHAR (300) NULL,
    [Start]          DATETIME       NOT NULL,
    [End]            DATETIME       NOT NULL,
    [ThemeColor]     NCHAR (10)     NULL,
    [IsFullDay]      BIT            NOT NULL,
    PRIMARY KEY CLUSTERED ([EventID] ASC)
);

我对此操作的控制者：

        [HttpPost, ValidateInput(false)]
        public ActionResult Accept(string applicationJSONaccept, Event model)
        {
            Application apl = (new JavaScriptSerializer()).Deserialize<Application>(applicationJSONaccept);
            MyDatabaseEntities dc = new MyDatabaseEntities();

            Application app = dc.Applications.FirstOrDefault(x => x.ApplicationId == apl.ApplicationId);
            app.Approved = true;

            dc.Events.Add(new Event
            {
                Subject = apl.ApplicantName,
                DepartmentName = apl.DepartmentName,
                Description = apl.Description,
                Start = apl.StartDate,
                End = apl.EndDate,
                IsFullDay = false,
                AssistantName = apl.AssistantName
            });
            dc.SaveChanges();
            return Redirect("ApplicationView");
        }

网络网格：

@grid.Table(
htmlAttributes: new { @id = "grid", @class = "Grid" },
    tableStyle: "table table-responsive table-bordered",
    columns: grid.Columns(
        grid.Column(columnName: "ApplicationId", header: "Nr"),
        grid.Column(columnName: "ApplicantName", header: "Imię i nazwisko"),
        grid.Column(columnName: "DepartmentName", header: "Oddział"),
        grid.Column(columnName: "StartDate", header: "Od"),
        grid.Column(columnName: "EndDate", header: "Do"),
        grid.Column(columnName: "AssistantName", header: "Zastępca"),
        grid.Column(columnName: "Description", header: "Opis"),
        //Here is this button:
        grid.Column(null, header: "", format: @<text>@Html.ActionLink("Zatwierdź", null, null, new { @class = "accept btn btn-success", @role="button" })</text>)
))
@using (Html.BeginForm("Accept", "Home", FormMethod.Post, new { @id = "IndexForm2" }))
{
    <input type="hidden" name="applicationJSONaccept" />
}

JS：

<script type="text/javascript">
    $("body").on("click", ".accept", function () {
        var row = $(this).closest("tr");
        var application = {};
        application.ApplicationId = row.find("td").eq(0).html();
        application.ApplicantName = row.find("td").eq(1).html();
        application.DepartmentName = row.find("td").eq(2).html();
        application.StartDate = new Date(row.find("td").eq(3).html().substr(6, 4), row.find("td").eq(3).html().substr(4, 2) - 1, row.find("td").eq(3).html().substr(0, 2));
        application.EndDate = new Date(row.find("td").eq(4).html().substr(6, 4), row.find("td").eq(4).html().substr(4, 2) - 1, row.find("td").eq(4).html().substr(0, 2));
        application.AssistantName = row.find("td").eq(5).html();
        application.Description = row.find("td").eq(6).html();
        $("[name=applicationJSONaccept]").val(JSON.stringify(application));
        $("#IndexForm2")[0].submit();
        return false;
    });
</script>

一切正常，行转到另一个表，Approved 的值正在改变，但是当 Approved==false 时如何禁用此按钮时，我遇到了问题。你知道我该怎么做吗？ 提前致谢！

编辑： 试过了，还是不行。

grid.Column(null, header: "", format:
@<text>
    @if (ViewBag.Approved == false || ViewBag.Approved == null) {
        @Html.ActionLink("Zatwierdź", null, null, new { @class = "accept btn btn-success", @role = "button" })
    }
    else
    {
        @Html.ActionLink("Zatwierdź", null, null, new { @class = "accept btn btn-success disabled", @role = "button" });
    }
    </text>)

控制器更新：

[HttpPost, ValidateInput(false)]
public ActionResult Accept(string applicationJSONaccept, Event model)
{
    Application apl = (new JavaScriptSerializer()).Deserialize<Application>(applicationJSONaccept);
    MyDatabaseEntities dc = new MyDatabaseEntities();

    Application app = dc.Applications.FirstOrDefault(x => x.ApplicationId == apl.ApplicationId);
    ViewBag.Approved = app.Approved;

    if (app.Approved == false || app.Approved == null)
    {
        app.Approved = true;

        dc.Events.Add(new Event
        {
            Subject = apl.ApplicantName,
            DepartmentName = apl.DepartmentName,
            Description = apl.Description,
            Start = apl.StartDate,
            End = apl.EndDate,
            IsFullDay = false,
            AssistantName = apl.AssistantName
        });
        dc.SaveChanges();
    }
    else
    {
    }

    return Redirect("ApplicationView");
}

Answer 1

您可以在绑定视图时根据数据库中的值更改 css 类（[disabled] 选择器）。

Answer 2

无论你的情况如何，你都需要添加 CSS 类和删除类，如果你需要按钮启用点击事件然后删除类，如果你需要禁用点击事件然后添加类

风格

.btnDisable{
    pointer-events: none;
}

在“IndexForm2”按钮中。

只需添加和删除这个 CSS 类即可解决您的问题。

试试下面的新代码

grid.Column("YourColumnName", format:(item) =>
{
    if (item.Approved == false || item.Approved == null)
    {
        @Html.ActionLink("Zatwierdź", null, null, new { @class = "accept btn btn-success", @role="button" })
    }
    else
    {
        @Html.ActionLink("Zatwierdź", null, null, new { @class = "accept btn btn-success btnDisable", @role="button" })
    }
}

Answer 3

我找到了解决办法，代码如下：

grid.Column(null, header: "Akceptuj", format:

@<text>@Html.ActionLink("✓", null, null, new { @class = "accept btn " + 
(@Html.Raw((item.Approved == true) ? "btn-secondary disabled" : "btn-info")), 
@role = "button" })</text>)

就是这样，这里没有添加 css，只是 bootstrap ;) 感谢您的每一个回复！