Как я могу обновить вид бритвы на AJAX-посту

Helo all,

Я могу отправить сообщение на контроллер с помощью ajax.post, но на успех, как я могу обновить представление с новыми данными.

Нужно ли мне использовать usn @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);
        }

У меня есть какая-то идея, я должен сделать это с успехом. Но я не уверен, как связать мою обновленную модель с представлением на стороне клиента.

Спасибо

Ответ 1

В 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. Заполните отображаемый html из javascript при каждой загрузке

Для этого потребуется переместить логику 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);
    }
});

Это всего лишь небольшая часть, чтобы показать эту идею.

Это зависит от того, какой вариант выбрать.