I'm new to C# and HTML and trying to write an expiration date calculator for our labs using Blazor. I have the logic all figured out behind the output besides the specific date format according to the if...else statement ---BUT--- my actual question is if someone could give me an idea on how to write the part of my code so when a user clicks the "Submit" button on this Blazor application, it will output what the logic had calculated.
I've looked through several pages on SO but none of them are quite what I'm looking for. I believe this may take an onClick event that's probably binded somehow to the function I wrote in the "@ code" part but if someone could explain the proper way of doing it, that would be awesome!
Thank you :) (P.S the entire portion of the code that I am in charge of is below, the first part is HTML and after @ code it's C#)
`
<!DOCTYPE html>
<html>
<body>
<!--
Code to create mix date textbox for input
-->
Mix Date:
<input type="tel" id="date" name="mix date" placeholder="DD/MM/YYYY" pattern="[0-9]{2}/[1-12]{2}/[0-9]{4}">
<br>
<br>
<!--
Creates the two checkboxes
-->
<form action="/action_page.php">
<input type="checkbox" id="mbefore" name="mbefore" value="false" @onclick="boxcheck2">
<label for="mbefore"> Made Before September 10th, 2022</label><br>
<input type="checkbox" id="pproduct" name="pproduct" value="false" @onclick="boxcheck1">
<label for="pproduct"> Plate Product</label><br>
</form>
<!--
Code to create shelf life textbox
-->
<br>
<label for="slife">Shelf Life:</label>
<input type="text" id="slife" name="slife" @bind="shelfLife"/>
<br>
<br>
<!--
Code to create submit button
-->
<button onclick="myFunction()">Submit</button>
<!--
Calculated expiration date (need to figure out how to get above to output into below textbox) and with the correct formatting depending on if..else conditions
Def an onlcick action
-->
<br>
<br>
<label for="exp">Expiration Date:</label>
<input type="text" id="exp" name="exp">
<p id="demo"></p>
</body>
</html>
@code {
private double shelfLife;
private DateTime mixDate;
private DateTime expDate;
private bool checkbox1;
private bool checkbox2;
private void boxcheck1()
{
checkbox1 = !checkbox1;
}
private void boxcheck2()
{
checkbox2 = !checkbox2;
}
private void myFunction() {
DateTime nMix = Convert.ToDateTime(mixDate);
if ((checkbox1 == true) && (checkbox2 == true) && (shelfLife > 90)) {
DateTime expDate = (mixDate TimeSpan.FromDays(shelfLife)) TimeSpan.FromDays(30);
Console.WriteLine(expDate);
}
else if ((checkbox1 == false) || (checkbox2 == false) || (shelfLife <90)) {
DateTime expDate = (mixDate TimeSpan.FromDays(shelfLife)) - TimeSpan.FromDays(1);
Console.WriteLine(expDate);
}
else {
Console.WriteLine ("Please Try Again. Information Not Satisfactory");
}
}
}
`
CodePudding user response：
This is how you would do it at a very basic level. Source
@Message
<button @onclick="MyFunction">Submit</button>
@code {
string Message { get; set; }
void MyFunction()
{
if(...)
{
Message = expDate;
}
else
{
Message = "Please try again."
}
}
}
CodePudding user response：
Here's a version of your code that demonstrates various techniques and coding patterns you'll need to use in constructing Blazor forms.
The code is in a single demo page - normally the data classes would be split out. I've prettified it with Bootstrap formatting. Ask if you have any questions.
@page "/"
<div>
<div >
<label >Mix Date:</label>
<input type="date" placeholder="DD/MM/YYYY" @bind-value=this.recordEditContext.MixDate>
<div >Enter the mix date for the item</div>
</div>
<div >
<input type="checkbox" @bind-value=this.recordEditContext.IsBeforeDate>
<label >Made Before September 10th, 2022</label>
</div>
<div >
<input type="checkbox" @bind-value=this.recordEditContext.IsPlate>
<label >Plate Product</label>
</div>
<div >
<label >Shelf Life:</label>
<input type="number" @bind-value=this.recordEditContext.ShelfLife>
<div >Enter the shelf life for the item (days)</div>
</div>
<div >
<button @onclick=CalculateExpiryDate>Calculate Expiry Date</button>
</div>
</div>
@if (this.IsError)
{
<div >
@this.errorMessage
</div>
}
@if (this.IsExpiryDate)
{
<div >
Calculated Shelf Life: @this.ExpiryDate.ToLongDateString()
</div>
}
@code {
private RecordEditContext recordEditContext = new RecordEditContext(new());
private DateTime ExpiryDate;
private string errorMessage = string.Empty;
private bool IsError => this.errorMessage != string.Empty;
private bool IsExpiryDate => this.ExpiryDate != DateTime.MinValue && !recordEditContext.IsDirty;
private void CalculateExpiryDate()
{
this.errorMessage = string.Empty;
this.ExpiryDate = DateTime.MinValue;
this.recordEditContext.SetToClean();
if ((recordEditContext.IsBeforeDate == true) && (recordEditContext.IsPlate == true) && (recordEditContext.ShelfLife > 90))
{
this.ExpiryDate = (recordEditContext.MixDate TimeSpan.FromDays(recordEditContext.ShelfLife)) TimeSpan.FromDays(30);
return;
}
if ((recordEditContext.IsBeforeDate == false) || (recordEditContext.IsPlate == false) || (recordEditContext.ShelfLife < 90))
{
this.ExpiryDate = (recordEditContext.MixDate TimeSpan.FromDays(recordEditContext.ShelfLife)) - TimeSpan.FromDays(1);
return;
}
this.errorMessage = "Please Try Again. Information Not Satisfactory";
}
public record RecordData
{
public int ShelfLife { get; init; }
public DateTime MixDate { get; init; } = DateTime.Now;
public bool IsBeforeDate { get; init; }
public bool IsPlate { get; init; }
}
public record RecordEditContext
{
private RecordData _baseRecord;
public int ShelfLife { get; set; }
public DateTime MixDate { get; set; }
public bool IsBeforeDate { get; set; }
public bool IsPlate { get; set; }
public bool IsDirty => !_baseRecord.Equals(this.Record);
public RecordData Record =>
new RecordData
{
ShelfLife = this.ShelfLife,
MixDate = this.MixDate,
IsBeforeDate = this.IsBeforeDate,
IsPlate = this.IsPlate
};
public RecordEditContext(RecordData record)
{
_baseRecord = record;
this.ShelfLife = record.ShelfLife;
this.MixDate = record.MixDate;
this.IsBeforeDate = record.IsBeforeDate;
this.IsPlate = record.IsPlate;
}
public void SetToClean()
=> _baseRecord = Record;
}
}