将Minicolors添加到MVC应用程序

时间:2015-03-26 00:23:51

标签: jquery asp.net-mvc asp.net-mvc-4

美好的一天

我无法在我的MVC应用程序中使用minicolors。这可能纯粹是Minicolors问题或jQuery插件问题。无论哪种方式,我都被困住了。我一直在谷歌搜索无济于事。非常感谢任何帮助

我的设置是什么样的 我确定我已将其添加到我的脚本标签中 enter image description here

在chrome中进行调试时,它表示我已正确引用它 enter image description here

但我继续收到错误:SCRIPT438:对象不支持属性或方法'minicolors'

我尝试过的事情: •我尝试在虚拟HTML上添加minicolors到我的输入,它可以工作 •我试图运行我的MVC应用程序>右键单击>查看来源>保存到桌面>将脚本标记更改为另一个路径(因为我将其保存到桌面,路径已更改)>>有用!当我从MVC运行它时,它本身无法正常工作

谢谢!
编辑:这是我的代码
_Layout.cshtml

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>@ViewBag.Title - My ASP.NET MVC Application</title>
        <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
        <meta name="viewport" content="width=device-width" />


        <script src="../../Scripts/jquery-1.8.2.js"></script>
        <script src="../../Scripts/jquery-ui-1.8.24.js" ></script>
        <script src="@Url.Content("../../Scripts/jquery.minicolors.js")"></script>
        <link rel="stylesheet" href="../../Content/jquery.minicolors.css" type="text/css"/>

        @Styles.Render("~/Content/css")
        @Scripts.Render("~/bundles/modernizr")

    </head>
    <body>
        <header> 

            <div class="content-wrapper"><img src="../../Images/HeroRed.png" style="vertical-align: middle" /> // Page</div>

        </header>
        <div id="body">
            @RenderSection("featured", required: false)
            <section class="content-wrapper main-content clear-fix">
                @RenderBody()
            </section>
        </div>
  </body>
</html>

Index.cshtml

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<script> 
    $(document).ready(function() {
        $('#dude').minicolors();
    });
</script>
<h2>Index</h2>
<input id="dude"/>

生成的HTML

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Index - My ASP.NET MVC Application</title>
        <link href="/favicon.ico" rel="shortcut icon" type="image/x-icon" />
        <meta name="viewport" content="width=device-width" />



        <script src="../../Scripts/jquery-1.8.2.js"></script>
        <script src="../../Scripts/jquery-ui-1.8.24.js" ></script>
        <script src="../../Scripts/jquery.minicolors.js"></script>
        <link rel="stylesheet" href="../../Content/jquery.minicolors.css" type="text/css"/>

        <link href="/Content/site.css" rel="stylesheet"/>

        <script src="/Scripts/modernizr-2.6.2.js"></script>


    </head>
    <body>
        <header> 

            <div class="content-wrapper"><img src="../../Images/HeroRed.png" style="vertical-align: middle" /> // Page</div>

        </header>
        <div id="body">

            <section class="content-wrapper main-content clear-fix">

<script> 
    $(document).ready(function() {
        $('#dude').minicolors();
    });
</script>
<h2>Index</h2>
<input id="dude"/>
            </section>
        </div>

    </body>
</html>

1 个答案:

答案 0 :(得分:0)

事实证明,现代化与它相互冲突,当我评论它时,它起作用了。