我怎样才能刷新AJAX后我的Razor视图 [英] How can I refresh my razor view on AJAX post

问题描述

所有直升机，

我能够使用后向ajax.post的控制器，但在成功时我怎样才能使我的看法与刷新新的数据。

I am able to post to controller using ajax.post, but on success how can I make my view refresh with new data.

我需要USN @ Html.BeginForm做到这一点？

Do I need to usn @Html.BeginForm to do this?

这是我的看法。

<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 POST

And this is my ajax post

$(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);
        }

我有一些想法，我必须这样做成功回电。但我不知道如何更新我的模型，视图绑定在客户端。

I am having some idea, I have to do that on success call back. But I am not sure how to bind my updated model to the view at client side.

感谢

推荐答案

有里面的MVC没有简单的重新绑定的方法，它仍然是HTML，CSS和JS结尾。结果
我看到2个选项来实现所需的行为。

There is no simple "rebind" method inside mvc, it's still html, css and js at the end.
I see 2 options to achieve desired behaviour.

在这种情况下，您的视图将类似于：

In this case your View will look similar to:

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

JavaScript的：

On javascript:

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

在JavaScript上的每个加载选项2，填写呈现的HTML

这将需要剃刀逻辑移动到的JavaScript。
你的看法会是这样的：

option 2. Fill rendered html from javascript on every load

This will require to move Razor logic to javascript. Your view will look like:

订单行分配给

和JavaScript将填补国内空白：

Order lines allocates to

And javascript will fill the gaps:

$(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);
    }
});

这只是一小片只是为了显示这个想法。

It's just a small piece just to show the idea.

这要看情况来选择的选项。

It depends on case which option to choose.

这篇关于我怎样才能刷新AJAX后我的Razor视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！