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

时间:2018-01-24 01:28:46

标签: angularjs asp.net-mvc url-routing

为什么我的网址操作会返回未找到的错误?我有一个Recipes表,我使用angular-datatables生成,每个都有一个View按钮,其中href链接和id值指向Details视图。进入详细信息视图后,我需要在角度控制器中获取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+" })"href="@Url.Action("Details", "Details", new { id = "+data.Id+" })"href="@Url.Action("Details", "Recipes")"会返回以下网址。

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

Error Code:    0x80070002

1 个答案:

答案 0 :(得分: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>';