0

在创建一个自定义插件时，该插件会通过不显眼的 Ajax 对尚未 Ajaxified 的form任何s进行 Ajax 化，我注意到我的部分/布局代码无法使用正常的 Unobtrusive Ajax 表单在回发时显示：

对于我的其他部分更新插件，我有条件地将页面呈现为部分（对于 ajax 请求）或完整的布局（对于正常请求），如下所示：

    public ActionResult AjaxForm()
    {
        if (!Request.IsAjaxRequest())
        {
            ViewBag.Layout = "_Layout.cshtml";
        }
        return PartialView();
    }

    [HttpPost]
    [ValidateAntiForgeryToken]
    public ActionResult AjaxForm(AjaxFormModel model)
    {
        if (!Request.IsAjaxRequest())
        {
            ViewBag.Layout = "_Layout.cshtml";
        }

        if (ModelState.IsValid)
        {
            return PartialView("Success", model);
        }

        return PartialView(model);
    }

在测试一个普通的不显眼的 Ajax 表单时，我使用了这个测试视图，它只更新了它自己的元素UpdateTargetId="FormPanel"：

@using (Ajax.BeginForm("AjaxForm", null, new AjaxOptions() { UpdateTargetId = "FormPanel" }, new { id = "FormPanel" }))
{
    @Html.AntiForgeryToken()

    <div class="form-horizontal">
        <div class="form-group">
            @Html.LabelFor(model => model.Name, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Name, new { htmlAttributes = new { @class = "form-control" } })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.AddressLine, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.AddressLine, new { htmlAttributes = new { @class = "form-control" } })
            </div>
        </div>

        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Create" class="btn btn-default" />
            </div>
        </div>
    </div>
}

如果我删除 testif (!Request.IsAjaxRequest())并返回带有母版页/布局的完整页面，它会在表单所在的位置呈现结果。

Fiddler 显示在任何一种情况下都会返回“成功”视图，但如果没有布局，它不会做任何事情。

问：不显眼的 Ajax 需要在母版页/布局中提取内容并替换指定元素

更新：

更糟糕的是，它实际上第一次正常工作，但如果我再次加载相同的表单，则不会。

4

1 回答 1

0

答：表单必须有唯一的 ID！

SO上有很多关于唯一ID的问题，浏览器通常会处理这些问题，但你永远无法破解的问题是加载了两个具有相同ID的表单。JavaScript/jQuery 只有一个可见！

我的问题是由重复的表单 ID 引起的。您不应该将结果页面重新插入表单本身（保持表单元素完好无损）。

当我在幻灯片式控件中动态地重新加载原始表单时，我得到了重复的表单 ID。

这意味着 Unobtrusive Ajax 只能看到 DOM 中的第一个表单！

解决方案（不要设置 Ajax 表单自行更新）：

如果您动态加载面板，请设置UpdateTargetId为表单上方的元素，而不是表单本身。

修复我的示例视图（带有目标面板的环绕表单）：

<div id="FormPanel">
    @using (Ajax.BeginForm("AjaxForm", new AjaxOptions() { UpdateTargetId = "FormPanel" }))
于 2014-06-18T14:37:12.790 回答