2

こんにちは。

ajax.post を使用してコントローラーに投稿できますが、成功した場合、ビューを新しいデータで更新するにはどうすればよいですか。

これを行うには @Html.BeginForm を使用する必要がありますか?

これが私の見解です。

<div>
    <p>Order lines allocates to <b>@Model.Name (@Model.Code) </b>
</div>

@if (Model.OrderLineAllocations.Any())
{
    
    @grid.GetHtml(
             columns: grid.Columns(
                 grid.Column(header: "Dispatched", style: "row-selector", format: @<text><input name="chkSelected" class="myCheckbox" onclick="expandableEvent(this)" type="checkbox" value="@item.IdAllocation" /></text>),
                 grid.Column(header: "Order Ref", format: item => item.OrderLineItem.OrderLine.Order.OrderRef)
                 ),
             tableStyle: "expandable-table",
             rowStyle: "expandable-master-row",
             htmlAttributes: new { id = "gridLineAllocations" })
    <br />
    <input type="hidden" id="hidUnselectedValues" name="hidUnselectedValues" />
    
    <input type="submit" name="action" value="Dispacth" id="btnDispacth" />
    <input type="submit" name="action" value="Revert" id="btnRevert" />
    
}
else
{
    @Html.Raw("No records found....");
}

そして、これは私のajax投稿です

$(document).ready(function() {
    unSelected = [];
    $("#btnDispacth").click(dipatchAllocations);
    $("#btnRevert").click(revertAllocations);
});

function dipatchAllocations() {
    var objInputEmail = $("#hidUnselectedValues");

    if (objInputEmail != null) {
        var id = objInputEmail.val();
        if ((id != null) && (id != "")) {
            $.ajax({
                type: 'POST',
                url: '/Batch/GetData',
                data: '{ "allocationId" : "' + id + '","batchId" : "' + @Model.Id + '" }',
                contentType: "application/json; charset=utf-8",
                //contentType:"application/x-www-form-urlencoded",
                traditional: true,
                success: subscribed,
                error: errorInSubscribing
            });
        } else {
            alert('Please enter a valid email address in order to subscribe.');
        }
    }
};

これは私のコントローラーアクションです

[HttpPost]
public ActionResult GetData(long[] allocationId,long batchId)
{
    var model = context.GetData(batchId)
    model.Name = "asdaksdjaksdj";
    return View("Finalize", model);
}

私はいくつかの考えを持っています、私は成功のコールバックでそれをしなければなりません。しかし、更新されたモデルをクライアント側のビューにバインドする方法がわかりません。

ありがとう

4

1 に答える 1

3

mvc 内には単純な「再バインド」メソッドはありません。最後に html、css、および js が残っています。
望ましい動作を実現するための 2 つのオプションが表示されます。

オプション 1. レンダリングされたコンテンツを POST の結果でオーバーライドする

この場合、ビューは次のようになります。

<div id="content">
  <div>
    <p>Order lines allocates to <b>@Model.Name (@Model.Code) </b>
  </div>
  ...
  else
  {
    @Html.Raw("No records found....");
  }
</div>

JavaScript の場合:

$.ajax({
    type: 'POST',
    url: '/Batch/GetData',
    dataType: "html",
    success: function(data, textStatus, jqXHR){
        $('#content').html(data);
    }
});

オプション 2. 読み込みごとに JavaScript からレンダリングされた html を埋める

これには、Razor ロジックを JavaScript に移行する必要があります。ビューは次のようになります。 

<div>
    <p>Order lines allocates to <b id="NameAndCode"></b>
</div>

そしてJavaScriptがギャップを埋めます：

$(function(){
  var model = {
    NameAndCode: "@Model.Name (@Model.Code)"
  }

  fillView(model);

})

var fillView = function(data){
  $('#NameAndCode').html(data.NameAndCode)
}

$.ajax({
    type: 'POST',
    url: '/Batch/GetData',
    dataType: "json",
    success: function(data, textStatus, jqXHR){
        fillView(data);
    }
});

アイデアを示すためだけの小さな作品です。

どのオプションを選択するかはケースによって異なります。

于 2012-11-28T18:25:21.417 に答える