C# 需要帮助使用jquery完成异步表单发布和屏幕更新吗

我基本上是一个jquery新手……我想我已经基本上成功了，如果我能澄清任何事情，请告诉我

我有一个屏幕显示一个列表。让我们称他们为附属公司。要创建一个新的分支机构，需要使用模态风格的弹出对话框

单击对话框“创建”按钮时，必须保存表单数据（创建新的附属机构），对话框消失，附属机构列表更新而不重新加载页面

底部的jquery文件显示了我现在是如何尝试的：尝试检测单击“确认”按钮，使用数据目标属性获取要提交的表单，并使用表单的目标属性了解要更新的容器

正在发生的是：什么都没有。“取消”按钮起作用，“创建”按钮完全不起作用

还请注意，“创建”按钮将作为表单的提交按钮，它不位于

标记内

我很确定我做的模态是错误的，但我们暂时忽略这一点，把重点放在异步post和列表更新上。我在下面加入了我的相关代码来支持我的帖子

--附属部分

@model IPagedList<Acme.Business.DomainModel.Affiliates.Affiliate>

    <div class="items-list" id="affiliate-list-view">
        @foreach (var item in Model)
        {
            <a href="@Url.Action("AffiliateDetails", "Vendor", new { id = item.AffiliateId })">
              //basic spans and razor display list in here..nothing notable
            </a>
        }
    </div>

用于创建新分支机构的模态风格对话（我将只包括我认为相关的行）： _Modal.AffiliateCreate.Partial

<form id="affiliate-create-form" class="form" method="post" action="@Url.Action("AffiliateCreate")" data-acme-ajax="true" data-acme-target="#affiliate-list-view">
// multiple input elements
</form>
<div class="modal-footer">
  <button name="close_modal"><span>Cancel</span></button>
  <button name="confirm" data-acme-target="#affiliate-create-form"><span>Create</span></button>
</div>

以及.js文件的相关部分：

    $("button[name='confirm']").on("click", function() {
    var $form = $(this).attr("data-acme-target");

    var options = {
        url: $form.attr("action"),
        type: $form.attr("type"),
        data: $form.serialize()
    };

    $.ajax(options).done(function (data) {
        var $target = $($form.attr("data-acme-target"));
        var $newHtml = $(data);
        $target.replaceWith(data);
        $newHtml.effect("highlight");
    });

    $(".modal_overlay").css("opacity", "0");
    $(".modal_container").css("display", "none");
    return false;
});

$("button[name='close_modal']").on("click", function(event) {
    $(".modal_overlay").css("opacity", "0");
    $(".modal_container").css("display", "none");
    return false;
});

var$form=$（this.attr（“数据顶点目标”）

正在获取按钮的名为

'data-acme-target'

的属性，而不是它所关联的表单。因此，当您使用

$form.attr（'action'）

时，您不会得到任何回报

---

由于data acme target是要提交表单的另一个控件的ID，请使用

$（$（this）.attr（“data acme target”）

获取它。

$form=按钮的目标，即表单的id…因此，$form.attr（'action'）应该是表单的操作。否？$form是按钮的目标id，而不是控件本身。在url上放置一个断点：$form.attr（“action”），您将看到$form是“#affiliate create form”，字符串，而不是控件。

[HttpPost]
        [ValidateAntiForgeryToken]
        public ActionResult AffiliateCreate(Affiliate affiliate)
        {
            if (!ModelState.IsValid) return View(affiliate);
            db.Affiliates.Add(affiliate);
            db.SaveChanges();
            return RedirectToAction("AffiliateList");
        }

    $("button[name='confirm']").on("click", function() {
    var $form = $(this).attr("data-acme-target");

    var options = {
        url: $form.attr("action"),
        type: $form.attr("type"),
        data: $form.serialize()
    };

    $.ajax(options).done(function (data) {
        var $target = $($form.attr("data-acme-target"));
        var $newHtml = $(data);
        $target.replaceWith(data);
        $newHtml.effect("highlight");
    });

    $(".modal_overlay").css("opacity", "0");
    $(".modal_container").css("display", "none");
    return false;
});

$("button[name='close_modal']").on("click", function(event) {
    $(".modal_overlay").css("opacity", "0");
    $(".modal_container").css("display", "none");
    return false;
});