个人中心
gpt4 book ai didi

MVC 5 中的 JavaScript 未被读取？

转载 作者：行者123 更新时间：2023-11-28 18:51:35 25 4
gpt4 key购买 nike

我仍在学习 MVC，我想找到一种在 View 加载时将焦点设置在文本框上的方法。我发现建议将以下内容添加到 _Layout.cshtml 页面，以便将焦点设置到每个页面上的第一个文本框。不过好像没啥作用。

我认为这与我有默认的 @Scripts.Render("~/bundles/modernizr") 设置有关，因此它会忽略直接在页面中设置的任何 JS 代码。

这是我在 _Layout 页面中尝试的第一件事:

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")

    <script type="text/javascript">
    $(function () {       
        // Set the focus to the first textbox on every form in the app
        $("input[type=text]").first().focus();
    });
    </script>

</head>

然后我尝试创建一个名为 Scripts/app.js 的文件，并将其添加到 Bundle.Congif.cs 文件的底部。这也不起作用。

public static void RegisterBundles(BundleCollection bundles)
        {
            bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                        "~/Scripts/jquery-{version}.js"));

            bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                        "~/Scripts/jquery.validate*"));

            // Use the development version of Modernizr to develop with and learn from. Then, when you're
            // ready for production, use the build tool at http://modernizr.com to pick only the tests you need.
            bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                        "~/Scripts/modernizr-*"));

            bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
                      "~/Scripts/bootstrap.js",
                      "~/Scripts/respond.js"));

            bundles.Add(new StyleBundle("~/Content/css").Include(
                      "~/Content/bootstrap.css",
                      "~/Content/site.css"));

            bundles.Add(new ScriptBundle("~/bundles/appScript").Include(
                        "~/Scripts/app.js*"));
        }

app.js(文件顶部没有 <script>)

$(function () {
    // Set the focus to the first textbox on every form in the app
    $("input[type=text]").first().focus();
});

有什么建议吗？

更新并修复

为了清楚起见，这就是我根据 @Shyju 建议使其工作的方式。我像上面一样在 BundleConfig.cs 中添加了 Scripts/app.js。然后在 Layout.cshtml 页面中，我已经有了 bundle 引用，我只需将渲染添加到我添加的 bundle 中，我将其称为 appScipt。

这是在我的 Layout.cshtml 文件中:

<div class="container body-content">
        @RenderBody()
    </div>

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @Scripts.Render("~/bundles/appScript")
    @RenderSection("scripts", required: false)

最佳答案

您需要将此新包包含在您希望将焦点放在文本框上的特定页面/ View 中。

@section Scripts
{
    @Scripts.Render("~/bundles/appScript")
}

或者您可以直接引用该文件而不是使用 bundle (如果您不希望利用 bundle 的优势)。

@section Scripts
{
   <script src="~/Scripts/app.js"></script>
}

并确保您的布局中有 RenderSection ，以便当 razor 渲染页面(使用布局)时它将包含页面特定的脚本

<head>
    <title>@ViewBag.Title</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr") 
</head>
<body>
     <div id="pageContent">
        @RenderBody()
     </div>
     @Scripts.Render("~/bundles/jquery")
     @RenderSection("scripts", required: false)
</body>

关于MVC 5 中的 JavaScript 未被读取？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34446123/

25 4 0
文章推荐： javascript - 正则表达式:从这个到那个匹配，除非另一个字符位于中间
文章推荐： javascript - AngularJS Rest服务返回数据，但未显示在页面上
文章推荐： python - 有没有一种规范的方式来终止 python 中的线程？
文章推荐： javascript - TypeScript- NodeJS - 意外的标记； 'constructor, function, accessor or variable'
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com