如何在 Razor Pages 中记录 HTML 表格中的信息？

Question

我使用 Razor 页面创建了一个页面，在其中使用 OnGetAsync 方法中的过程来进行工资计算。我想使用 OnPostAsync 方法中的过程将 HTML 表中生成的相同信息保存在 SQL 数据库的另一个表中。我在网上看了很多例子，但我无法使其工作！提前感谢您的帮助！

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.ComponentModel;
using System.ComponentModel.DataAnnotations;
using Microsoft.EntityFrameworkCore;


namespace RPMCarpentryManager.Models;
   
[Keyless]   
public class ModelGeneratePayments
{

    [Required]
    [DisplayName("Employee ID")]
    public int EmployerID {get; set;}

    [Required]
    [DisplayName("Employee Full Name")]
    public string ? EmployeeFullName {get; set;}

    [Required]
    [DisplayName("Worked Hours")]
    public string ? WorkedHours {get; set;}

    [Required]
    [DisplayName("Wage per Hour")]
    public decimal SalaryHour {get; set;}

    [Required]
    [DisplayName("Gross Salary")]
    public decimal SalaryWorked {get; set;}

    [Required]
    [DisplayName("Bonus for Driving")]
    public decimal DriverBonus {get; set;}

    [Required]
    [DisplayName("Extra Bonus")]
    public decimal ExtraBonus {get; set;}

    [Required]
    [DisplayName("Advance")]
    public decimal Advance {get; set;}

    [Required]
    [DisplayName("% Tax Discount")]
    public decimal TaxDiscount {get; set;}

    [Required]
    [DisplayName("Tax Discount")]
    public decimal ValueTaxDiscount {get; set;}

    [Required]
    [DisplayName("NET Salary")]
    public decimal SalaryToBePaid {get; set;}
}

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.ComponentModel;
using System.ComponentModel.DataAnnotations;


namespace RPMCarpentryManager.Models;
   
   
public class ModelPeriodPayment
{
    [Key]
    [Required]
    [DisplayName("#")]
    public int PaymentID {get; set;}

    [Required]
    [DisplayName("Payment Date")]
    public DateTime PaymentDate {get; set;}

    [Required]
    [DisplayName("Payment Date")]
    public string ? DateSearched {get; set;}

    [Required]
    [DisplayName("Employer ID ")]
    public int EmployerID {get; set;}

    [Required]
    [DisplayName("Worked Hours")]
    public string ? WorkedHours {get; set;}

    [Required]
    [DisplayName("Wage per Hour")]
    public decimal SalaryHour {get; set;}

    [Required]
    [DisplayName("Gross Salary")]
    public decimal SalaryWorked {get; set;}

    [Required]
    [DisplayName("Bonus for Driving")]
    public decimal DriverBonus {get; set;}

    [Required]
    [DisplayName("Extra Bonus")]
    public decimal ExtraBonus {get; set;}

    [Required]
    [DisplayName("Advance")]
    public decimal Advance {get; set;}

    [Required]
    [DisplayName("% Tax Discount")]
    public decimal TaxDiscount {get; set;}

    [Required]
    [DisplayName("Tax Discount")]
    public decimal ValueTaxDiscount {get; set;}

    [Required]
    [DisplayName("NET Salary")]
    public decimal SalaryToBePaid {get; set;}
}

using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
using Microsoft.Data.SqlClient;
using Microsoft.EntityFrameworkCore;
using RPMCarpentryManager.Data;
using RPMCarpentryManager.Models;

namespace RPMCarpentryManager.Pages.Payments
{
    public class CreateModel : PageModel
    {
        private readonly RPMContext _context;

        public CreateModel(RPMContext context)
        {
            _context = context;
        }

        public IList<ModelGeneratePayments> ModelGeneratePayments { get;set; } = default!;

        [BindProperty]
        public IList<ModelPeriodPayment> ModelPeriodPaymentOnPost { get; set; } = default!;

        // --------------------------Start Paramenters--------------------------

        [BindProperty(SupportsGet = true)]
        public string? DateFrom { get; set; } = default!;

        [BindProperty(SupportsGet = true)]
        public string? DateTo { get; set; } = default!;
        // --------------------------End Paramenters--------------------------

