javascript - Ajax.BeginForm 在页面中加载结果

Question

这个问题已经有答案了:

Update div using ajax.beginform inside asp mvc view (1 个回答)

已关闭 7 年前。

我正在尝试执行 AJax 表单发布，成功后会用结果更新表格。

这是我的代码:

@using (Ajax.BeginForm("AddTagToSubject", "Subjects", null, new AjaxOptions() { OnSuccess = "UpdateTableData();" }, null))
{
    @Html.AntiForgeryToken()    
    <div class="form-">
        <div class="form-horizontal">
            @Html.Hidden("SubjectId", Model.Id)    
            <div class="form-group">
                @Html.Label("Add Tag", htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-4">
                    @Html.TextBox("Tag", "", new { @class = "form-control" })
                </div>
                <div class="col-md-2">
                    <input type="submit" value="Add" class="btn btn-default" />
                </div>
            </div>
        </div>
    </div>
}

这是页面底部的我的脚本:

 <script type="text/javascript">
       //Get the latest tags
        function UpdateTableData() {
            console.log("Called fucntion");         
        }
   </script>

这是我的操作方法:

[HttpPost]
    public async Task<JsonResult> AddTagToSubject(AddTagToSubjectViewModel model)
    {
        model.Tag = model.Tag.ToLowerInvariant();
        var tags = await db.Tags.FirstOrDefaultAsync(x => x.Name == model.Tag);
        if (tags == null)
        {
            tags = new Tag { CreatedBy = User.Identity.GetUserId(), DateCreated = DateTime.UtcNow, Name = model.Tag };
            db.Tags.Add(tags);
            await db.SaveChangesAsync();
        }
        var subject = await db.Subjects.FirstOrDefaultAsync(x => x.Id == model.SubjectId);
        subject.Tags.Add(tags);
        await db.SaveChangesAsync();
        return Json(subject.Tags.Select(x => new { Id = x.Id, Name = x.Name }).ToList(), JsonRequestBehavior.AllowGet);
    }

现在，当我添加标签时，它会调用操作方法，一切正常。它将标签添加到数据库中。但在我的前端，而不是调用我的 OnSuccess' function. It just reloads the whole webpage and displays my JSON`结果。

[{"Id":3,"Name":"Zulu"},{"Id":7,"Name":"accounting"},{"Id":6,"Name":"High School"}]

我的布局文件中包含以下内容:

  bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                        "~/Scripts/jquery-{version}.js",
                        "~/Scripts/jquery.unobtrusive-ajax.js"
                        ));

我在这里缺少什么？

Answer 1

您必须包含 jquery.unobtrusive-ajax.js 并且也许您已经更改了 Ajax.BeginForm 的 OnSuccess 函数，如下所示:

@using (Ajax.BeginForm("AddTagToSubject", "Subjects", null, 
         new AjaxOptions() { OnSuccess = "UpdateTableData" }, null)){...}