使用 Ajax 弹出窗口发布数据的问题 - asp.net core

Question

我在使用ajax发布数据时遇到问题。 让我解释一下..我有一个简单的表单来使用ajax调用插入和更新数据来发布“类别”，每件事都100%正常工作，除了一件事。

问题 更新记录后，它会更新并隐藏弹出窗口，但是如果我单击新记录，弹出窗口会显示上次更新记录的值而不是空值形式，它会保留上次更新的值，我不知道为什么？

我的代码

<form asp-action="AddOrEdit" asp-route-id="@Model.CategoryId" onsubmit="return jQueryAjaxPost(this);" autocomplete="off">

            <input type="hidden" asp-for="CategoryId" />

            <div class="form-group">
                <label asp-for="CategoryId" class="control-label"></label>
                <input id="CategoryId" asp-for="CategoryId" class="form-control" />
            </div>
            <div class="form-group">
                <label asp-for="CategoryName" class="control-label"></label>
                <input id="CategoryName" asp-for="CategoryName" class="form-control"></input>
            </div>
            <div class="form-group submit-div">
                <input id="SubmitForm" type="submit" value="حفظ" class="button-insert-model" />
            </div>
        </form>

[HttpGet]
        [NoDirectAccess]
        public async Task<IActionResult> AddOrEdit(int id = 0)
        {
            if (id == 0)
            {
                return View(new Category());
            }
            else
            {
                var cat = await _db.Categories.FindAsync(id);

                if (cat == null)
                {
                    return NotFound();
                }
                return View(cat);
            }

        }

        [HttpPost]
        [ValidateAntiForgeryToken]
        public async Task<IActionResult> AddOrEdit(int id, [Bind("CategoryId, CategoryName")] Category category)
        {
            if (ModelState.IsValid)
            {
                if (id == 0)
                {
                    _db.Add(category);
                    await _db.SaveChangesAsync();
                }
                else
                {
                    try
                    {
                        _db.Update(category);
                        await _db.SaveChangesAsync();
                    }
                    catch (DbUpdateConcurrencyException)
                    {
                       
                    }
                }

                return Json(new
                {
                    isValid = true,
                    html = Helper.RenderRazorViewToString(this, "_ViewAll", _db.Categories.ToList())
                });
            }
            return Json(new { isValid = false, html = Helper.RenderRazorViewToString(this, "AddOrEdit", category) });
        }


<div class="insert-button-div">
    <div class="container">
        <div class="row">
    <a onclick="showInPopup('@Url.Action("AddOrEdit","Home",null,Context.Request.Scheme)','Add Cat')">Add Cat</a>
        </div>
    </div>
</div>
<div class="table-div-grid text-center">
    <div class="container">
        <div class="row">
            <table class="table">
                <thead>
                    <tr>
                        <th>
                            @Html.DisplayNameFor(model => model.CategoryId)
                        </th>
                        <th>
                            @Html.DisplayNameFor(model => model.CategoryName)
                        </th>
                        <th>

                        </th>
                    </tr>
                </thead>
                <tbody>
                    @foreach (var item in Model)
                    {
                        <tr>
                            <td>
                                @item.CategoryName
                            </td>
                            <td class="td-operations">
                                <a onclick="showInPopup('@Url.Action("AddOrEdit","Home",new {id=item.CategoryId}, Context.Request.Scheme)','Edit Record')" class="button-edit-table">Edit</a>
                            </td>
                        </tr>
                    }
                </tbody>
            </table>
        </div>
    </div>
</div>


showInPopup = (url, title) => {
    $.ajax({
        type: 'GET',
        url: url,
        success: function (res) {
            $('#form-modal .modal-body').html(res);
            $('#form-modal .modal-title').html(title);
            $('#form-modal').modal('show');
        }
    })
}

jQueryAjaxPost = form => {
    try {
        $.ajax({
            type: 'POST',
            url: form.action,
            data: new FormData(form),
            contentType: false,
            processData: false,
            cache: false,
            success: function (res) {
                if (res.isValid) {
                    $('#view-all').html(res.html)
                    $('#form-modal .modal-body').html('');
                    $('#form-modal .modal-title').html('');
                    $('#form-modal').modal('hide');
                }
                else
                    $('#form-modal .modal-body').html(res.html);
            },
            error: function (err) {
                console.log(err)
            }
        })
    } catch (ex) {
        console.log(ex)
    }
    //to prevent default form submit event
    return false;
}

Answer 1

您可能遇到了成功更新记录后表单未重置的问题。要解决此问题，您可以修改 jQueryAjaxPost 函数中的成功回调，以在成功更新后重置表单。您可以通过清除表单输入来完成此操作。这是一个修改示例：

success: function (res) {
    if (res.isValid) {
        $('#view-all').html(res.html);
        // Clear form inputs
        $(form)[0].reset();
        $('#form-modal .modal-body').html('');
        $('#form-modal .modal-title').html('');
        $('#form-modal').modal('hide');
    } else {
        $('#form-modal .modal-body').html(res.html);
    }
},

更新 HTML 内容后添加

$(form)[0].reset();

将重置表单输入，从而防止出现保留上次更新的值的问题。尝试合并此更改，看看是否可以解决问题。