1

誰かがjQueryとajaxを使用してモデルをコントローラーにポストバックする方法を教えてもらえますか？

フォームを投稿すると、コントローラーが空のモデルを受け取ります。私が間違いをしているところを私に知らせてください。

モデル：

public class AllocateToStore
    {
        public IList<OrderLine> FailureAllocations { get; set; }
        public IList<SelectListItem> AllocationStatus
        {
            get
            {
                // code to fetch list.
            }
        }
    }

 public class OrderLine
    {
        public long Id { get; set; }
        public DateTime Date { get; set; }
        public int Status { get; set; }
    }

コントローラ：

public ActionResult AutoAllocate()
        {
// This action will load the view with data.
// Get model data and send it to view.

            return View("Allocated",model);
        }

        [HttpPost]
        public ActionResult ResolveUnallocatedOrders(AllocateToStore coll)
        {
// When user changes the selection in grid and post the page I need to get the selection // here. So that I can update that record.
            return null;
        }

そしてビューは

 @model AllocateToStore
    @{
        ViewBag.Title = "Orders";
    }
    @{
        var grid = new WebGrid(Model.FailureAllocations, rowsPerPage: 100);
    }


        if (Model.FailureAllocations.Any())
        {
     <form>
        <div>
            @grid.GetHtml(
                    columns: grid.Columns(
                        grid.Column(columnName: "Order date", header: "Order Date", format: item => item.Order.Date),
                       grid.Column("dropdown", header: "Resolution", format:
                                                                   @<span>
                                                                       @{ var index = Guid.NewGuid().ToString(); }
                                                                       @Html.Hidden("FailureAllocations.Index", index)
                                                                       @Html.Hidden("FailureAllocations[" + index + "].Id", (long)item.Id)
                                                                       @Html.DropDownList("FailureAllocations[" + index + "].Status", new SelectList(Model.AllocationStatus, "Value", "Text", item.Status))
                                                                   </span>
                     )
                    ),
                    tableStyle: "expandable-table",
                    htmlAttributes: new { id = "gridFailureAllocations" }
                )
            <br />
            <input type="submit" value="Resolve" id="resolve-button" />
        </div>
</form>
        }


  @section scripts
{
    <script>
        $("#resolve-button").click(function () {
            debugger;
            alert("here");
            $.ajax({
                url: '/OrderProcessing/ResolveUnallocatedOrders',
                data: $('#form').serialize(),
                type: 'POST'
            });
        });
    </script>
}

ありがとう、ナレシュ

4

2 に答える 2

0

私はこの答えをテストしませんでした。それは単なる提案です。このようにしてみてください。

  $.ajax({
      url: o.url,
      type: 'post',
      contentType: "application/x-www-form-urlencoded",
      data: {"FailureAllocations ":JSON.stringify(FailureAllocations), "AllocationStatus":JSON.stringify(AllocationStatus)}',
       .  . . . 
     });
于 2012-10-29T17:20:30.063 に答える
0

ここにバグがあると思いますdata: $('#form').serialize(),

$('#form')ID「フォーム」を持つすべての要素を選択します。フォームには ID がないため、セレクターは機能しません。その行を に変更してみるdata: $('form').serialize(),と、セレクターが機能するはずです。

または、フォームに「form」の id を指定する<form id="form">と、元のセレクター$('#form')が機能するはずです。

さまざまな jQuery セレクターの詳細については、こちらを参照してください。

于 2012-10-29T23:07:45.717 に答える