Asp.Net Core提交重复数据后保留表单输入值的实现方案

问题场景 #

在Asp.Net Core开发采购信息提交功能时，当用户选择数据库已存在的年份和季节提交，系统会提示重复，但页面刷新后表单所有输入值被清空，需要实现刷新后保留输入值，方便用户重新选择年份和季节。

解决方案 #

1. 修改控制器代码 #

重定向操作会丢失表单数据，因此当检测到重复时，直接返回视图并传递提交的参数，同时保留错误提示：

public IActionResult SabtKhareedView(int id, string yare = null, string faslName = null, IEnumerable<Khareed> khareedData = null)
{
    var pro = _context.Projects.Find(id);
    ViewBag.proName = pro.projectName;
    ViewBag.proID = pro.projectID;
    // 传递提交的年份和季节
    ViewBag.Yare = yare;
    ViewBag.FaslName = faslName;
    // 传递采购金额数据
    ViewBag.KhareedData = khareedData;
    
    var list = _context.TaminKoonande.Where(a => a.ProjectID == id && a.VazyatTaminKoonande == 1).ToList();
    return View(list);
}

[HttpPost]
public IActionResult SabtKhareed(IEnumerable<Khareed> khareed, int ProjectId, string Yare, string FaslName, int id)
{
    var mainkareed = _context.MainKhareed.Where(a => a.ProjectId == ProjectId && a.Fasle == FaslName && a.Year == Yare).FirstOrDefault();

    if (mainkareed == null)
    {
        foreach (var item in khareed)
        {
            var taminName = _context.TaminKoonande.Find(item.TaminKoonandeID);
            Khareed khareed1 = new Khareed
            {
                MablaghKhreedAnjamShode = item.MablaghKhreedAnjamShode,
                ProjectId = item.ProjectId,
                Year = Yare,
                Fasle = FaslName,
                TaminKoonandeID = item.TaminKoonandeID,
                TaminKoonandeName = $"{taminName.NameFroshande} {taminName.FamilyOrCoumpanyFroshande}",
                NoaeMooamele = "ریالی"
            };
            _context.Khareed.Add(khareed1);
        }
        _context.SaveChanges();
        return RedirectToAction("KhareedListView", new { id });
    }

    // 保存错误状态和提交的表单数据，返回原视图
    TempData["Error"] = 1;
    ViewBag.Yare = Yare;
    ViewBag.FaslName = FaslName;
    ViewBag.KhareedData = khareed;
    var supplierList = _context.TaminKoonande.Where(a => a.ProjectID == id && a.VazyatTaminKoonande == 1).ToList();
    return View("SabtKhareedView", supplierList);
}

2. 修改视图代码 #

根据ViewBag传递的数据，恢复下拉框选中状态和输入框的值：

