title: How to get a list from mvc controller to view using jquery ajax
body: <p>I need to get a list from mvc controller to view using jquery ajax. how can i do that. this is my code. Its alerting error message.</p>
  
  <h2>In Controller</h2>
  
  <pre><code> public class FoodController : Controller
      {
         [System.Web.Mvc.HttpPost]
          public IList&lt;Food&gt; getFoodDetails(int userId)
          {
              IList&lt;Food&gt; FoodList = new List&lt;Food&gt;();
  
                  FoodList = FoodService.getFoodDetails(userId);
  
                  return (FoodList);
          }
      }
  </code></pre>
  
  <h2>In view</h2>
  
  <pre><code>function GetFoodDetails() {
          debugger;
          $.ajax({
              type: "POST",
              url: "Food/getFoodDetails",
              data: '{userId:"' + Id + '"}',
              contentType: "application/json;charset=utf-8",
              dataType: "json",
              success: function (result) {
                  debugger;
                  alert(result)
              },
              error: function (response) {
                  debugger;
                  alert('eror');
              }
          });
  
      }
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/9vkLi.jpg" alt="enter image description here"></p>