使用 sessionStorage 在 ajax post 之后保留或重新填充表单数据

Question

新程序员，第一次发帖。我通常通过在 SO 或其他地方搜索来成功找到解决方案，但在这个问题上没有成功。我有一个使用 Microsoft .NET Framework 4.7 的 MVC 创建页面模板和使用 jquery-3.3.1.js 的模态实现。用户单击页面上的按钮以执行模式，他们可以在其中添加数据，同时表单保持可见。当用户单击模式上的提交按钮时，我希望表单保留用户输入的数据或重新填充数据。目前，当用户在模式上单击“保存”时，它会从表单中删除数据。我可以使用 sessionStorage 成功地存储页面中的数据，我不能做的是在从模式中单击提交后重新填充页面。

我使用过 Chrome 和 Firefox 开发人员，可以在控制台中看到 sessionStorage。我将 getItem 行添加到 ajax 的成功参数中，并将其也添加到完成参数中。就重新填充表格而言，两者都没有成功。我在表单中添加了一个按钮，用户可以单击该按钮来检索他们的表单数据，但我无法使用该功能（业务需求）。

表格摘录 - 模态代码位于此结尾

@model HVAC.Models.EquipmentModel

@{
    ViewBag.Title = "Create";
}

<h2>Add Equipment</h2>

@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()

    <div class="form-horizontal">
        <hr />
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
                <div class="form-group col-md-6">
                    @Html.LabelFor(model => model.Customer_Name, htmlAttributes: new { @class = "control-label" })
                    @Html.EditorFor(model => model.Customer_Name, new { htmlAttributes = new { @class = "form-control"} })
                    @Html.ValidationMessageFor(model => model.Customer_Name, "", new { @class = "text-danger" })
                </div>
        </div>

模态 - 此代码位于页面末尾

<div id="cylinder-add-modal" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Add Cylinder</h4>
            </div>
            @*<form>*@
                <div class="modal-body">
                    <div class="alert alert-danger hide">
                        <strong>Error!</strong><span id="error"></span>
                    </div>
                    <div class="form-group">
                        <label for="Serial_Number" class="required">Serial Number:</label>
                        <input type="text" class="form-control" id="serialNumber">
                        <span id="serialNumber-error" class="text-danger hide">Serial Number is required</span>
                    </div>
                <div class="modal-footer">
                    <button id="cylinder-add-modal-submit" type="button" class="btn btn-primary pull-left"><i class="fa fa-spinner fa-spin hide"></i> Save</button>
                    <button type="button" class="btn btn-default pull-right" data-dismiss="modal">Cancel</button>
                </div>
            @*</form>*@
        </div>

    </div>
</div>

正在保存会话数据 - 我可以在此处成功保存会话数据

j('#cylinder-add-modal-submit').on('click', function (e) {
        console.log('adding cylinder');
        sessionStorage.setItem('customer', j('#Customer_Name').val());

尝试检索会话数据并放回表单

j.ajax({
                type: "POST",
                url: siteRoot + "Test/CreateTest",
                data: postData,
                dataType: "json",
                success: function (result) {
                    if (result.success) {
                        //alert(result.success)
                        modal.modal('hide');

                        console.log("inside success");
                        let customerdata = sessionStorage.getItem('customer');
                        console.log("proof of data " + customerdata);
                        j('#Customer_Name').val(customerdata);
                    } else {
                        modal.find('div.alert').removeClass('hide');
                        modal.find('#error').text(result.error);
                    }
                }
            })
                .done(function () {
                    console.log("in done function");

                    console.log(customerdata);
                    j('#Customer_Name').val(customerdata);
                    //j('#Customer_Name').append(customerdata);
                });

我只能使用这个

来检索它

j('#refresh').on('click', function (e) {
        e.stopImmediatePropagation();
    //j('#asset-add-modal').on('hidden.bs.modal', function () {
        //alert('test');

        //retrieve customer/equipment data
        let customerdata = sessionStorage.getItem('customer');

我没有收到任何错误消息。我只是无法检索数据并将其重新填充到表单中。同样，表单是主页面，当用户单击按钮添加数据时会弹出模式。我使用 .html 和 .text 也尝试检索数据。

我已尝试在模态隐藏时检索数据，如代码中所示（已注释掉）。

Answer 1

我找到了一种方法来完成这项工作。我将以下代码放在创建页面本身上。我有两个模态，用户可以通过单击来创建新数据。一旦模态已提交并隐藏，数据将重新插入到表单中。

我已经测试过了，它可以正常工作！

@section Scripts{

<script type="text/javascript">

$(document).ready(function () {

   $(function () {

       let customerdata = sessionStorage.getItem('customer');
       $('#Customer_Name').val(customerdata);
   });
});
</script>
}

使用 sessionStorage 在 ajax post 之后保留或重新填充表单数据

Keep or re-populate form data after ajax post using sessionStorage

forms

model-view-controller

jquery

post

session-storage