ASP.NET MVC - Disable button depending on value in database (WebGrid) - asp.net

Question

I want to create a submit button in webgrid, which is sending a row to another table, but I don`t know how to disable this button, when user have done this already.
First table:
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)
);
I created here an "Approved" value, which is changing to "True", when user clicks a button. Then, when Approved==True button should be disabled.
Second table:
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)
);
My controller to this action:
[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");
}
Webgrid:
#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>
Everything is working fine, row goes to another table, value of Approved is changing, but I`ve problem how to disable this button when Approved==false. Do you know how can I do this?
Thanks in advance!
Edit:
Tried this, but still doesn`t work.
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>)
Controller update:
[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

you can change the css class ([disabled] selector) based on the value from the database while you are binding your view.

Answer 2

You need to add CSS class and remove class whatever your condition, If you need button enable click event then remove class and if you need disable click event then add the class
Style
.btnDisable{
pointer-events: none;
}
In your "IndexForm2" button.
Just add and remove this CSS class your problem solve.
Try below new code
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

I found a solution, here`s the code:
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>)
That`s all, no css added here, just bootstrap ;)
Thanks for every reply!