Naresh Naresh - 3 months ago 12
jQuery Question

How can I refresh my razor view on AJAX post

Helo all,

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

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

This is my view.

<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....");
}


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.');
}
}
};


This is my controller action

[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.

Thanks

Answer

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.

option 1. Override rendered content with the result of POST

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>

On javascript:

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

option 2. Fill rendered html from javascript on every load

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

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

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.