在 Blazor 上提交表单

Question

我在这里创建了一个 Blazor 服务器端表单

<EditForm Model="formValues" OnValidSubmit="@DownloadExcelFile">

            <DataAnnotationsValidator />
            <MatThemeProvider Theme="@theme">
                <div class="row text-center">

                    <div class="col-6 text-right pb-3">
                    </div>


                </div>
                <div class="row formRow">
                    <div class="col-12 text-center pb-2">
                        <MatSelect Label="Region" @bind-Value="@formValues.Region">
                            @foreach (var region in Regions)
                                    {
                                <MatOptionString Value="@region.Id.ToString()">@region.Description</MatOptionString>
                                    }


                        </MatSelect>
                        <ValidationMessage For="@(() => formValues.Region)" />
                    </div>
                    <div class="col-6 text-right pb-2">
                        <MatSelect Label="Manual Key" Id="allowManuallyKeyedTxns" @bind-Value="@formValues.AllowManuallyKeyedTxns">
                            <MatOptionString Value="1">Yes</MatOptionString>
                            <MatOptionString Value="0">No</MatOptionString>


                        </MatSelect>
                        <ValidationMessage For="@(() => formValues.AllowManuallyKeyedTxns)" />
                    </div>

                    <div class="col-6 text-left pb-2">
                        <MatSelect Label="Refund Exemption" Id="refundExemption" @bind-Value="@formValues.RefundExcemption">
                            <MatOptionString Value="1">Yes</MatOptionString>
                            <MatOptionString Value="0">No</MatOptionString>




                        </MatSelect>
                        <ValidationMessage For="@(() => formValues.RefundExcemption)" />
                    </div>
                    <div class="col-6 text-right pb-2">
                        <MatSelect Label="Advice Exemption" Id="adviceExemption" @bind-Value="@formValues.AdviceExemption">
                            <MatOptionString Value="1">Yes</MatOptionString>
                            <MatOptionString Value="0">No</MatOptionString>




                        </MatSelect>
                        <ValidationMessage For="@(() => formValues.AdviceExemption)" />
                    </div>
                    <div class="col-6 text-left pb-2">
                        <MatSelect Label="Tip Adjustment" Id="tipAdjustment" @bind-Value="@formValues.TipAdjustment">
                            <MatOptionString Value="1">Yes</MatOptionString>
                            <MatOptionString Value="0">No</MatOptionString>




                        </MatSelect>
                        <ValidationMessage For="@(() => formValues.TipAdjustment)" />
                    </div>
                    <div class="col-6 text-right pb-2">
                        <MatDatePicker Label="Start Date" @bind-Value="@formValues.TxnDate" EnableTime="false" Format="MMM/dd/yyyy"></MatDatePicker>

                        <ValidationMessage For="@(() => formValues.TxnDate)" />
                    </div>
                    <div class="col-6 text-left pb-2">
                        <MatDatePicker Label="End Date" @bind-Value="@formValues.TxnEndDate" EnableTime="false" Format="MMM/dd/yyyy"></MatDatePicker>

                        <ValidationMessage For="@(() => formValues.TxnEndDate)" />
                    </div>

                    <div class="col-12 text-center">
                        <div class="col-12 p-3">
                            <button type="submit" class="btn btn-outline-success">
                                Export to Excel&nbsp;
                                <i class="fa fa-file-excel" aria-hidden="true"></i>
                            </button>
                        </div>
                    </div>

                </div>
            </MatThemeProvider>
        </EditForm>

还有一种方法，在提交时将从数据库查询并创建一个 excel 文件。正如你在这里看到的

    async Task DownloadExcelFile()
    {
        DownloadExcel(formValues.Region, formValues.TxnDate, formValues.TxnEndDate, formValues.AllowManuallyKeyedTxns, formValues.AdviceExemption, formValues.RefundExcemption, formValues.TipAdjustment, formValues.isManuallyKeyed, formValues.isAdviceExemption, formValues.isRefundExemption, formValues.isTipAdjustment);

    }
    public void DownloadExcel(string Region, DateTime? StartDate, DateTime? EndDate, string ManuallyKeyedTxsn, string AdviceExemption, string RefundExemption, string TipAdjustment, bool isManuallyKeyed, bool isAdvice, bool isRefund, bool isTip)
    {
        var RegionId = Convert.ToInt64(Region);
        var ExcelFile = OreService.OreExportToExcel(RegionId, StartDate, EndDate, ManuallyKeyedTxsn, AdviceExemption, RefundExemption, TipAdjustment, isManuallyKeyed, isAdvice, isRefund, isTip);
        string excelName;

        var stream = new MemoryStream();
        ExcelPackage.LicenseContext = LicenseContext.NonCommercial;
        using (var package = new ExcelPackage(stream))
        {
            var workSheet = package.Workbook.Worksheets.Add("POS Terminal Access Audit Report");



            workSheet.Cells["A2:A2"].LoadFromCollection(from a in ExcelFile select new { MerchantID = a.MerchantRecord.ToString(), MerchantName = a.Name.ToString(), DoingBusinessAs = a.LegalName, MerchantCategoryCode = a.Mccrecord, MerchantCategoryCodeDescription = a.MccDescription, a.AddressLine1, a.AddressLine2, a.AddressLine3, a.AddressLine4, a.City, a.PhoneNumber, a.EmailAddress, a.TerminalId, TerminalType = a.TermType, CurrentManuallyKeyed = a.ManuallyKeyedString, ChangedManuallyKeyed = a.AllowManuallyKeyedChangedValueString, ChangedManuallyKeyedDate = a.AllowManuallyKeyedChangedDate, a.ExpireByPassCreditDate, CurrentCreditByPassValue = a.BypassCreditString, ChangedCreditBypassValue = a.RefundBypassChangedString, RefundBypassChangedDate = a.RefundBypassChangedDate, RefundBypassExpiryDate = a.RefundBypassEndDate, CurrentAdviceBypassValue = a.BypassAdviceString, ChangedAdviceBypassValue = a.BypassAdviceChangedString, AdviceBypassChangedDate = a.AdviceBypassChangedDate, CurrentTip = a.TipString, TipChangedValue = a.TipChangedString, a.TipChangedDate }, true);
            workSheet.DefaultColWidth = 25;
            excelName = $"POS Terminal Access Audit Report-{DateTime.Now.ToString("yyyyMMddHHmmssfff")}.xlsx";




            JsRuntime.SaveAs(excelName, package.GetAsByteArray());
        }

现在我想不通为什么要提交此表单。我设置了断点，当我单击提交按钮时，DownloadExcelFile 任务从未激活，我无法确定我是否错误地制作了表单，或者我创建 excel 文件的任务或方法有问题。任何帮助将不胜感激

Answer 1

EditForm 的onValidSubmit 方法上有一个@。你想要的可能是这样的。这可能适用于 .Net 6，但也许您可能想尝试：

<EditForm Model="formValues" OnValidSubmit="()=>DownloadExcelFile()">
...

或

<EditForm Model="formValues" OnValidSubmit="DownloadExcelFile">
...

在 Blazor 上提交表单

Make form on Blazor submit

.net

c#

blazor-server-side