Question

I am trying to set up a relationship where you click on a PO in grid 1 and grid 2 will show with related items. I have been researching and have tried several different methods. My current link is:

@Ajax.ActionLink("Select", "DisplayPOItems", new { id = Model.poList[0].ID }, new AjaxOptions
{
     UpdateTargetId = "POItems",
     HttpMethod = "GET",
     InsertionMode = InsertionMode.Replace,
})

I have also tried just an action link with this:

$("#POSelect").click(function () {
     $.get('@Url.Action("DisplayPOItems","PO", new { id = Model.ID })', function () {
     $('#POItems').load(this.href);
     return false;
     });
});

OR a similar block using ajax to catch the click event and try to populate the partial view into a div on my form that way. All of these methods have populated data but it always redirects to …/PO/DisplayPOItems/1 and shows only the partial view there. Here is my controller:

public PartialViewResult DisplayPOItems(int ID)
{
     ItemModel im = new ItemModel();
     return PartialView("_GridItem", im.POSearchResult(ID));
}

I have tried ActionResult on the Controller also but it didn’t help. How can I get the page to not redirect and just populate the div on my form with my partial view?

Answer 1

If you decide to use a Ajax.ActionLink make sure you have referenced the jquery.unobtrusive-ajax.js script in your page:

<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>

And if you decide to use normal jQuery make sure that you are sending a single AJAX request instead of two as you currently do. Also make sure that you are returning false at the correct place:

$('#POSelect').click(function () {
     var url = '@Url.Action("DisplayPOItems", "PO", new { id = Model.ID })';
     $.get('url', function (result) {
         $('#POItems').html(result);
     });
     return false;
});

or it’s equivalent:

$('#POSelect').click(function () {
     var url = '@Url.Action("DisplayPOItems", "PO", new { id = Model.ID })';
     $('#POItems').load(url);
     return false;
});

or if you link already contains the correct url:

$('#POSelect').click(function () {
     $('#POItems').load(this.href);
     return false;
});