MVC 4在视图中捆绑和引用jquery

时间:2013-07-14 11:39:02

标签: asp.net-mvc-4

为什么我仍然需要在我的视图页面中引用jquery,当它被捆绑并加载到_layout.cshtml中时?

如果我在视图页面中没有引用jquery.js文件,那么我的jquery将无效。

 public static void RegisterBundles(BundleCollection bundles)
        {

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

            bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                        "~/Scripts/modernizr-*"));

            bundles.Add(new ScriptBundle("~/Scripts/Bootstrap").Include(
                        "~/Scripts/jquery-1.*",
                        "~/Scripts/Bootstrap.js",
                        "~/Scripts/bootstrap-modalmanager.js",
                        "~/Scripts/bootstrap-modal.js"));

            bundles.Add(new StyleBundle("~/Content/Bootstrap").Include(
                        "~/Content/Site.css",
                        "~/Content/Bootstrap.min.css",
                        "~/Content/Bootstrap-responsive.css",
                        "~/Content/bootstrap-modal.css"
                        ));



        }

如果没有在我的视图中引用jquery,这不起作用:

    @{
            ViewBag.Title = "Index";
        }


        <script>
            $(document).ready(function () {
                $("#btn1").click(function () {
                    alert("Text: " + $("#test").text());
                });
                $("#btn2").click(function () {
                    alert("HTML: " + $("#test").html());
                });
            });
        </script>


        <p id="test">This is some <b>bold</b> text in a paragraph.</p>
        <button id="btn1">Show Text</button>
        <button id="btn2">Show HTML</button>

这可以添加参考:

            @{
                ViewBag.Title = "Index";
            }

            <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js">
            </script>


            <script>
                $(document).ready(function () {
                    $("#btn1").click(function () {
                        alert("Text: " + $("#test").text());
                    });
                    $("#btn2").click(function () {
                        alert("HTML: " + $("#test").html());
                    });
                });
            </script>


            <p id="test">This is some <b>bold</b> text in a paragraph.</p>
            <button id="btn1">Show Text</button>
            <button id="btn2">Show HTML</button>

0 个答案:

没有答案