Question

我几乎是一个jquery newb ...我觉得我的工作几乎让我知道了，如果我能说清楚的话，请告诉我。

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

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

底部的jquery文件显示了我现在正在尝试执行此操作：尝试检测“确认”按钮上的单击，使用数据目标属性获取表单，并使用表单的target属性知道要更新的容器。

发生的事情是：什么都没有。取消按钮工作，创建按钮绝对没有。

另请注意，“创建”按钮（将作为表单的提交）不在<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;
});

Answer 1

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

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

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

1 个答案: