Question

I’m trying to get started with Ajax on MVC

In my main view I have the following code:

@Ajax.ActionLink("Click here to get the data","LoadData",
    new AjaxOptions
    {
      UpdateTargetId = "dataPanel",
      InsertionMode = InsertionMode.InsertAfter,
      HttpMethod="GET"
    })


<div id="dataPanel">
</div> 

I created the controller’s action as below:

public PartialViewResult LatestReview()
{
  var myData = GetMyData();
  return PartialView("_PartialData", myData);
}

_PartialData is defined as below:

@model MyApp.Models.Data
<div>
@if (Model == null)
{    
    <p>There is no data yet</p>
}
else
{
    <p>
    @Model.Body
    </p>          
}
</div>

But when I click the link, my data (rendered in the _PartialData) is loaded fully in browser, replacing the source page (so not inside the dataPanel div)

When I look at original page source (before clicking the ajax link) It see the ajax actions define as below:

<a data-ajax="true" data-ajax-method="GET" data-ajax-mode="after" data-ajax-update="#dataPanel" href="/Home/LoadData">Click here to get the data</a>

<div id="dataPanel">
</div>

What am I doing wrong?

Thanks

Answer 1

I suspect that you forgot to include the jquery unobtrusive ajax script to your page:

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

It is this script that makes sense of all Ajax.* helper in ASP.NET MVC 3. Without it they generate standard markup with HTML5 data-* attributes which are used by the script.