Question

我在外部JS文件中点击按钮，我试图让它重定向到另一个视图。我在控制器文件中获取ActionResult，但它不想从第一个视图移动。

我用来访问ActionResult的代码是

$('#Req1').on('click', function () {
    console.log("Called");
    $.ajax({
        type: "POST",
        url: "/FruitStandHome/Requirement1",
        dataType: "json",
        contentType: "application/json; charset=utf-8",
        success: function (data, textStatus, jqXHR) {
        }
    });
});

并且控制器中的操作结果是

[HttpPost]
public ActionResult Requirement1()
{
    return View();
}

我有一个已经绑定到此ActionResult的视图，但正如我所说它不会将我发送到点击事件的那个视图。

我很确定我做错了什么;）

Answer 1

在你的html中创建一个容器元素，其中将加载返回的View html，让我们说我们有一个id为 viewcontainer 的div：

<div id="viewcontainer">
<!-- All html in here, possibly add this in _Layout.cshtml -->
</div>

另一件事是不要使用硬编码的网址，而是使用Url.Action帮助生成正确的网址，并按照以下方式使用html5数据属性：

<button id="Req1" data-url="@Url.Action("Requirement1","FruitStandHome")" />

现在，在您的ajax调用的成功函数中，更新了div的内容以及从服务器返回的视图结果，您不需要将content-type设置为 JSON ，因为控制器操作将返回html并且您不需要将datatype设置为 JSON ，因为我们暂时没有传递任何参数，所以只需将您的ajax调用代码更改为：

$('#Req1').on('click', function () {
     console.log("Called");
     var url = $(this).data("url");
     $.ajax({
         type: "POST",
         url: url,
         success: function (data, textStatus, jqXHR) {
         $("#viewcontainer").html(data);
       }
    });
});

希望它有所帮助！

如何从外部JavaScript文件重定向到查看

1 个答案: