从 Ajax Javascript Razor 页面更新列表

Question

我在一个简单的 Razor 页面中有 2 个文本框和 2 个下拉列表，我需要做的就是当我填写这些字段并单击添加按钮时，这些数据应该添加到我已经在 cshtml.cs 文件中创建的列表中，这个列表已经绑定到一个网格（datatable.net），一旦添加了一个新行，它应该绑定到网格，并且在提交时我将使用这个列表将数据保存在数据库中。 [绑定属性] 公共列表 gridBind { get;放; } = 新列表();

Cshtml代码如下

@{
    ViewData["Title"] = "Create";
    Layout = "~/Pages/Shared/_Layout.cshtml";
}

<h1>Create</h1>

<h4>Trans_Detail</h4>
<hr />
<div class="row">
    <div class="col-md-4">
        <form method="post">
            <div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div class="form-group">
                <label class="control-label">Vendor</label>
                <select asp-for="VendorGUIDBind" class ="form-control" asp-items="ViewBag.Vendor_GUID" >
                </select>
            </div>

            <div class="form-group">
                <label asp-for="tbl_AC_Trans_Detail.Cement_GUID" class="control-label"></label>
                <select asp-for="tbl_AC_Trans_Detail.Cement_GUID" class ="form-control" asp-items="ViewBag.Cement_GUID" id="ddlCement">
                    <option value="">Select Cement</option>
                </select>
            </div>
            <div class="form-group">
                <label asp-for="tbl_AC_Trans_Detail.Cement_Type_GUID" class="control-label"></label>
                <select asp-for="tbl_AC_Trans_Detail.Cement_Type_GUID" class ="form-control" asp-items="ViewBag.Cement_Type_GUID" id="ddlCementType">
                    <option value="">Select Cement Type</option>
                </select>
            </div>
            <div class="form-group">
                <label asp-for="tbl_AC_Trans_Detail.Cement_Quantity" class="control-label">Cement Quantity</label>
                <input asp-for="tbl_AC_Trans_Detail.Cement_Quantity" class="form-control" id="txtCementQuantity"/>
                <span asp-validation-for="tbl_AC_Trans_Detail.Cement_Quantity" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="tbl_AC_Trans_Detail.Cement_Price" class="control-label"></label>
                <input asp-for="tbl_AC_Trans_Detail.Cement_Price" class="form-control" id="txtCementPrice" />
                <span asp-validation-for="tbl_AC_Trans_Detail.Cement_Price" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="tbl_AC_Trans_Detail.Total_Amount" class="control-label"></label>
                <input asp-for="tbl_AC_Trans_Detail.Total_Amount" class="form-control" id="txtTotalAmount" />
                <span asp-validation-for="tbl_AC_Trans_Detail.Total_Amount" class="text-danger"></span>
            </div>
            <div class="form-group">
                <input type="submit" value="Create" class="btn btn-primary" asp-action="OnPostAsync" />
                <input type="button" value="addRow" class="btn btn-primary" onclick="AddProduct()" />
            </div>

        </form>
    </div>
</div>
<table id="example2" class="display" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th>Cement</th>
            <th>Cement Type</th>
            <th>Quantity</th>
            <th>Cement Price</th>
            <th>Total</th>
        </tr>
    </thead>
 
        <tbody>
@foreach (var item in Model.gridBind) {
        <tr>
            <td>
                @Html.DisplayFor(modelItem => item.Cement_GU.Cement_Name)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Cement_Type_GU.Cement_Type_Name)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Cement_Quantity)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Cement_Price)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Total_Amount)
            </td>
            
        </tr>
}
    </tbody>
</table>

以及下面的Cshtml.cs文件代码

