javascript - RenderBody 未渲染我的 View

Question

您好，我正在开发一个带有 boostrap 模板的网站。我想要的是，当用户单击链接时，它会调用 Controller 函数返回 View 并将焦点转移到正文部分。

为此，我使用 _Layout 和渲染主体函数

<section id="bodySection">
@RenderBody()
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@RenderSection("scripts", required: false)

还有一个调用函数并聚焦于正文的 href

  <a href="#bodySection" onclick="myFunction()">Education</a>

我的函数在 onclick 上触发:

<script type="text/javascript">
    function myFunction() {
        //alert("I am an alert box!");
        $.post("@Url.Action("Education", "Education")");
        }
</script>

还有我的 Controller

    public ActionResult Education()
    {
       {...........}
        return View();
    }

当我按下按钮时，焦点转到正文部分， Controller 被调用，但正文部分仍保留旧 View 。如果我检查页面，我不会收到任何错误。有人可以告诉我我的代码发生了什么吗？

Answer 1

您的代码将不起作用，因为该标记只是一个 anchor 链接，它只会将页面滚动到 #bodySection 所在的位置，并执行 $.post 到返回特定结果的服务，但不会重定向到新页面。

我会将您的链接更改为:

<a href="@Url.Action("Education", "Education")">Education</a>

然后将以下脚本添加到 View 中，以使页面每次加载时自动平滑滚动到 anchor :

<script type="text/javascript">
    $("html,body").animate({
        scrollTop: $("#bodySection").offset().top
    }, 1000);
</script>