Using Ajax in MVC

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

are you getting any errors ? Did you use breakpoints to see whether you are getting a call to your Action Method ? — Shyju
– Shyju, Commented Apr 11, 2012 at 2:40
try changing data:storyid to data:'{id:'+storyid+'}', otherwise what you're actually sending it Request["1"], Request["2"] instead of Request["id"] (which is what the MVC engine is looking for to populate int id in your action) — Brad Christie
– Brad Christie, Commented Apr 11, 2012 at 2:44

Shyju · Accepted Answer · 2012-04-11 03:00:52Z

3

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

}

edited Apr 11, 2012 at 3:00

answered Apr 11, 2012 at 2:42

Shyju

220k106 gold badges420 silver badges499 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

TMan Over a year ago

the .get() u have above, where or what would I replace this with? Would this be under the success:? thanks for your time.

Shyju Over a year ago

@TMan: No. Just replace the ajax function with get. get is a short form of ajax. I updated my answer.

TMan Over a year ago

Ok cool that worked, but I have one more question. Everytime I go to click on a link and it updates, it scrolls me up to the top of the page(screen) again as if the whole page was refreshing. Any idea how to get rid of that? thx

Shyju Over a year ago

@TMan: Glad it worked for you. May be you remove the # from gref value and give some url there and do preventDefault/ return false at the end of your AjaxStoryClick function and see what happens.

Kibria · Accepted Answer · 2012-04-11 04:08:00Z

The Ajax call is not passing the value for the parameter 'Id' to the action method 'UserStoriesList', line 'data: storyid,' should be 'data: { id:storyid},'

As your action method 'UserStoriesList' has a not null-able id parameter, server will generate a error response:

You will not see the error response if there is no callback for the ajax error event and in debug mode the breakpoint in the action will not be hitted.

Here is updated script:

<script type="text/javascript">

function AjaxStoryClick(storyid) {

 $.ajax({
    url: '@Url.Action("UserStoriesList", "Estimate")',
    type: 'POST',
    data: { id: storyid },
    success: function (result) {
        $('#stories').html(result);
    },
    error: function (xhr) {
        alert("Error: " + xhr.responseText);
    }
 });
}
</script>

Action method:

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

  if (Request.IsAjaxRequest())
    return PartialView("_UserStoriesList", userstories);
  else
    return View("UserStoriesList", userstories);
}

Collectives™ on Stack Overflow

Using Ajax in MVC

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related