c# - jqueryを使用して非同期フォームの投稿と画面の更新を完了するのに助けが必要

Question

私はほとんどjqueryの初心者です...私はこれがほとんど機能していると思います。何か明確にできるかどうか教えてください。

リストを表示する画面があります..アフィリエイトと呼びましょう。新しいアフィリエイトを作成するには、モーダル スタイルのポップアップ ダイアログが使用されます。

ダイアログの「作成」ボタンをクリックすると、フォームデータを保存する必要があり（新しいアフィリエイトを作成する）、ダイアログが消え、ページをリロードせずにアフィリエイトリストが更新されます

一番下のjqueryファイルは、私が今それをやろうとしている方法を示しています.「確認」ボタンのクリックを検出しようとし、データターゲットプロパティを使用して送信するフォームを取得し、フォームのターゲットプロパティを使用してコンテナを認識しようとしています.更新します。

何が起こっているか: 何もありません。キャンセルボタンは機能しますが、作成ボタンはまったく何もしません。

<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;
});