1

私はMVCに非常に慣れていないので、これはおそらく非常に初心者の質問です。商品カタログをいじっています。表形式 (テーブルまたは div) で表示したい製品のリストがあります。各行には製品情報が表示され、[編集] と [削除] の 2 つのリンクがあります。Jquery Ajax を使用して、コントローラーにリクエストを送信したいと考えています。編集のためにモーダルダイアログを表示したい。削除について カタログから商品を削除したいのですが。このアクションのそれぞれが、完了後にグリッドを更新します。

ここにいくつかの擬似コードがあります:

モデル：

 public class ProductModel
    {
        public string Name { get; set; }
        public string Description { get; set; }
        public int Id { get; set; }
        public bool IsReadOnly { get; set; }
    }

コントローラ：

public class ProductController : Controller
    {
        //
        // GET: /Product/

        public ActionResult Edit(ProductModel product)
        {

        }

        public ActionResult Delete(ProductModel product)
        {

        }


    }

編集ビュー:

@model Generic.Controller.Models.ProductModel

if Model.IsReadOnly
    Render display editor
else
    Render editor

リストビュー：

@model Generic.Controller.Models.ProductModel

@using (Html.BeginForm())
{
    //for each model item
    <div class="some-css">
        <div class="column-div">
            //display the model
        </div>

        <div class="column-div">
            //display the edit link   
        </div>

        <div class="column-div">
            //display the delete link   
        </div>
    </div>
}

代替リスト ビュー - リスト ビューからレンダリングされた部分ビュー

// 各モデル:

@using (Html.BeginForm())  //id this form with the product id?
{
    //for each model item
    <div class="some-css">
        <div class="column-div">
            //display the model
        </div>

        <div class="column-div">
            //display the edit link   
        </div>

        <div class="column-div">
            //display the delete link   
        </div>
    </div>
}

ここにいくつかのスケルトン Javascript があります:

var open = function (methodName, url) {        
    $("#dialogDiv").dialog({
       buttons: {
            Save: function () {
                var form = $(options.formToPost);
                $.ajax({
                    type: "POST",

ここに何が入る？通常、私はできます：

               url: form.attr('action'),
               data: form.serialize()

しかし、それはエンティティごとのフォームを意味しますか?

success: function (data, status, xhr) {
                    if (data.IsValid) {
                        //how do I identify the div I need to update?
                    } else {

                    }
                }
            });
        },

        Cancel: function () {
            $("#dialogDiv").dialog('close');
            $("#dialogDiv").empty();
        }
    }
});
$.ajax(
    {
        Type: methodName,
        url: url,
        success: function (data, status, xhr) {
            openDialog(data);
        }
    });

function openDialog(data) {
    $("#dialogDiv").html(data);
    $("#dialogDiv").dialog('open');
}
};

return {
    open: open
};

ここに私の質問があります：

  1. 今のところ、簡単に投稿する方法を知っているのはフォームだけです。コントローラーに ajax リクエストを送信するには、複数のフォーム (製品ごとに 1 つ) が必要ですか?
  2. クリックしたリンクに最も近い div を JQuery を使用して見つけ、それをコントローラーに送信した場合、モデル バインダーは div の内容を ProductModel に自動的にバインドしますか?
  3. 商品が編集または削除された後にビューを更新する最良の方法は何ですか?

ありがとう、

4

1 に答える 1

0
  • GETリクエストが編集/削除されないように、[HttpPost]で編集および削除するコントローラーアクションを装飾します。
  • モーダルを使用して行を編集している場合、値をコントローラーアクションに送信するには、レンダリングされた各モーダルがフォームである必要があります。
  • 編集または削除するたびに、RedirectToAction（ "NameOfListMethod"）を返すと、リストが更新されます。

jQueryですべてを処理したい場合は、クライアント側でテーブルを更新できる必要があるため、少し注意が必要です。

于 2013-02-17T14:23:11.780 に答える