title: jquery with ASP.NET MVC - calling ajax enabled web service
body: <p>This is a bit of a continuation of a <a href="https://stackoverflow.com/questions/2830335/jqgrid-edit-function-never-getting-called">previous</a> question.</p>
  
  <p>Now I'm trying to make a call to an AJAX enabled web service which I have defined within the ASP.NET MVC application (i.e. the <code>MovieService.svc</code>). But the service is never being called in my <code>getMovies</code> javascript function. </p>
  
  <p>This same technique of calling the AJAX web service works ok if I try it in a non ASP.NET MVC application, so it makes me wonder if maybe the ASP MVC routes are interfering with things somehow when it tries to make the AJAX web service call.</p>
  
  <p>Do you have any idea why my web service isn't getting called? Code below.</p>
  
  <pre><code>    &lt;script src="&lt;%= ResolveClientUrl("~/scripts/jquery-1.4.2.min.js") %&gt;" type="text/javascript"&gt;&lt;/script&gt;
  
      &lt;script src="&lt;%= ResolveClientUrl("~/scripts/grid.locale-en.js") %&gt;" type="text/javascript"&gt;&lt;/script&gt;
  
      &lt;script src="&lt;%= ResolveClientUrl("~/scripts/jquery-ui-1.8.1.custom.min.js") %&gt;"
          type="text/javascript"&gt;&lt;/script&gt;
  
      &lt;script src="&lt;%= ResolveClientUrl("~/scripts/jquery.jqGrid.min.js") %&gt;" type="text/javascript"&gt;&lt;/script&gt;
  
      &lt;script type="text/javascript"&gt;
          var lastsel2;
  
          function successFunction(jsondata) {
              debugger
              var thegrid = jQuery("#editgrid");
              for (var i = 0; i &lt; jsondata.d.length; i++) {
                  thegrid.addRowData(i + 1, jsondata.d[i]);
              }
          }
  
          function getMovies() {
              debugger
              // ***** the MovieService#GetMovies method never gets called
              $.ajax({
                  url: 'MovieService.svc/GetMovies',
                  data: "{}",  // For empty input data use "{}",
                  dataType: "json",
                  type: "GET",
                  contentType: "application/json; charset=utf-8",
                  success: successFunction
              });
          }
  
          jQuery(document).ready(function() {
              jQuery("#editgrid").jqGrid({
                  datatype: getMovies,
                  colNames: ['id', 'Movie Name', 'Directed By', 'Release Date', 'IMDB Rating', 'Plot', 'ImageURL'],
                  colModel: [
                    { name: 'id', index: 'Id', width: 55, sortable: false, hidden: true, editable: false, editoptions: { readonly: true, size: 10} },
                    { name: 'Movie Name', index: 'Name', width: 250, editable: true, editoptions: { size: 10} },
                    { name: 'Directed By', index: 'Director', width: 250, align: 'right', editable: true, editoptions: { size: 10} },
                    { name: 'Release Date', index: 'ReleaseDate', width: 100, align: 'right', editable: true, editoptions: { size: 10} },
                    { name: 'IMDB Rating', index: 'IMDBUserRating', width: 100, align: 'right', editable: true, editoptions: { size: 10} },
                    { name: 'Plot', index: 'Plot', width: 150, hidden: false, editable: true, editoptions: { size: 30} },
                    { name: 'ImageURL', index: 'ImageURL', width: 55, hidden: true, editable: false, editoptions: { readonly: true, size: 10} }
                  ],
                  pager: jQuery('#pager'),
                  rowNum: 5,
                  rowList: [5, 10, 20],
                  sortname: 'id',
                  sortorder: "desc",
                  height: '100%',
                  width: '100%',
                  viewrecords: true,
                  imgpath: '/Content/jqGridCss/redmond/images',
                  caption: 'Movies from 2008',
                  editurl: '/Home/EditMovieData/',
                  caption: 'Movie List'
              });
  
              $("#bedata").click(function() {
                  var gr = jQuery("#editgrid").jqGrid('getGridParam', 'selrow');
                  if (gr != null)
                      jQuery("#editgrid").jqGrid('editGridRow', gr, { height: 280, reloadAfterSubmit: false });
                  else
                      alert("Hey dork, please select a row");
              });            
  
          });
  
      &lt;/script&gt;
  
      &lt;h2&gt;
          &lt;%= Html.Encode(ViewData["Message"]) %&gt;&lt;/h2&gt;
      &lt;p&gt;
          To learn more about ASP.NET MVC visit &lt;a href="http://asp.net/mvc" title="ASP.NET MVC Website"&gt;
              http://asp.net/mvc&lt;/a&gt;.
      &lt;/p&gt;
      &lt;table id="editgrid"&gt;
      &lt;/table&gt;
      &lt;div id="pager" style="text-align: center;"&gt;
      &lt;/div&gt;
      &lt;input type="button" id="bedata" value="Edit Selected" /&gt;
  </code></pre>
  
  <p>Here's my RegisterRoutes code:</p>
  
  <pre><code>public static void RegisterRoutes(RouteCollection routes)
  {
      routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
      routes.IgnoreRoute("*MovieService.svc*");
  
      routes.MapRoute(
          "Default",                                              // Route name
          "{controller}/{action}/{id}",                           // URL with parameters
          new { controller = "Home", action = "Index", id = "" }  // Parameter defaults
      );
  }
  </code></pre>
  
  <p>Here's what my MovieService class looks like:</p>
  
  <pre><code>namespace jQueryMVC
  {
      [ServiceContract(Namespace = "")]
      [AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
      public class MovieService
      {
          // Add [WebGet] attribute to use HTTP GET
          [OperationContract]
          [WebGet(ResponseFormat = WebMessageFormat.Json)]
          public IList&lt;Movie&gt; GetMovies()
          {
              return Persistence.GetMovies();
          }
  
      }
  }
  </code></pre>