        public void OnGetAsync()
        {
            if (!string.IsNullOrEmpty(DateFrom) & !string.IsNullOrEmpty(DateTo))
            {
                var parameter = new List<SqlParameter>
                {
                    new("@DateFrom", DateFrom),
                    new("@DateTo", DateTo)
                };
                ModelGeneratePayments =  _context.ModelGeneratePayments.FromSqlRaw("[STP_ListPayment] @DateFrom, @DateTo", parameter.ToArray()).ToList();
            }
        }

        

        public async Task<IActionResult> OnPostAsync()
        {

            foreach(var item in ModelPeriodPaymentOnPost)
            {
                var parameter = new List<SqlParameter>
                {
                    new("@PaymentDate", DateTime.Now),
                    new("@DateSearched", string.Concat(DateFrom," up to ",DateTo)),
                    new("@EmployerID", item.EmployerID),
                    new("@WorkedHours", item.WorkedHours),
                    new("@SalaryHour", item.SalaryHour),
                    new("@SalaryWorked", item.SalaryWorked),
                    new("@DriverBonus", item.DriverBonus),
                    new("@ExtraBonus", item.ExtraBonus),
                    new("@Advance", item.Advance),
                    new("@TaxDiscount", item.TaxDiscount),
                    new("@ValueTaxDiscount", item.ValueTaxDiscount),
                    new("@SalaryToBePaid", item.SalaryToBePaid)
                };
                await _context.Database.ExecuteSqlRawAsync("STP_CreatePayments @PaymentDate, @DateSearched, @EmployerID, @WorkedHours, @SalaryHour, @SalaryWorked, @DriverBonus, @ExtraBonus, @Advance, @TaxDiscount, @ValueTaxDiscount, @SalaryToBePaid", parameter.ToArray());
            }
            return RedirectToPage("./Index");
        }
    }
}

@page
@model RPMCarpentryManager.Pages.Payments.CreateModel

@{
    ViewData["Title"] = "Create";
}

<div class="content">
    <div class="mb-9">
        <div class="row g-3 mb-4">
            <div class="col-auto">
                <h4>Generate Payment</h4>
            </div>  
        </div>
        <hr />
        <div class="mb-4">
            <div class="d-flex flex-wrap gap-3">
                <div class="search-box">
                    <form class="position-relative">
                        <div class="scrollbar overflow-hidden-y">
                            <div class="btn-group position-static">
                                <div class="btn-group position-static text-nowrap">
                                </div>
                                <div class="btn-group position-static text-nowrap">
                                    <input type='text' id="datepickerFrom" class="form-control" asp-for="DateFrom"/>
                                </div>
                                <div class="btn-group position-static text-nowrap">
                                    <input type='text' id="datepickerTo" class="form-control" asp-for="DateTo"/>
                                </div>
                                <div class="btn-group position-static text-nowrap">
                                    <input type="submit" value="Generate" class="btn btn-success" />
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="ms-xxl-auto">
                    <form asp-page-handler="Create" method="post">
                        <input id="buttonPost" type="submit" value="Save" class="btn btn-primary" />
                    </form>
                </div> 
            </div>
        </div>
        <div class="table-responsive text-nowrap">
            <table id="tblPayment" class="table table-bordered border-dark" style="background-color: white;">
                <thead class="table-dark">
                    <tr class="titlerow">
                        <th class="text-center">
                            @Html.DisplayNameFor(model => model.ModelGeneratePayments[0].EmployerID)
                        </th>
                        <th class="text-center">
                            @Html.DisplayNameFor(model => model.ModelGeneratePayments[0].EmployeeFullName)
                        </th>   
                        <th class="text-center">
                            @Html.DisplayNameFor(model => model.ModelGeneratePayments[0].WorkedHours)
                        </th>
                        <th class="text-center">
                            @Html.DisplayNameFor(model => model.ModelGeneratePayments[0].SalaryHour)
                        </th>
                        <th class="text-center">
                            @Html.DisplayNameFor(model => model.ModelGeneratePayments[0].SalaryWorked)
                        </th>
                        <th class="text-center">
                            @Html.DisplayNameFor(model => model.ModelGeneratePayments[0].DriverBonus)
                        </th>
                        <th class="text-center">
                            @Html.DisplayNameFor(model => model.ModelGeneratePayments[0].ExtraBonus)
                        </th>
                        <th class="text-center">
                            @Html.DisplayNameFor(model => model.ModelGeneratePayments[0].Advance)
                        </th>
                        <th class="text-center">
                            @Html.DisplayNameFor(model => model.ModelGeneratePayments[0].TaxDiscount)
                        </th>
                        <th class="text-center">
                            @Html.DisplayNameFor(model => model.ModelGeneratePayments[0].ValueTaxDiscount)
                        </th>
                        <th class="text-center">
                            @Html.DisplayNameFor(model => model.ModelGeneratePayments[0].SalaryToBePaid)
                        </th>
                    </tr>
                </thead>
                <tbody>
                    @if(Model.ModelGeneratePayments != null)
                    {
                    @foreach (var item in Model.ModelGeneratePayments) 
                    {
                        <tr>
                            <td style="text-align:center">
                                @Html.DisplayFor(modelItem => item.EmployerID)
                            </td>
                            <td style="text-align:center">
                                @Html.DisplayFor(modelItem => item.EmployeeFullName)
                            </td>
                            <td>
                                @Html.DisplayFor(modelItem => item.WorkedHours)
                            </td>
                            <td>
                                @Html.DisplayFor(modelItem => item.SalaryHour)
                            </td>
                            <td style="text-align:center">
                                @Html.DisplayFor(modelItem => item.SalaryWorked)
                            </td>
                            <td class="rowDataSd" style="text-align:center">
                                @Html.DisplayFor(modelItem => item.DriverBonus)
                            </td>
                            <td class="rowDataSd" style="text-align:center">
                                @Html.DisplayFor(modelItem => item.ExtraBonus)
                            </td>
                            <td style="text-align:center;color:red">
                                @Html.DisplayFor(modelItem => item.Advance)
                            </td>
                            <td style="text-align:center">
                                @Html.DisplayFor(modelItem => item.TaxDiscount)
                            </td>
                            <td class="rowDataSd" style="text-align:center">
                                @Html.DisplayFor(modelItem => item.ValueTaxDiscount)
                            </td>
                            <td class="rowDataSd" style="text-align:center">
                                @Html.DisplayFor(modelItem => item.SalaryToBePaid)
                            </td>
                        </tr>
                    }}
                </tbody>
        </div>
    </div>
