我是C#和HTML的新手，正在尝试使用Blazor为我们的实验室编写过期日期计算器。除了根据if…else语句的特定日期格式之外，我已经在输出后面找到了所有的逻辑——但是——我的实际问题是，如果有人能给我一个如何编写代码部分的想法，那么当用户点击"；提交"；按钮，它将输出逻辑计算的结果。
我在SO上看了好几页，但都不是我想要的。我相信这可能需要一个onClick事件，它可能以某种方式绑定到我在"@代码"；部分，但如果有人能解释正确的做法，那就太棒了！
谢谢：((附言：我负责的整个代码部分如下，第一部分是HTML，@code之后是C#(
编辑：当第一个"；如果"；语句执行时，DateTime应格式化为"；mm/yyyy"；用数字术语如"；09/2022"；。如果第一个"；如果"；语句未通过，这意味着其中一个参数未得到满足，则日期应格式化为"；yyyy/mm/dd"；像"；2022/10/28"；
`
<!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");
}
}
}
`
这里有一个带有支持类的演示页面，展示了如何做你想做的事情
我已经更新了它，向您展示如何设置日期格式。这看起来可能有点过头了，但它将必要的功能构建在一个地方——在"；原始痴迷"；。
@page "/"
<div>
<div class="mb-3">
<label class="form-label">Mix Date:</label>
<input class="form-control" type="date" placeholder="DD/MM/YYYY" @bind-value=this.recordEditContext.MixDate>
<div class="form-text">Enter the mix date for the item</div>
</div>
<div class="mb-3 form-check">
<input class="form-check-input" type="checkbox" @bind-value=this.recordEditContext.IsBeforeDate>
<label class="form-check-label">Made Before September 10th, 2022</label>
</div>
<div class="mb-3 form-check">
<input class="form-check-input" type="checkbox" @bind-value=this.recordEditContext.IsPlate>
<label class="form-check-label">Plate Product</label>
</div>
<div class="mb-3">
<label class="form-label">Shelf Life:</label>
<input class="form-control" type="number" @bind-value=this.recordEditContext.ShelfLife>
<div class="form-text">Enter the shelf life for the item (days)</div>
</div>
<div class="mb-3 text-end">
<button disabled="@(!this.recordEditContext.IsDirty)" class="btn btn-primary" @onclick=CalculateExpiryDate>Calculate Expiry Date</button>
</div>
</div>
@if (this.IsError)
{
<div class="alert alert-danger mt-3">
@this.errorMessage
</div>
}
@if (!this.ExpiryDate.IsNull && !recordEditContext.IsDirty)
{
<div class="alert alert-info mt-3">
Calculated Expiry Date: @this.ExpiryDate.ToString()
</div>
}
@code {
private RecordEditContext recordEditContext = new RecordEditContext(new());
private ExpirationDate ExpiryDate = new ExpirationDate();
private string errorMessage = string.Empty;
private bool IsError => this.errorMessage != string.Empty;
private void CalculateExpiryDate()
{
this.errorMessage = string.Empty;
this.ExpiryDate.Value = DateTime.MinValue;
this.recordEditContext.SetToClean();
if ((recordEditContext.IsBeforeDate == true) && (recordEditContext.IsPlate == true) && (recordEditContext.ShelfLife > 90))
{
this.ExpiryDate.Value = (recordEditContext.MixDate + TimeSpan.FromDays(recordEditContext.ShelfLife)) + TimeSpan.FromDays(30);
this.ExpiryDate.Format = ExpirationDate.ExpiryDateFormat.MonthYear;
return;
}
if ((recordEditContext.IsBeforeDate == false) || (recordEditContext.IsPlate == false) || (recordEditContext.ShelfLife < 90))
{
this.ExpiryDate.Value = (recordEditContext.MixDate + TimeSpan.FromDays(recordEditContext.ShelfLife)) - TimeSpan.FromDays(1);
this.ExpiryDate.Format = ExpirationDate.ExpiryDateFormat.YearMonthDay;
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;
}
public class ExpirationDate
{
public DateTime Value { get; set; }
public ExpiryDateFormat Format { get; set; } = ExpiryDateFormat.Normal;
public override string ToString()
=> this.Format switch
{
ExpiryDateFormat.MonthYear => this.Value.ToString("MM/yyyy"),
ExpiryDateFormat.YearMonthDay => this.Value.ToString("yyyy/MM/dd"),
_ => this.Value.ToLongDateString()
};
public bool IsNull
=> Value == DateTime.MinValue;
public enum ExpiryDateFormat
{
Normal,
MonthYear,
YearMonthDay
}
}
这是在非常基本的级别上进行操作的方法。源
@Message
<button @onclick="MyFunction">Submit</button>
@code {
string Message { get; set; }
void MyFunction()
{
if(...)
{
Message = expDate;
}
else
{
Message = "Please try again."
}
}
}