使用 jQuery 单击菜单时从 _Layout.cshtml 打开 MVC 视图答案

【问题标题】：Open MVC View from _Layout.cshtml when Menu is clicked using jQuery使用 jQuery 单击菜单时从 _Layout.cshtml 打开 MVC 视图
【发布时间】：2015-08-03 21:00:08
【问题描述】：

我是 MVC 新手，正在尝试构建一个场景。

_Layout.cshtml
ABC控制器
ABC\Index.cshtml

我在 _Layout.cshtml 中有几个菜单项。当我单击菜单项时，它应该调用 ABCController 的 Index 方法，它应该是 ABC\Index.html。我正在尝试使用 jQuery Ajax、get/post 方法来实现这一点。调用了控制器的方法，但视图没有打开。我不确定为什么它没有被打开。但是当我直接在菜单项中给出@Html.ActionLink 时，视图就会打开。我的要求是，我应该能够编写 javascript 从 _Layout.cshtml 打开视图。我也尝试过 $.get ，但它不起作用。谁能帮帮我。

我的代码：

Javascript：

$("body").on("click", "#aMyLink", function () {
var navURL;
navURL = "/ABC/Index";

$.ajax({
    url: navURL,
    data: {},
    type: 'POST',
    error: function (jqXHR) {
        alert('error occurred - ' + jqXHR.status);
    },
    success: function (data) {

    }
})

});

【问题讨论】：

$.get() 不会导航到新页面。如果请求成功，成功函数中的data 应该包含您请求的视图的html。
我会将菜单放在局部视图中，但我离题了。我认为您寻求的是重定向而不是 ajax 调用？
是的，我的菜单只是部分视图。我不确定它是否可以重定向或ajax调用，我只是想打开视图。

标签： jquery asp.net-mvc

【解决方案1】：

我认为这违背了 ajax 的目的，因为 ajax 请求旨在避免执行整个页面循环。但是可以通过调用成功后重定向到页面来实现。

$("body").on("click", "#aMyLink", function () {
    var navURL;
    navURL = "/ABC/Index";

    $.ajax({
        url: navURL,
        data: {},
        type: 'POST',
        error: function (jqXHR) {
            alert('error occurred - ' + jqXHR.status);
        },
        success: function (data) { 
            window.location = navURL;
        }
    });
});

【讨论】：

为什么要在这里打扰.ajax()？您两次发出相同的请求。
没错，不过他的要求好像是用ajax。
那么“要求”是错误的，应该重新评估。很多人对各种技术都说“我希望它以这种方式做到这一点”，而不是“我如何让它做到这一点”。或者可能只是滥用术语，“我想打开一个视图”可能意味着“我想在现有页面上打开部分视图而不导航” - 谁知道？
。感谢您的回复。我尝试了 Buggy 的方式，它确实有效。正如你所说，我可能使用了不正确的方式。我的设计是，我有一个包含菜单的部分视图，当我单击菜单项时，它应该打开新视图（不是部分视图）。请让我知道我可以使用什么方法？我可以在 html 中使用 Url.Action，但我想通过 javascript 来做。

【解决方案2】：

$("body").on("click", "#aMyLink", function () {
    var navURL;
    navURL = "/ABC/Index";
    window.location=navURL;
});

注意我可能不会硬编码这个 url 并将其作为数据元素放入标记中，然后使用它。

<div id="links">
    <ul>
        <li><a class="mylink" data-url='@Url.Action("someaction", "somecontroller", new { id = "123" })'>My Link</a>
        </li>
        <li><a class="mylink" data-url='@Url.Action("someotheraction", "somecontroller", new { id = "123" })'>My Link</a>
        </li>
    </ul>
</div>

然后将代码改为：

$("#links").on("click", ".mylink", function () {
    window.location=$(this).data("url");;
});

【讨论】：

这个方法不错，行得通！但只是想检查一下这是否正确？
不了解您的解决方案的更多信息，我认为第二部分（html 和代码）将是您可以使用/构建的东西 - 特别是如果您将其放在部分视图中以制作菜单它是可维护的。