</div>

@section Scripts {
    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script src="https://unpkg.com/[email protected]/js/gijgo.min.js" type="text/javascript"></script>
    <link href="https://unpkg.com/[email protected]/css/gijgo.min.css" rel="stylesheet" type="text/css" />
    
    <script>
        $('#datepickerFrom').datepicker({
            uiLibrary: 'bootstrap'
        });
        $('#datepickerTo').datepicker({
            uiLibrary: 'bootstrap'
        });
    </script>
}

Answer 1

根据您的代码，我猜您想将 ModelPeriodPayment 列表发布到 Onpostasync 方法。

但是 ModelPeriodPaymentOnPost 与 ModelGeneratePayments 相同，只有三个属性。

通常，对于某种情况，我们只会在剃须刀页面内放置一个模型，而不是两个。

因此，在 OnPost() 方法中，您应该直接使用 ModelGeneratePayments 而不是 ModelPeriodPaymentOnPost，因为它们几乎相同，并且您使用的属性也在 ModelGeneratePayments 中。

本页面内无需使用ModelPeriodPaymentOnPost。

然后在 razor 页面中，您应该将表单包含在表格中并添加 input type="hidden" 以让客户端知道哪些数据应该发布到后端。

更多详情，可以参考以下详细代码。

剃刀页面：

@page
@model WebApplicationRazorIdentity.Pages.CreateModel
@{
}


