c# - Mvc モーダル Ajax フォーム

Question

私の質問はこれに似ています

私が達成したいのは、単純な入力用のフォームを含むダイアログを表示することです。記事の数量と同様に、ユーザーが送信をクリックすると、ダイアログが閉じて、ページ全体をリロードせずにデータを送信するだけで済みます。

これは、フォームによって読み込まれた部分ビューです。

@model TRUNCATED.Models.AddToCartModel

<script src="~/Scripts/jquery-1.7.1.min.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>

@using (Html.BeginForm("AddToCart", "Order", new AjaxOptions { // DO I NEED ANY? }))
{
    <fieldset>
        <legend>AddToCartModel</legend>

        <img src="@Url.Action("GetImage", "File", new { ArticleId = Model.ArticleId })" title="Artikelbild" style="resize:both; width: 300px; height:200px;" />

        <div class="editor-label">
            @Html.LabelFor(model => model.ArticleId)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.ArticleId)
            @Html.ValidationMessageFor(model => model.ArticleId)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.Quantity)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Quantity)
            @Html.ValidationMessageFor(model => model.Quantity)
        </div>

        <p>
            <input type="submit" value="Add to Cart" />
        </p>

    </fieldset>
}

これはダイアログjsです：

$("#dialog").dialog({
    autoOpen: false,
    resizeable: false,
    width: 350,
    height: 600,
    modal: true,
    show: {
        effect: "blind",
        duration: 300
    },
    hide: {
        effect: "blind",
        duration: 300
    },
    buttons: {
        "Close": function () {
            $(this).dialog("close");
        }
    }
});

$(".showDialog").on("click", function (e) {
    $('#dialog').load(this.href).dialog('open');
    return false;
});

これは私がダイアログを開く方法です：

@Html.ActionLink("Add to Cart", "AddToCart", 
new { id =item.ArticleId}, 
new { @class = "showDialog" }

コントローラーで:

[HttpGet]
public ActionResult AddToCart(int id)
{
    return PartialView("_AddToCart", new AddToCartModel() { ArticleId = id });
}

[HttpPost]
public ActionResult AddToCart(AddToCartModel atm)
{   
    if (OrderData.CartItems.Count > 0)
        atm.Pos = OrderData.CartItems.Max(i => i.Pos) + 1;
    else 
        atm.Pos = 1;

    OrderData.CartItems.Add(atm);

    return // What goes here?
}

私はこれが初めてで、ここで何が間違っているのかわかりません。Hmlを交換しました。アヤックスと。しかし、これは何も変わりませんでした。

それは機能しますが、ページ全体をリロードします。これには、Webgrid が背中合わせに設定されるなどの副作用があります。