Ajax with MVC Partial Views - Ajax.ActionLink not working, while jQuery does

Question

I'm trying to render partial view with Ajax to fill the <div id="AjaxDiv"></div> element. I'm able to achieve this with jQuery:

<input id="btnCompetitors" type="button" value="Get Competitors" />

<script>
        function loadCategoriesPartialView() {
            $('#AjaxDiv').load(@Url.Action("CategoriesPartial", "Dashboard"));
        }
    </script>

but I cannot get it to work with Ajax.ActionLink, which I would prefer.

    @Ajax.ActionLink("Categories", "CategoriesPartial", "Dashboard", new AjaxOptions()
{
    UpdateTargetId = "AjaxDiv",
    InsertionMode = InsertionMode.Replace
})

What is missing? I tried various additional AjaxOptions, like calling the same method with OnSuccess etc., but I cannot do it properly. Bundles work fine for jquery (basically jquery + unobtrusiveAjax), so hopefully the same ones should work for the Ajax helper.

check this http://stackoverflow.com/questions/5586327/how-to-use-ajax-actionlink — Gene R, Jan 20 '16 at 07:45
Have you included `jQuery.Unobtrusive.Ajax` `js`?? `Ajax.ActionLink` can not work without this `js` — Parth Trivedi, Jan 20 '16 at 08:00
Controller is super basic. public ActionResult CategoriesPartial {return PartialView("_Categories")}; it does not matter what is in _Categories, this issue is the same. unobtrusive ajax is installed and referrenced in bundles. — Turo, Jan 20 '16 at 09:56
I need to check the js console for errors - I did not do it yet — Turo, Jan 20 '16 at 09:57

score 0 · Answer 1 · answered Jan 20 '16 at 08:10

try this

data model

public class DisplayData
{
   public int ID { get; set; }
   public DisplayData(int ID)
   {
          this.ID = ID;
   }
}

Main View(PartialDemo.cshtml)

  @model IEnumerable<MvcApplication5.Models.DisplayData>        
  @{
     ViewBag.Title = "PartialDemo";
   }
  <script src="../../Scripts/jquery.unobtrusive-ajax.min.js" type="text/javascript"></script>
  <script src="../../Scripts/jquery.unobtrusive.min.js" type="text/javascript"></script>
  @Ajax.ActionLink("Click 1", "PartialDemo", "PartialDemo", new {Data= "1" }, new AjaxOptions { UpdateTargetId = "rsvpmsg" })
  @Ajax.ActionLink("Click 2", "PartialDemo", "PartialDemo", new {Data= "2" }, new  AjaxOptions { UpdateTargetId = "rsvpmsg" })

 <div id="rsvpmsg">
       @{ Html.RenderPartial("PartialDemoUC", this.Model);}
 </div>

Create a Partial view PartialDemoUC.cshtml

model IEnumerable<dynamic> 

@foreach(var items in Model)
{
   @items.ID   
}

Action Method

1)This will be called the first when you render the view and the time when you press the ajax button

 public ActionResult PartialDemo(string Data)
    {
       List<DisplayData> Display = new List<DisplayData>();

       if (Request.IsAjaxRequest())
       {
          if (Data == "1")
          {
             Display.Add(new DisplayData(3));
             Display.Add(new DisplayData(4));
          }
          else
          {
            Display.Add(new DisplayData(5));
            Display.Add(new DisplayData(6));
          }
          return PartialView("PartialDemoUC",Display);
       }
       else
       {
           Display.Add(new DisplayData(1));
           Display.Add(new DisplayData(2));
           return View("PartialDemo", Display);
       }
    }

this is much more than I want to achieve here. I want to pass the model to partial views, not to the index view that includes these partial views. But I see interestingly apart from unobtrusive-ajax, you also reference unobtrusive itself. I will try this. — Turo, Jan 20 '16 at 09:59

score 0 · Accepted Answer · answered Jan 20 '16 at 20:12

It looks like I overlooked the issue, and helpers were rendering correctly. It's jQuery that was wrong. Below the correct one:

<input id="btnCategories" type="button" value="Get Categories" />

<div id="AjaxDiv"></div>

<script>
    $(function () {
        $("#btnCategories").click(function () {
            $("#AjaxDiv").load("@Url.Action("CategoriesPartial", "Dashboard")");
        });
    });
</script>

Ajax with MVC Partial Views - Ajax.ActionLink not working, while jQuery does

2 Answers2