<form asp-page-handler="Create" method="post">
    <div class="content">
        <div class="mb-9">
            <div class="row g-3 mb-4">
                <div class="col-auto">
                    <h4>Generate Payment</h4>
                </div>
            </div>
            <hr />
            <div class="mb-4">
                <div class="d-flex flex-wrap gap-3">
                    <div class="search-box">
                        <form class="position-relative">
                            <div class="scrollbar overflow-hidden-y">
                                <div class="btn-group position-static">
                                    <div class="btn-group position-static text-nowrap">
                                    </div>
                                    <div class="btn-group position-static text-nowrap">
                                        <input type='text' id="datepickerFrom" class="form-control" asp-for="DateFrom" />
                                    </div>
                                    <div class="btn-group position-static text-nowrap">
                                        <input type='text' id="datepickerTo" class="form-control" asp-for="DateTo" />
                                    </div>
                                    <div class="btn-group position-static text-nowrap">
                                        <input type="submit" value="Generate" class="btn btn-success" />
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="ms-xxl-auto">
                  
                            <input id="buttonPost" type="submit" value="Save" class="btn btn-primary" />
                      
                    </div>
                </div>
            </div>
            <div class="table-responsive text-nowrap">
                <table id="tblPayment" class="table table-bordered border-dark" style="background-color: white;">
                    <thead class="table-dark">
                        <tr class="titlerow">
                            <th class="text-center">
                                @Html.DisplayNameFor(model => model.ModelGeneratePayments[0].EmployerID)
                            </th>
                            <th class="text-center">
                                @Html.DisplayNameFor(model => model.ModelGeneratePayments[0].EmployeeFullName)
                            </th>
                            <th class="text-center">
                                @Html.DisplayNameFor(model => model.ModelGeneratePayments[0].WorkedHours)
                            </th>
                            <th class="text-center">
                                @Html.DisplayNameFor(model => model.ModelGeneratePayments[0].SalaryHour)
                            </th>
                            <th class="text-center">
                                @Html.DisplayNameFor(model => model.ModelGeneratePayments[0].SalaryWorked)
                            </th>
                            <th class="text-center">
                                @Html.DisplayNameFor(model => model.ModelGeneratePayments[0].DriverBonus)
                            </th>
                            <th class="text-center">
                                @Html.DisplayNameFor(model => model.ModelGeneratePayments[0].ExtraBonus)
                            </th>
                            <th class="text-center">
                                @Html.DisplayNameFor(model => model.ModelGeneratePayments[0].Advance)
                            </th>
                            <th class="text-center">
                                @Html.DisplayNameFor(model => model.ModelGeneratePayments[0].TaxDiscount)
                            </th>
                            <th class="text-center">
                                @Html.DisplayNameFor(model => model.ModelGeneratePayments[0].ValueTaxDiscount)
                            </th>
                            <th class="text-center">
                                @Html.DisplayNameFor(model => model.ModelGeneratePayments[0].SalaryToBePaid)
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        @if (Model.ModelGeneratePayments != null)
                        {
 
                            @for (int i = 0; i < Model.ModelGeneratePayments.Count; i++)
                            {
                                <tr>
                                    <td style="text-align:center">
                                        @Html.DisplayFor(modelItem => Model.ModelGeneratePayments[i].EmployerID)
                                        <input type="hidden" asp-for="@Model.ModelGeneratePayments[i].EmployerID" />
                                    </td>
                                    <td style="text-align:center">
                              
                                        @Html.DisplayFor(modelItem => Model.ModelGeneratePayments[i].EmployeeFullName)
                                        <input type="hidden" asp-for="@Model.ModelGeneratePayments[i].EmployeeFullName" />
                                    </td>
                                    <td>
                                 
                                        @Html.DisplayFor(modelItem => Model.ModelGeneratePayments[i].WorkedHours)
                                        <input type="hidden" asp-for="@Model.ModelGeneratePayments[i].WorkedHours" />
                                    </td>
                                    <td>
                                   
                                        @Html.DisplayFor(modelItem => Model.ModelGeneratePayments[i].SalaryHour)
                                        <input type="hidden" asp-for="@Model.ModelGeneratePayments[i].SalaryHour" />
                                    </td>
                                    <td style="text-align:center">
                               
                                        @Html.DisplayFor(modelItem => Model.ModelGeneratePayments[i].SalaryWorked)
                                        <input type="hidden" asp-for="@Model.ModelGeneratePayments[i].SalaryWorked" />
                                    </td>
                                    <td class="rowDataSd" style="text-align:center">
                                     
                                        @Html.DisplayFor(modelItem => Model.ModelGeneratePayments[i].DriverBonus)
                                        <input type="hidden" asp-for="@Model.ModelGeneratePayments[i].DriverBonus" />
                                    </td>
                                    <td class="rowDataSd" style="text-align:center">
                                      
                                        @Html.DisplayFor(modelItem => Model.ModelGeneratePayments[i].ExtraBonus)
                                        <input type="hidden" asp-for="@Model.ModelGeneratePayments[i].ExtraBonus" />
                                    </td>
                                    <td style="text-align:center;color:red">
                                   
                                        @Html.DisplayFor(modelItem => Model.ModelGeneratePayments[i].Advance)
                                        <input type="hidden" asp-for="@Model.ModelGeneratePayments[i].Advance" />
                                    </td>
                                    <td style="text-align:center">
                                   

                                        @Html.DisplayFor(modelItem => Model.ModelGeneratePayments[i].TaxDiscount)
                                        <input type="hidden" asp-for="@Model.ModelGeneratePayments[i].TaxDiscount" />
                                    </td>
                                    <td class="rowDataSd" style="text-align:center">
                             

                                        @Html.DisplayFor(modelItem => Model.ModelGeneratePayments[i].ValueTaxDiscount)
                                        <input type="hidden" asp-for="@Model.ModelGeneratePayments[i].ValueTaxDiscount" />
                                    </td>
                                    <td class="rowDataSd" style="text-align:center">
                                        @Html.DisplayFor(modelItem => Model.ModelGeneratePayments[i].SalaryToBePaid)
                                        <input type="hidden" asp-for="@Model.ModelGeneratePayments[i].SalaryToBePaid" />
                                    </td>
                                </tr>
                            }

                        }

                       
                    </tbody>
            </div>
        </div>
    </div>


