Question

I’m trying to inject a view using Ajax but it’s not quite working. I know nothing about Ajax but I’m trying to learn. What am I missing here or am I completely wrong the way I’m doing this.

    foreach(ect...) {
   <tr>
       <td>
      <a href="#" onclick="AjaxStoryClick(@item.Id)" style="color:dodgerblue; font-weight: bold">@item.Name</a>

       <script type="text/javascript">
function AjaxStoryClick(storyid) {

    $.ajax({
        url: '@Url.Action("UserStoriesList", "Estimate")',
        type: 'POST',
        data: storyid,
        success: function(result){
            $('#stories').html(result);

        }
     });         
}    

      </script>

Controller:

       public ActionResult UserStoriesList(int id)
    {
        ActiveEpicId = id;
        var userstories = userRepository.Select().Where(x => x.EpicId.Equals(id)).ToList();
        return PartialView("UserStoriesList",userstories);
    }

Answer 1

Is UserStoriesList Action method of Type HttpPost ? Your Ajax request is of type POST. So it will be only handled by HttpPost type UserStoriesList action method.

 [HttpPost]
 public ActionResult UserStoriesList(int id)
 {
   // your code goes here
 }

If your ActionMethod is not of Type HttpPost (that means it is of HttpGet type) , you can use a jquery get ajax call to get the data

Make sure your parameter name in your ajax call is same as of the parameter name in your action method.

function AjaxStoryClick(storyid) {
  $.get('@Url.Action("UserStoriesList", "Estimate")',{id : storyid},function(result){
     $('#stories').html(result);
  });
}

}