0

I have a ViewModel which contains a List of my Model, like so:

public class OrderConfirm
{
    public ICollection<DayBookQuoteLines> SalesLines { get; set; }
    public ICollection<DayBookQuoteLines> LostLines { get; set; }
    public string Currency { get; set; }
}

I then use this ViewModel in my View like so:

@model btn_intranet.Areas.DayBook.Models.ViewModels.OrderConfirm
@{
    ViewBag.Title = "Daybook - Order Confirmation";
}

<h6>Sales Lines</h6>
<div id="SalesOrders">
@using (Ajax.BeginForm("ConfirmSalesOrder", new AjaxOptions()
{
    InsertionMode = InsertionMode.Replace,
    UpdateTargetId = "SalesOrders",
    OnBegin = "SalesOrderConfirm"
}))
{
    @foreach(var item in Model.SalesLines)
    {
        <p>@item.ItemName</p>
        <p>@item.Qty</p>

        @* Other Properties *@
    }

    <input type="submit" value="Submit Sales Order" />
}
</div>

<h6>Lost Lines</h6>
<div id="LostOrders">
@using (Ajax.BeginForm("ConfirmLostOrder", new AjaxOptions()
{
    InsertionMode = InsertionMode.Replace,
    UpdateTargetId = "LostOrders",
    OnBegin = "LostOrderConfirm"
}))
{
    @foreach(var item in Model.SalesLines)
    {
        <p>@item.ItemName</p>
        <p>@item.Qty</p>

        @* Other Properties *@
    }

    <input type="submit" value="Submit Lost Order" />
}
</div>

The problem is, in my [HttpPost] actions, both ConfirmSalesOrder and ConfirmLostOrder. The value of my Model passed as a parameter is null:

[HttpPost]
public ActionResult ConfirmSalesOrder(List<DayBookQuoteLines> quoteLines)
{

    // Process order...

    return PartialView("Sales/_ConfirmSalesOrder");
}

so quoteLines is null. How can I bind the form to my model?

4

1 に答える 1

2

フォームに値をサーバーに送信する入力フィールドがありません。表示しているだけです。そのため、フォームを送信するとnullになります=>サーバーには何も送信されません。

ただし、このフォーム内でユーザーが値を変更する必要がない場合は、コントローラーアクションにIDを渡すだけで、モデルをフェッチした場所とまったく同じ場所からモデルをフェッチできます。このフォームをレンダリングしたGETアクション。

この場合、アクションは次のようになります。

[HttpPost]
public ActionResult ConfirmSalesOrder(int id)
{
    List<DayBookQuoteLines> quoteLines = ... fetch them the same way as in your GET action
    // Process order...

    return PartialView("Sales/_ConfirmSalesOrder");
}

一方、ユーザーがフォームの値を変更することになっている場合は、テキストボックス、チェックボックス、ラジオボタン、ドロップダウンリスト、textereasなどの必要な入力フィールドをユーザーに提供する必要があります...そして適切な名前を生成するためにこれらの入力フィールドには、ビューにforeachループを記述する代わりに、エディターテンプレートを使用することをお勧めします。

アップデート：

ユーザーがデータを編集することは想定されていないため、対応する入力フィールドがないようです。この場合、AJAXリクエスト中にモデルを保持するために、Ajax.BeginFormを通常Html.BeginFormのものに置き換えてから、AJAXリクエストをjQueryに手動で接続することができます。このアプローチの利点は、はるかに詳細な制御が可能になり、たとえばモデル全体をJSONリクエストとして送信できることです。これを行うには、モデルをビュー内にjavascriptでエンコードされた変数として保存できます。

<script type="text/javascript">
    var model = @Html.Raw(Json.Encode(Model));
</script>

次に、フォームをAJAXifyします。

$('#formId').submit(function() {
    $.ajax({
        url: this.action,
        type: this.method,
        contentType: 'application/json',
        data: JSON.stringify({ quoteLines: model }),
        success: function(result) {
            $('#someTargetIdToUpdate').html(result);
        }
    });
    return false;
});
于 2012-05-24T13:37:15.137 に答える