为什么我的 asp.net core cshtml 视图不呈现？答案

【问题标题】：Why is my asp.net core cshtml view not rendering?为什么我的 asp.net core cshtml 视图不呈现？
【发布时间】：2020-12-03 18:43:37
【问题描述】：

当我按下 DataTable 中的删除按钮时，它应该将我带到 DeleteUserConfirm 视图。我可以看到正在传递显示页面所需的数据。但是，该页面未显示，我没有收到任何错误。任何解决此问题的想法或建议将不胜感激！

DataTable 的代码如下：

<html>
<head>
    <!--CSS for DataTables-->
    <link href="//cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css" rel="stylesheet" />
</head>
<body>
    <h1>All Accounts</h1>
    <br />
    <br />
    <div>
        <table id="allAccounts" class="table table-striped table-bordered" style="width:100%">
            <thead>
                <tr>
                    <th>First Name</th>
                    <th>Last Name</th>
                    <th>Organization</th>
                    <th>State</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>
    <div>
        <a asp-action="Index">Back to Home</a>
    </div>
</body>
</html>


@section Scripts{
    <script type="text/javascript" src="~/lib/jquery/dist/jquery.js"></script>
    <script type="text/javascript" src="//cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#allAccounts').DataTable(
                {
                    "responsive": true,
                    "ajax": {
                        "url": "/api/User/GetUsers",
                        "dataSrc": ""

                    },
                    "columns": [
                        { "data": "FirstName" },
                        { "data": "LastName" },
                        { "data": "Organization" },
                        { "data": "State" },
                        {
                            "data": "Id",
                            "render": function (data, type, row, meta) {
                                return "<button class='btn btn-danger' style=margin-right:5px; onclick=DeleteUser(" + row.Id + ")>Delete</button>"

                            }
                        }
                    ]
                });
        });

        function DeleteUser(data) {
            $.ajax({
                "type": "POST",
                "url": "/api/User/Delete/",
                "data": JSON.stringify(data),
                "contentType": "application/json; charset=utf-8"
            })
        }
    </script>
}

一旦删除按钮被点击，数据就会被发送到用户控制器中的删除方法，用户控制器是一个 API 控制器。 Delete 方法的代码如下：

[HttpPost]
    public IActionResult Delete([FromBody] int data)
    {
       

        return RedirectToAction("DeleteUserConfirm", "Home", new { id = data });
    }

User Controller 中的 Delete 方法重定向到传递数据的 Home Controller 并应显示 DeleteUserConfirm 视图。 Home Controller 中的 DeleteUserConfirm 方法如下：

 [HttpGet]
        public IActionResult DeleteUserConfirm(int id)
        {              
            return View(_userRepository.GetUser(id));
        }

DeleteUserConfirm 视图的代码如下：

@model Project.Models.User

@{
    ViewData["Title"] = "Confirm Rejection/Deletion";
}

<h1>Confirm Account Rejection/Deletion</h1>
<br/>
<br/>
<h4>Are you sure you want to reject and delete this account?</h4>
<div>
    <hr />
    <dl class="row">
        <dt class="col-sm-2">
            @Html.DisplayNameFor(model => model.FirstName)
        </dt>
        <dd class="col-sm-10">
            @Html.DisplayFor(model => model.FirstName)
        </dd>
        <dt class="col-sm-2">
            @Html.DisplayNameFor(model => model.LastName)
        </dt>
        <dd class="col-sm-10">
            @Html.DisplayFor(model => model.LastName)
        </dd>
        <dt class="col-sm-2">
            @Html.DisplayNameFor(model => model.EmailAddress)
        </dt>
        <dd class="col-sm-10">
            @Html.DisplayFor(model => model.EmailAddress)
        </dd>
        <dt class="col-sm-2">
            @Html.DisplayNameFor(model => model.PhoneNumber)
        </dt>
        <dd class="col-sm-10">
            @Html.DisplayFor(model => model.PhoneNumber)
        </dd>
    </dl>

    <form asp-action="DeleteUser">
        <input type="hidden" name="id" value="@Model.Id" />
        <input type="submit" value="Delete" name="submit" class="btn btn-danger" /> |
        <input type="submit" value="Cancel" name="submit" class="btn btn-primary" formnovalidate />
    </form>
    <br/>
    <a asp-action="Accounts">Back to Account Management</a>
</div>

我一直到 Home Controller 中的 DeleteUserConfirm 方法。我可以看到正在从 GetUser(Id) 方法中检索用户。我只是没有被带到视图本身。

【问题讨论】：

标签： c# asp.net-core asp.net-core-mvc

【解决方案1】：

您将无法在控制器中执行 RedirectToAction，因为您的请求来自客户端通过 ajax。

相反，只需在用户单击按钮时直接重定向到您的 DeleteUserConfirm。

        $(document).ready(function () {
            $('#allAccounts').DataTable(
                {
                    "responsive": true,
                    "ajax": {
                        "url": "/api/User/GetUsers",
                        "dataSrc": ""

                    },
                    "columns": [
                        { "data": "FirstName" },
                        { "data": "LastName" },
                        { "data": "Organization" },
                        { "data": "State" },
                        {
                            "data": "Id",
                            "render": function (data, type, row, meta) {
                                return "<a class='btn btn-danger' style='margin-right:5px;' href='/Home/DeleteUserConfirm/" + row.Id + "'>Delete</a>"
                            }
                        }
                    ]
                });
        });

}

【讨论】：

我试过了，但视图仍然没有呈现。但是，它确实使我的 DataTable 加载更快，所以谢谢你！
我的回答有一个小错误。我更新了渲染函数以返回："Delete"以便 href 中的最后一个单引号出现在双引号之后。请试一试。如果视图仍未呈现，请尝试直接导航到浏览器 url 栏中的 /Home/DeleteUserConfirm/[Some Valid UserID]。
我修正了引号，但它仍然没有呈现。我通过浏览器直接进入页面，它确实渲染了，显示了我输入的 Id 的信息。
刚刚注意到渲染方法中的样式属性在 margin-right:5px 周围没有引号（更新了我的答案）。请尝试在 margin-right:5px 周围添加引号，因为这可能会干扰 href 属性。如果单击删除按钮后页面仍未呈现，请检查开发人员工具中呈现的 html。你很亲密。

【解决方案2】：

您不能使用ajax 以这种方式执行此操作。可以返回视图，但您需要通过 javascript 手动更新它。目前，您的 ajax 在成功请求后没有做任何事情。将您的 ajax 更新为：

$.ajax({
   "type": "POST",
   "url": "/api/User/Delete/",
   "data": JSON.stringify(data),
   "contentType": "application/json; charset=utf-8"
}).done(function(html){
    $('#Container').html(html);
}).fail(function(){
   console.error('error');
});

理想情况下，您应该从控制器返回PartialView。

[HttpGet]
public IActionResult DeleteUserConfirm(int id)
{              
    return PartialView(_userRepository.GetUser(id));
}

您可能需要直接在 ajax 中调用home/DeleteUserConfirm/，但您可以尝试使用 API 看看它是否工作。

或者如果您只需要重定向到另一个页面，请在done 回调中进行。

$.ajax({
   "type": "POST",
   "url": "/api/User/Delete/",
   "data": JSON.stringify(data),
   "contentType": "application/json; charset=utf-8"
}).done(function(){
    window.location.href = 'url';
}).fail(function(){
   console.error('error');
});

【讨论】：