title: Calling AJAX-Enabled WCF Service from jQuery - MVC 2
body: <p>I've done a ton of reading on accomplishing this and it seems pretty straightforward. I created my service, which is very simple (looks like this</p>
  
  <pre><code>[ServiceBehavior(IncludeExceptionDetailInFaults = true)]
  [ServiceContract(Namespace = "")]
  [AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
  public class WeddingPhotographerService
  {    
      // Add more operations here and mark them with [OperationContract]
      [OperationContract]
      public bool AddNewSkill(string name, string description)
      {
          IRepository&lt;Skill&gt; skillRepo = ObjectFactory.GetInstance&lt;IRepository&lt;Skill&gt;&gt;();
  
          var skill = new Skill { Name = name, Description = description };
          skillRepo.Save(skill);
          return true;
      }
  }
  </code></pre>
  
  <p>Simple enough right, then I write up this jQuery code in my view</p>
  
  <pre><code>$(document).ready(function () {
      $("#AddSkill").click(function () {
          var data = { name: $("#NewSkill").val(), description: "" };
          data = JSON.stringify(data)
          $.ajax({
              type: "POST",
              contentType: "application/json; charset=utf-8",
              url: "WeddingPhotographerService.svc/AddNewSkill",
              data: data,
              dataType: "json",
              success: function () {
                  $('#SkillListViewContainer').load('../AccountController/GetSkillControl');
              },
              error: function (msg) {
                  $("#AddSkillError").text(msg.d);
              }
          });
      });
  });
  </code></pre>
  
  <p>My <em>WeddingPhotographerService.svc</em> is in the root of the project, the web.config added this when I created the service</p>
  
  <pre><code>&lt;system.serviceModel&gt;
    &lt;behaviors&gt;
      &lt;endpointBehaviors&gt;
        &lt;behavior name="WeddingPhotographer.WeddingPhotographerServiceAspNetAjaxBehavior"&gt;
          &lt;enableWebScript /&gt;
        &lt;/behavior&gt;
      &lt;/endpointBehaviors&gt;
    &lt;/behaviors&gt;
    &lt;services&gt;
      &lt;service name="WeddingPhotographer.WeddingPhotographerService"&gt;
        &lt;endpoint address="" behaviorConfiguration="WeddingPhotographer.WeddingPhotographerServiceAspNetAjaxBehavior"
          binding="webHttpBinding" contract="WeddingPhotographer.WeddingPhotographerService" /&gt;
      &lt;/service&gt;
    &lt;/services&gt;
    &lt;serviceHostingEnvironment aspNetCompatibilityEnabled="true"
      multipleSiteBindingsEnabled="true" /&gt;
  &lt;/system.serviceModel&gt;
  </code></pre>
  
  <p>All seems simple enough and appears it should work but when I click the <em>AddSkill</em> the Chrome JavaScript console a 404 error is returned, so it's not finding the service at all (I opened up the console because nothing at all was happening when I would click the button).</p>
  
  <p>Am I missing something here?</p>
  
  <p>By the way, I also tried this (since that's the name in the <em>web.config</em> file)</p>
  
  <pre><code>url: "WeddingPhotographer.WeddingPhotographerService.svc/AddNewSkill"
  </code></pre>
  
  <p>And I still get the Resource Not Found (404) error</p>