@Url.Action returns HTTP 错误 404.0 - 未找到

Question

为什么我的 url 操作 returns 没有找到错误？我有一个使用 angular-datatables 生成的食谱 table，每个食谱都有一个带有 href link 和详细信息视图的 id 值的查看按钮。进入详细信息视图后，我需要在我的 angular 控制器中获取 id 值。

Index.cshtml

@{
    ViewBag.Title = "Recipes";
}

<br />
<div class="col-md-12 center">
    <a href="/Recipes/Create"><input type="button" value="Create" class="btn btn-default" /></a>
</div>
<br/>
<br/>
    <div>
        <table datatable="tblRecipe" dt-options="showCase.dtOptions" dt-columns="showCase.dtColumns" dt-instance="showCase.dtInstance" class="table table-bordered"></table>
    </div>
    @*edit modal...*@

@section Scripts {
    @Scripts.Render("~/bundles/indexRecipe")
    }

indexRecipe.js 控制器

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 '<a title="View"  href="@Url.Action("Details", "Recipes", new { id = '+data.Id+' })">' +
            ' <i class="fa fa-eye" aria-hidden="true"></i>' + '</a>' + '<a title="Edit"  href="javascript:void(0)" ng-click="showCase.edit(showCase.Recipes[' + data.Id + '])">' +
            ' <i class="fa fa-pencil"></i>' + '</a>' + '<a title="Delete" href="javascript:void(0)" ng-click="showCase.delete(showCase.Recipes[' + data.Id + '])" )"="">' + ' <i class="fa fa-trash-o"></i>' + '</a>';
    };
    //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;
    }
});

RecipesController

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

href="@Url.Action("Details", "Recipes", new { id = "+data.Id+" })" or href="@Url.Action("Details", "Details", new { id = "+data.Id+" })" or href="@Url.Action("Details", "Recipes")" returns 下面的url.

http://localhost:57104/Recipes/@Url.Action(

Error Code:    0x80070002

Answer 1

您无法访问 JS 文件中的 Razor 辅助方法。 Razor 语法仅适用于 .cshtml 或 .vbhtml 文件。所以你可以做类似下面的事情。在您的 .cshtml 文件中定义一个 javascript 变量，并在您的外部 JS 文件中访问它。

Index.cshtml

<script>
var URL={
  Details:'@Url.Action("Details", "Recipes")',
}
</script>

indexRecipe.js 控制器

return '<a title="View"  href='+URL.Details+'?id='+data.Id >' +
            ' <i class="fa fa-eye" aria-hidden="true"></i>' + '</a>' + '<a title="Edit"  href="javascript:void(0)" ng-click="showCase.edit(showCase.Recipes[' + data.Id + '])">' +
            ' <i class="fa fa-pencil"></i>' + '</a>' + '<a title="Delete" href="javascript:void(0)" ng-click="showCase.delete(showCase.Recipes[' + data.Id + '])" )"="">' + ' <i class="fa fa-trash-o"></i>' + '</a>';

@Url.Action returns HTTP 错误 404.0 - 未找到

@Url.Action returns HTTP Error 404.0 - Not Found

asp.net-mvc

url-routing

angularjs