.NET MVC - JQuery AJAX 有时检索局部视图 returns 404 错误，无法查明这背后的问题

Question

我创建了一个表单，它通过单击按钮动态添加由表单字段组成的部分视图（每个部分视图都有唯一的按钮 - 一个用于记录请求，另一个用于参考请求） .用户可以在原始表单中添加任意数量的记录或参考请求。

从部分视图中检索 HTML 是通过 JQuery 的 Ajax 完成的。但是，它不能始终如一地工作。有时，如果我打开表单，在单击两个按钮之一时，会 return 出现 404 错误。但是，如果我刷新（或在其他时间打开），它会触发并发布结果 w/o 任何问题 - 当服务器能够 return 数据时它工作得很好。但当然，我需要它始终如一地工作，无法弄清楚这里发生了什么。

我已经尝试调整 ajax 设置 - 将类型从 GET 更改为 POST 并尝试通过 @Html.UrlAction 帮助程序找到部分视图所在的路径，但是无济于事。我用谷歌搜索了这个，但没有看到任何处理断断续续 AJAX 失败的事情：部分视图

HTML 为原始形式，为简洁起见，View/Home/Index.cshtml

<div class="customer">
            <form>
                <div class="form-row">
                            <div class="form-group col-md-6">
                                @Html.LabelFor(x => x.FirstName, new { @class = "required" })
                                @Html.TextBoxFor(x => x.FirstName, new { @class = "form-control" })
                                @Html.ValidationMessageFor(x => x.FirstName, "", new { @class = "text-danger" })
                            </div>
                            <div class="form-group col-md-6">
                                @Html.LabelFor(x => x.LastName, new { @class = "required" })
                                @Html.TextBoxFor(x => x.LastName, new { @class = "form-control" })
                                @Html.ValidationMessageFor(x => x.LastName, "", new { @class = "text-danger" })
                            </div>
                 </div>
                 <div class="form-row">
                            <div class="form-group col-md-6">
                                @Html.LabelFor(x => x.Email, new { @class = "required" })
                                @Html.TextBoxFor(x => x.Email, new { @class = "form-control" })
                                @Html.ValidationMessageFor(x => x.Email, "", new { @class = "text-danger" })
                            </div>
                            <div class="form-group col-md-6">
                                @Html.LabelFor(x => x.PhNbr, new { @class = "required" })
                                @Html.TextBoxFor(x => x.PhNbr, new { @class = "form-control" })
                                @Html.ValidationMessageFor(x => x.PhNbr, "", new { @class = "text-danger" })
                            </div>
                </div>
            </form>
        </div>
        <div class="request">
            <h2 class="topspacing-med btmspacing-med">Request Details</h2>
            <button type="button" class="btn btn-outline-secondary btn-lg btn-block btmspacing-med" id="addRecord">Add New Record Request</button>
            <button type="button" class="btn btn-outline-secondary btn-lg btn-block" id="addRef">Add New Reference Request</button>
            <div id="displayForm"></div>
        </div>
        </div>

示例局部视图 - View/Partials/_RecordRequestForm.cshtml

@Html.BeginForm("SubmitRecord", "Home"){
<div id="record">
    <div class="card">
        <div class="card-body">
            <h3>Record Request</h3>
                    <div class="form-group">
                        @Html.LabelFor(x => x.Comments)
                        @Html.TextAreaFor(x => x.Comments, new { @class = "form-control" })
                        @Html.ValidationMessageFor(x => x.Comments, "", new { @class = "text-danger" })
                    </div>
                </div>
            <div class="btn-toolbar justify-content-between" role="toolbar" aria-label="Toolbar with button groups">
                <div class="btn-group float-right mt-2" role="group" aria-label="Second group" ">
                    <button type="button" class="btn btn-secondary btn-lg btn-block" id="cancel">Cancel</button>
                    <input class="btn btn-primary btn-lg btn-block" type="submit" value="Save" />
                </div>
    </div>
</div>
}

AJAX 脚本 - 在索引文件中

        $("#addRecord").click(function () {
            $.ajax({
                //url: "../Views/Partials/_RecordRequestForm.cshtml",
                url:"RenderNewRecordRequestForm",
                dataType: "html",
                type: 'GET',
                success: function (result) {
                    $('#displayForm').append(result);
                    hideButtons();
                    count++;
                    console.log(count);
                },
                error: function (xhr, ajaxOptions, thrownError) {
                    console.log(xhr.status);
                    console.log(thrownError);
                },

            });
        });

在 Home 控制器中渲染部分的动作方法

 private string PartialViewPath(string name)
        {
            return $"~/Views/Partials/Home/{name}.cshtml";
        }

        public ActionResult RenderNewRecordRequestForm()
        {
            return PartialView(PartialViewPath("_RecordRequestForm"));
        }

_Layout 文件底部有 Jquery 引用

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
</body>

同样，这在 AJAX return 数据时效果很好，但它不能始终如一地工作。需要了解为什么它有时会失败。

Answer 1

好吧，这毕竟有效 - 使用：url: '@Url.Action("RenderNewRecordRequestForm", "Home")'，在 Ajax设置。我以为我以前尝试过这个（或者可能在最后一次尝试中有错字）但现在 Ajax 能够通过正确的控制器中的正确的操作方法找到文件。一切都很好（到目前为止）。 –

.NET MVC - JQuery AJAX 有时检索局部视图 returns 404 错误，无法查明这背后的问题

.NET MVC - JQuery AJAX that retrieves a Partial View sometimes returns a 404 error, can't pinpoint issue behind this

jquery

ajax

asp.net-mvc

partial-views