【问题标题】:@Url.Action returns HTTP Error 404.0 - Not Found@Url.Action 返回 HTTP 错误 404.0 - 未找到
【发布时间】:2018-01-24 01:28:45
【问题描述】:

为什么我的 url 操作返回未找到错误?我有一个使用 angular-datatables 生成的食谱表,每个表都有一个 View 按钮,其中包含指向 Details 视图的 href 链接和 id 值。一旦进入详细信息视图,我将需要在我的角度控制器中获取 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;
    }
});

食谱控制器

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

【问题讨论】:

  • 只是一个想法,尝试将您的@Url.Action 包裹在:&lt;%=Url.Action("Details", "Recipes", new { id = "+data.Id+" })%&gt;
  • 你不能像那样构建你的href。首先@Url.Action() 是剃须刀代码(服务器端),data 是javascript 变量(客户端)。接下来,剃刀代码无论如何都不会在外部文件中解析,因此您只需生成字符串@Url.Action(...
  • 我们需要更多上下文来帮助您。是什么触发了该函数(如何从视图中调用它)?
  • @StephenMuecke 我正在使用 angular-datatables 为食谱生成视图,当单击 View href 时,每一行都有 data.id 它应该使用 id 转到详细信息视图,然后我会得到角度控制器中的 id。
  • 还是不清楚。您需要在调用 actionsHtml 函数的主视图中显示代码/html。

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


【解决方案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>';

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2014-10-18
    • 2017-07-28
    • 2020-04-30
    • 2011-04-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多