title: @Url.Action returns HTTP Error 404.0 - Not Found
body: <p>Why do my url action returns a not found error? I have a Recipes table which I generate using angular-datatables with each having a View button with the href link and id value to the Details view. Once in the details view I will need to get the id value in my angular controller.</p>
  
  <p><strong>Index.cshtml</strong></p>
  
  <pre><code>@{
      ViewBag.Title = "Recipes";
  }
  
  &lt;br /&gt;
  &lt;div class="col-md-12 center"&gt;
      &lt;a href="/Recipes/Create"&gt;&lt;input type="button" value="Create" class="btn btn-default" /&gt;&lt;/a&gt;
  &lt;/div&gt;
  &lt;br/&gt;
  &lt;br/&gt;
      &lt;div&gt;
          &lt;table datatable="tblRecipe" dt-options="showCase.dtOptions" dt-columns="showCase.dtColumns" dt-instance="showCase.dtInstance" class="table table-bordered"&gt;&lt;/table&gt;
      &lt;/div&gt;
      @*edit modal...*@
  
  @section Scripts {
      @Scripts.Render("~/bundles/indexRecipe")
      }
  </code></pre>
  
  <p><strong>indexRecipe.js Controller</strong></p>
  
  <pre><code>var app = angular.module('app', ['datatables'])
  app.controller('MainController', function ($scope, $window, $http, $filter, $timeout, $compile, DTOptionsBuilder, DTColumnDefBuilder, DTColumnBuilder, EditRecipe, $rootScope) {
  
      var vm = this;
      vm.message = '';
      vm.dtInstance = {};
      vm.Recipes = {};
      vm.delete = deleteRow;
      vm.edit = editRow;
      vm.Update = updateRow;
      vm.dtOptions = DTOptionsBuilder.newOptions()
      .withOption('ajax', {
          url: "/Recipes/GetAllRecipes",
          type: "POST"
      })
      .withOption('createdRow', createdRow)
      .withOption('select', true);
      vm.dtColumns = [
                      //....
                      DTColumnBuilder.newColumn(null).withTitle('Actions').notSortable().renderWith(actionsHtml)
      ];
  
      function createdRow(row, data, dataIndex) {
          // Recompiling so we can bind Angular directive to the DT
          $compile(angular.element(row).contents())($scope);
      }
      //function deleteRow(recipe)
      //function editRow(recipe
      function actionsHtml(data, type, full, meta) {
          vm.Recipes[data.Id] = data;
          return '&lt;a title="View"  href="@Url.Action("Details", "Recipes", new { id = '+data.Id+' })"&gt;' +
              ' &lt;i class="fa fa-eye" aria-hidden="true"&gt;&lt;/i&gt;' + '&lt;/a&gt;' + '&lt;a title="Edit"  href="javascript:void(0)" ng-click="showCase.edit(showCase.Recipes[' + data.Id + '])"&gt;' +
              ' &lt;i class="fa fa-pencil"&gt;&lt;/i&gt;' + '&lt;/a&gt;' + '&lt;a title="Delete" href="javascript:void(0)" ng-click="showCase.delete(showCase.Recipes[' + data.Id + '])" )"=""&gt;' + ' &lt;i class="fa fa-trash-o"&gt;&lt;/i&gt;' + '&lt;/a&gt;';
      };
      //function updateRow(recipe, ings, tags, files)
  
  });
  app.service("EditRecipe", function ($http) {
      this.EditById = function (recipe) {
          var response = $http({
              method: "post",
              url: '/Recipes/Edit',
              data: JSON.stringify(recipe)
          });
          return response;
      }
      this.Update = function (recipe, ings, tags, files) {
          var response = $http({
              method: "post",
              url: '/Recipes/Update',
              data: JSON.stringify(recipe)
          });
          return response;
      }
  });
  </code></pre>
  
  <p><strong>RecipesController</strong></p>
  
  <pre><code>public ActionResult Details(int? id)
  {
      if (id == null)
      {
          return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
      }
      Recipe recipe = db.Recipes.Find(id);
      if (recipe == null)
      {
          return HttpNotFound();
      }
      return View(recipe);
  }
  </code></pre>
  
  <p><code>href="@Url.Action("Details", "Recipes", new { id = "+data.Id+"  })"</code> or <code>href="@Url.Action("Details", "Details", new { id = "+data.Id+"  })"</code> or <code>href="@Url.Action("Details", "Recipes")"</code> returns the url below.</p>
  
  <pre><code>http://localhost:57104/Recipes/@Url.Action(
  
  Error Code:    0x80070002
  </code></pre>