ASP.NET MVC-禁用按钮取决于数据库WebGrid中的值

如何解决ASP.NET MVC-禁用按钮取决于数据库WebGrid中的值

我想在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,[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,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,row.find("td").eq(4).html().substr(4,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,format:
@<text>
    @if (ViewBag.Approved == false || ViewBag.Approved == null) {
        @Html.ActionLink("Zatwierdź",@role = "button" })
    }
    else
    {
        @Html.ActionLink("Zatwierdź",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,AssistantName = apl.AssistantName
        });
        dc.SaveChanges();
    }
    else
    {
    }

    return Redirect("ApplicationView");
}

解决方法

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

,

您需要添加CSS类并在任何情况下删除类，如果需要按钮启用click事件，则删除类，如果需要禁用click事件，则添加类

样式

.btnDisable{
    pointer-events: none;
}

在“ IndexForm2”按钮中。

只需添加和删除此CSS类即可解决问题。

尝试使用新代码

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

,

我找到了一个解决方案，这里是代码：

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

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

仅此而已，这里没有添加CSS，只需引导;） 感谢您的每封回复！