</form>


@section Scripts {
    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script src="https://unpkg.com/[email protected]/js/gijgo.min.js" type="text/javascript"></script>
    <link href="https://unpkg.com/[email protected]/css/gijgo.min.css" rel="stylesheet" type="text/css" />
    
    <script>
        $('#datepickerFrom').datepicker({
            uiLibrary: 'bootstrap'
        });
        $('#datepickerTo').datepicker({
            uiLibrary: 'bootstrap'
        });
    </script>
}

后端：

using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
using Microsoft.Data.SqlClient;
using Microsoft.EntityFrameworkCore;
using System.Linq;

namespace WebApplicationRazorIdentity.Pages
{
    public class CreateModel : PageModel
    {
        [BindProperty]
        public IList<ModelGeneratePayments> ModelGeneratePayments { get; set; } = default!;

    
        public IList<ModelPeriodPayment> ModelPeriodPaymentOnPost { get; set; } = default!;
        [BindProperty(SupportsGet = true)]
        public string? DateFrom { get; set; } = default!;

        [BindProperty(SupportsGet = true)]
        public string? DateTo { get; set; } = default!;
        public void OnGet()
        {
            //I directly new the data instead of querying them from database
            ModelGeneratePayments = new List<ModelGeneratePayments> { new ModelGeneratePayments { Advance=11, DriverBonus=22,  EmployeeFullName="aaa", EmployerID =1, ExtraBonus=22, SalaryHour=2,  SalaryToBePaid=1, SalaryWorked=1, TaxDiscount=2, ValueTaxDiscount=3, WorkedHours="1" },
                              new ModelGeneratePayments { Advance=11, DriverBonus=22, EmployeeFullName="aaa", EmployerID =1, ExtraBonus=22, SalaryHour=2,  SalaryToBePaid=1, SalaryWorked=1, TaxDiscount=2, ValueTaxDiscount=3, WorkedHours="1" } };


 

        }

        public async Task<IActionResult> OnPostAsync()
        {

            foreach (var item in ModelGeneratePayments)
            {
                var parameter = new List<SqlParameter>
                {
                    new("@PaymentDate", DateTime.Now),
                    new("@DateSearched", string.Concat(DateFrom," up to ",DateTo)),
                    new("@EmployerID", item.EmployerID),
                    new("@WorkedHours", item.WorkedHours),
                    new("@SalaryHour", item.SalaryHour),
                    new("@SalaryWorked", item.SalaryWorked),
                    new("@DriverBonus", item.DriverBonus),
                    new("@ExtraBonus", item.ExtraBonus),
                    new("@Advance", item.Advance),
                    new("@TaxDiscount", item.TaxDiscount),
                    new("@ValueTaxDiscount", item.ValueTaxDiscount),
                    new("@SalaryToBePaid", item.SalaryToBePaid)
                };
                //await _context.Database.ExecuteSqlRawAsync("STP_CreatePayments @PaymentDate, @DateSearched, @EmployerID, @WorkedHours, @SalaryHour, @SalaryWorked, @DriverBonus, @ExtraBonus, @Advance, @TaxDiscount, @ValueTaxDiscount, @SalaryToBePaid", parameter.ToArray());
            }
            return RedirectToPage("./Index");
        }
    }
}

结果：