<form asp-controller="UserTax" asp-action="SabtKhareed" method="post">
    <div class="row d-flex justify-content-between align-items-center  p-2" style="background-color:#17a2b8; color:white">
        <h6>نام پروژه : <b class="text-warning">@ViewBag.proName</b></h6>

        <div class="d-flex">
            <label class="mt-2" style="margin-left:5px">سال</label>
            <select class="form-control" name="Yare" id="Yare" required autocomplete="off">
                <option value="" @(string.IsNullOrEmpty(ViewBag.Yare) ? "selected" : "")>انتخاب کنید</option>
                <option value="1400" @(ViewBag.Yare == "1400" ? "selected" : "")>1400</option>
                <option value="1401" @(ViewBag.Yare == "1401" ? "selected" : "")>1401</option>
                <option value="1402" @(ViewBag.Yare == "1402" ? "selected" : "")>1402</option>
                <option value="1403" @(ViewBag.Yare == "1403" ? "selected" : "")>1403</option>
                <option value="1404" @(ViewBag.Yare == "1404" ? "selected" : "")>1404</option>
                <option value="1405" @(ViewBag.Yare == "1405" ? "selected" : "")>1405</option>
                <option value="1406" @(ViewBag.Yare == "1406" ? "selected" : "")>1406</option>
                <option value="1407" @(ViewBag.Yare == "1407" ? "selected" : "")>1407</option>
                <option value="1408" @(ViewBag.Yare == "1408" ? "selected" : "")>1408</option>
                <option value="1409" @(ViewBag.Yare == "1409" ? "selected" : "")>1409</option>
                <option value="1410" @(ViewBag.Yare == "1410" ? "selected" : "")>1410</option>
            </select>
        </div>

        <div class=" d-flex" style="margin-left:150px">
            <label class="mt-2" style="margin-left:5px">فصل</label>
            <select class="form-control" name="FaslName" id="FaslName" required autocomplete="off">
                <option value="" @(string.IsNullOrEmpty(ViewBag.FaslName) ? "selected" : "")>انتخاب کنید</option>
                <option value="بهار" @(ViewBag.FaslName == "بهار" ? "selected" : "")>بهار</option>
                <option value="تابستان" @(ViewBag.FaslName == "تابستان" ? "selected" : "")>تابستان</option>
                <option value="پاییز" @(ViewBag.FaslName == "پاییز" ? "selected" : "")>پاییز</option>
                <option value="زمستان" @(ViewBag.FaslName == "زمستان" ? "selected" : "")>زمستان</option>
                <option value="سایر" @(ViewBag.FaslName == "سایر" ? "selected" : "")>سایر</option>
            </select>
        </div>
    </div>
    <hr />

    <!-- 显示重复提示 -->
    @if (TempData["Error"] != null && TempData["Error"].ToString() == "1")
    {
        <div class="alert alert-danger text-center">
            این سال و فصل برای پروژه انتخاب شده قبلا ثبت شده است
        </div>
    }

    <div class="container-fluid" style="overflow: auto; overflow-x: hidden; direction:ltr ">
        <table class="table table-bordered table-striped table-hover  display" width="100%" style="direction:rtl;font-size:12px">
            <thead>
                <tr class="table-head-blue text-center" style="background-color: #416992; color: white; position: sticky; top: 0;">
                    <th>جزئیات</th>
                    <th>نام فروشنده</th>
                    <th style="font-size:12px">مبلغ خرید انجام شده</th>
                </tr>
            </thead>
            @{ 
                var count = 0;
                var khareedData = ViewBag.KhareedData as IEnumerable<Khareed>;
            }

            @for (var i = 0; i < Model.Count(); i++)
            {
                var amount = khareedData != null && khareedData.Count() > i ? khareedData.ElementAt(i).MablaghKhreedAnjamShode : "";
                <tr>
                    <td class="text-center">
                        <a class="btn btn-secondary btn-sm " style="color:white; " data-toggle="modal" data-target="#myModal2@(count)"><i class="fa fa-info"></i></a>
                    </td>
                    <td class="text-center">@Model.ToList()[i].NameFroshande  @Model.ToList()[i].FamilyOrCoumpanyFroshande</td>
                    <td class="text-center">
                        <input class=" mt-1 text-sm text-center" onkeyup="javascript:this.value=itpro(this.value);" 
                               name="[@i].MablaghKhreedAnjamShode" style="width:150px" required autocomplete="off" 
                               value="@amount" />
                        <!-- 隐藏字段传递供应商ID和项目ID -->
                        <input type="hidden" name="[@i].TaminKoonandeID" value="@Model.ToList()[i].TaminKoonandeID" />
                        <input type="hidden" name="[@i].ProjectId" value="@ViewBag.proID" />
                    </td>
                </tr>
                count++;
            }
        </table>
    </div>

    <div class=" text-center">
        <button class="btn btn-success  col-4 mb-2 " type="submit">ثبت اطلاعات</button>
    </div>
</form>

关键说明 #

• 取消重定向：当检测到重复数据时，不再使用RedirectToAction，直接返回原视图避免表单数据丢失。
• 回传表单数据：通过ViewBag将用户提交的年份、季节和采购金额传递回视图，用于恢复表单内容。
• 恢复表单状态：在视图中根据ViewBag的值设置下拉框选中状态，填充输入框的金额值。
• 补充隐藏字段：添加供应商ID和项目ID的隐藏字段，确保提交时关键数据能正确回传。

内容的提问来源于stack exchange，提问作者stoo frisat