在ajax调用中重定向到另一个页面[重复]答案

【问题标题】：Redirect to another page in ajax call [duplicate]在ajax调用中重定向到另一个页面[重复]
【发布时间】：2019-02-23 10:15:54
【问题描述】：

你好，我有菜单栏，当我点击 About its changes renderbody in Layout using Ajax:

<div id="renderbody">@RenderBody()</div>

菜单栏：

    <li class="active menu-tab"><a href="#" id="Dashboard"><i class="icon icon-home"></i> <span>Dashboard</span></a> </li>
    <li class="menu-tab"> <a href="#" id="About"><i class="icon icon-signal"></i> <span>About</span></a> </li>

和 JS：

$("#About").click(function () {
            $.ajax({
                url: '/Home/About',
                success: function (data) {
                    $("#renderbody").html(data);
                }
            })
        })

效果很好，但是当我使用局部视图和模型进行操作时，它不起作用。

   <li class="menu-tab"> <a href="#" onclick="@Html.Partial("_MovesPages", new IndividualMenuButton { ID="About", url="About"})"><i class="icon icon-signal"></i> <span>About</span></a> </li>

模态 - IndividualMenuButton：

namespace XXX.Models
{
    public class IndividualMenuButton
    {
        public string ID { get; set; }
        public string Url { get; set; }

    }
}

和局部视图 - _MovesPages：

@model XXX.Models.IndividualMenuButton
@section scripts
{
    <script>

        $("#@Model.ID").click(function () {
            $.ajax({
                url: '/Home/@Model.Url',
                success: function (data) {
                    $("#renderbody").html(data);
                }
            })
        })

    </script>
}

【问题讨论】：

“它不起作用”你能详细说明吗？你的控制器动作没有命中吗？您的控制器操作是否返回 HTML 但未插入页面？
控制器动作返回 HTML 但它没有插入到页面@GeorgPatscheider
您是否在控制台中收到任何特定的错误消息？（在 Chrome 中是 ctrl+shift+i）
在控制台@Martin 中没有收到任何特定的错误消息
你能找到元素#renderbody吗？如果它在您的模式中，请尝试在元素上执行find()。 $('#yourModalBody').find('#renderbody').html(data);

标签： ajax asp.net-mvc

【解决方案1】：

这不会呈现有效的事件处理程序。呈现的 HTML 看起来像

<li class="menu-tab"> <a href="#" onclick="<script>...</script>"><i class="icon icon-signal"></i> <span>About</span></a> </li>

onclick 属性需要包含 javascript 代码，而不是 HTML 脚本块。也许更好的解决方案是将类用作选择器而不是部分选择器，并使用 href 属性来保存 URL。所以，类似：

<li class="menu-tab"> <a href="About"><i class="icon icon-signal"></i> <span>About</span></a> </li>

<script>
    $(".menu-tab").click(function (e) {
        e.preventDefault();
        var url = '/Home/' + $(this).attr('href');
        $.ajax({
            url: url,
            success: function (data) {
                $("#renderbody").html(data);
            }
        });
    });
</script>

请注意，您需要传入事件参数 (e) 并调用 e.preventDefault(); 以防止锚标记像通常那样执行导航，以便您可以进行 ajax 调用。

【讨论】：

$(".menu-tab a").click(function (e) {
太棒了！它的工作@akerra