发表新帖
发表新帖

MVC4 jQuery UI does not work

后端 未结
关注
4 535
刺人心
刺人心 2020-12-18 13:26

I cannot get jQuery UI working in my ASP.NET MVC4 application. I tried dialog and datepicker. Here is part of the code of my view.
相关标签:
4条回答
  • 眼角桃花
    2020-12-18 13:33

    I spent lots of time to figure out how to make it working.

    Finally the steps are following:

    1. Create ASP .NET MVC4 project Internet Application.

    2. Clean some of the last lines of the _Layout.cshtml so it should look like this

      <footer>
        <div class="content-wrapper">
            <div class="float-left">
                <p>&copy; @DateTime.Now.Year - My ASP.NET MVC Application</p>
            </div>
        </div>
    </footer>

    @RenderSection("scripts", required: false)

    3. Change header like I did here

     <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" />
        @Styles.Render("~/Content/css")
        @Styles.Render("~/Content/themes/base/css")
        @Scripts.Render("~/bundles/jquery")
        @Scripts.Render("~/bundles/jqueryui")
        @Scripts.Render("~/bundles/modernizr")
        <script type="text/javascript">
            $(document).ready(function () {
                // We will test DataPicker
                $('#datep').datepicker();
                // We will test TABS
                $(function () {
                    $("#tabs").tabs();
                });
            });
        </script>
    </head>

    1. Delete all code after @section featured { section and add some html to Home/Index.cshtml

      A. Put some code from the view source link of http://jqueryui.com/tabs/ page (It is inside of < div id="tabs" > ... < div >)

      B. Add this


    < div > Date: < input id="datep" type="text" / > < / div >

    DONE!!!

    enter image description here

    0 讨论(0)
  • [愿得一人]
    2020-12-18 13:38

    Your code runs just fine in a fiddle: http://jsfiddle.net/m3QFL/

    Check the console for errors and the path to your scripts. Chrome includes a console to help with js debugging or you can run FireFox and FireBug.

    Either one will go a long way in helping you solve issues like this.

    Also, hosted versions of jquery and jquery ui are available through jquery and jquery ui or Google. Here are yours:

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>

    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js"></script>

    jquery ui has links at the bottom of their homepage to their hosted versions.

    BTW, the // instead of http:// allows the script to pick up the http prefix from the site. If you are on ssl it will pick up the https:// so you don't have secure and non-secure items on your page.

    0 讨论(0)
  • 余生分开走
    2020-12-18 13:39

    In the layout.cshtml view, move 

    @Scripts.Render("~/bundles/jquery")

    from body to head and add in head too 

    @Scripts.Render("~/bundles/jqueryui")
    0 讨论(0)
  • 别那么骄傲
    2020-12-18 13:50

    You will need to add a couple lines to your _Layout.cshtml to get jQuery UI working out of the box. First is the javascript bundle:

    @*you should already have this line*@
@Scripts.Render("~/bundles/jquery")

@*add this line*@
@Scripts.Render("~/bundles/jqueryui")

    Next you need the CSS for jQuery UI as well:

    @*you should already have this line*@
@Styles.Render("~/Content/css")

@*add this line*@
@Styles.Render("~/Content/themes/base/css")
    0 讨论(0)
 看不清?
提交回复
热议问题