0

我几乎是一个 jquery 新手......我想我几乎已经完成了这项工作，如果我能澄清任何事情，请告诉我。

我有一个显示列表的屏幕..我们称他们为附属公司。要创建新的会员，使用模态样式弹出对话框。

单击对话框“创建”按钮时，必须保存表单数据（创建新会员），对话框消失，会员列表更新而无需重新加载页面

底部的 jquery 文件显示了我现在的尝试方式：尝试检测对“确认”按钮的点击，使用 data 目标属性获取要提交的表单，并使用表单的目标属性知道什么容器更新。

正在发生的事情是：什么都没有。取消按钮有效，创建按钮完全没有任何作用。

另请注意，将充当表单提交的“创建”按钮不在<form>标签内。

我很确定我做错了模式，但让我们暂时忽略它，专注于异步帖子和列表更新。我在下面包含了我的相关代码以支持我的帖子。

--AffiliateListPartial

@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>

上面的部分视图包含在一个完整的视图中，我们称之为 AffiliateList。除了它由 VendorController/Affiliatelist 方法控制之外，没有什么特别相关的。

VendorController.AffiliateList 看起来像：

public ActionResult AffiliateList(string searchTerm = null, int page = 1)
        {
            var userId = WebSecurity.GetUserId(User.Identity.Name);

            var model = (from a in db.Affiliates.ToList()
                            where a.VendorId == userId
                            select a).ToPagedList(page, 15);

            if(Request.IsAjaxRequest()) return PartialView("_AffiliateListPartial", model);
            return View(model);
        }

用于创建新会员的模态风格对话（我将仅包括我认为相关的行）：_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>

而 VendorController.AffiliateCreate 方法：

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

以及 .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;
});
4

1 回答 1

0

var $form = $(this).attr("data-acme-target");正在获取名为'data-acme-target'按钮的属性，而不是与其关联的表单。因此，当您使用 时$form.attr('action')，您将一无所获。

由于 data-acme-target 是另一个控件的 ID，即您要提交的表单，请使用$($(this).attr("data-acme-target"));它来获取它。

于 2013-08-18T21:05:48.173 回答