public CreateModel(ArabianCement.Models.ArabianCementContext context, IConfiguration configuration)
        {
            _context = context;
            _configuration = configuration;
        }
        [BindProperty]
        public Guid VendorGUIDBind { get; set; }


        [BindProperty]
        public List<tbl_AC_Trans_Detail> gridBind { get; set; } = new List<tbl_AC_Trans_Detail>();

        public IActionResult OnGet()
        {
        ViewData["AC_Trans_GUID"] = new SelectList(_context.tbl_AC_Trans, "AC_Trans_GUID", "AC_Trans_GUID");
        ViewData["Cement_GUID"] = new SelectList(_context.LK_Cements, "Cement_GUID", "Cement_Name");
        ViewData["Vendor_GUID"] = new SelectList(_context.LK_Sources, "Source_GUID", "Source_Name");
        
            return Page();
        }

        [BindProperty]
        public tbl_AC_Trans_Detail tbl_AC_Trans_Detail { get; set; }


        public async Task<IActionResult> OnPostAsync()
        {
            if (!ModelState.IsValid)
            {
                return Page();
            }



            tbl_AC_Tran objMainTrans = new tbl_AC_Tran();
            Guid sellGUID = Guid.Parse(_configuration["AppKeys:SellGUID"]);
            objMainTrans.AC_Trans_GUID = Guid.NewGuid();
            objMainTrans.Creation_Date = DateTime.Now;
            objMainTrans.Vendor_GUID = VendorGUIDBind;
            objMainTrans.Trans_Type = sellGUID;

            //_context.tbl_AC_Trans.Add(objMainTrans);
            //await _context.SaveChangesAsync();


            //_context.tbl_AC_Trans_Details.Add(tbl_AC_Trans_Detail);
           // await _context.SaveChangesAsync();

            
            return RedirectToPage();
        }

        public IEnumerable<LK_Cement_Type> GetModels(Guid cementGUID)
        {
            IEnumerable<LK_Cement_Type> model = _context.LK_Cement_Types.Where(x => x.Cement_GUID == cementGUID).ToList();
            return model;
        }

        public JsonResult OnGetCementTypes(string id)
        {
            Guid guid = Guid.Parse(id);
            return new JsonResult(GetModels(guid));
        }

Answer 1

这是一个演示，将VendorGUIDBind 和tbl_AC_Trans_Detail 和gridBind 传递给OnPostAsync,gridBind 数据在<div id="hiddenData"></div> 中：

<div class="row">
    <div class="col-md-4">
        <form method="post">
            <div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div class="form-group">
                <label class="control-label">Vendor</label>
                <select asp-for="VendorGUIDBind" class ="form-control" asp-items="ViewBag.Vendor_GUID" >
                </select>
            </div>

            <div class="form-group">
                <label asp-for="tbl_AC_Trans_Detail.Cement_GUID" class="control-label"></label>
                <select asp-for="tbl_AC_Trans_Detail.Cement_GUID" class ="form-control" asp-items="ViewBag.Cement_GUID" id="ddlCement">
                    <option value="">Select Cement</option>
                </select>
            </div>
            <div class="form-group">
                <label asp-for="tbl_AC_Trans_Detail.Cement_Type_GUID" class="control-label"></label>
                <select asp-for="tbl_AC_Trans_Detail.Cement_Type_GUID" class ="form-control" asp-items="ViewBag.Cement_Type_GUID" id="ddlCementType">
                    <option value="">Select Cement Type</option>
                </select>
            </div>
            <div class="form-group">
                <label asp-for="tbl_AC_Trans_Detail.Cement_Quantity" class="control-label">Cement Quantity</label>
                <input asp-for="tbl_AC_Trans_Detail.Cement_Quantity" class="form-control" id="txtCementQuantity"/>
                <span asp-validation-for="tbl_AC_Trans_Detail.Cement_Quantity" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="tbl_AC_Trans_Detail.Cement_Price" class="control-label"></label>
                <input asp-for="tbl_AC_Trans_Detail.Cement_Price" class="form-control" id="txtCementPrice" />
                <span asp-validation-for="tbl_AC_Trans_Detail.Cement_Price" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="tbl_AC_Trans_Detail.Total_Amount" class="control-label"></label>
                <input asp-for="tbl_AC_Trans_Detail.Total_Amount" class="form-control" id="txtTotalAmount" />
                <span asp-validation-for="tbl_AC_Trans_Detail.Total_Amount" class="text-danger"></span>
            </div>
            <div id="hiddenData">
        @for (var i = 0; i < Model.gridBind.Count; i++)
        {
            <input hidden asp-for="gridBind[i].Cement_GU.Cement_Name" />
            <input hidden asp-for="gridBind[i].Cement_Type_GU.Cement_Type_Name" />
            <input hidden asp-for="gridBind[i].Cement_Quantity" />
            <input hidden asp-for="gridBind[i].Cement_Price" />
            <input hidden asp-for="gridBind[i].Total_Amount" />

        }
       
    </div>
    <div class="form-group">
        <input type="submit" value="Create" class="btn btn-primary"/>
      
    </div>
        </form>
    </div>
</div>
<table id="example2" class="display" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th>Cement</th>
            <th>Cement Type</th>
            <th>Quantity</th>
            <th>Cement Price</th>
            <th>Total</th>
        </tr>
    </thead>
 
        <tbody>
@foreach (var item in Model.gridBind) {
        <tr>
            <td>
                @Html.DisplayFor(modelItem => item.Cement_GU.Cement_Name)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Cement_Type_GU.Cement_Type_Name)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Cement_Quantity)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Cement_Price)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Total_Amount)
            </td>
            
        </tr>
}
    </tbody>
</table>

那么你只需要在OnPostAsync中将数据保存到数据库并添加数据到gridBind中即可 结果：