Using jqxmenu on the layout of MVC - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

This topic contains 9 replies, has 2 voices, and was last updated by Dimitar 11 years, 11 months ago.

Viewing 10 posts - 1 through 10 (of 10 total)

Author

Using jqxmenu on the layout of MVC Posts

May 21, 2013 at 5:04 am Using jqxmenu on the layout of MVC #21498

njm

Member

Hello,

Actually, I’ve tried to start working with jqxmenu on the layout of a sample website, but it doesn’t work. In fact, a unhandled exception is occurred when it want to execute jqxcore.js, jqxmenu.js and jqxcheckbox.js.
my sample code is:

@ViewBag.Title – My ASP.NET MVC Application

@Styles.Render(“~/jqwidgets/styles/jqx.base.css”)
@Styles.Render(“~/jqwidgets/styles/jqx.ui-smoothness.css”)
@Styles.Render(“~/Content/css”)
@Scripts.Render(“~/bundles/modernizr”)

$(document).ready(function () {
$(“#jqxMenu”).jqxMenu({ rtl: false, width: ‘600’, height: ’30px’, theme: theme });
//$(“#jqxMenu”).css(‘visibility’, ‘visible’);
});

Home
Solutions

Education
Financial services
Government
Manufacturing

Software Solutions

Consumer photo and video
Mobile
Rich Internet applications
Technical communication
Training and eLearning
Web conferencing

All industries and solutions

Company

About Us
Press
Investor Relations
Corporate Affairs
Careers
Showcase
Events
Contact Us
Become an affiliate

@Html.ActionLink(“your logo here”, “Index”, “Home”)

@Html.Partial(“_LoginPartial”)

@Html.ActionLink(“Home”, “Index”, “Home”)
@Html.ActionLink(“About”, “About”, “Home”)
@Html.ActionLink(“Contact”, “Contact”, “Home”)
@Html.ActionLink(“View News”,”Index”,”WildLife”)

@RenderSection(“featured”, required: false)

@RenderBody()

@Scripts.Render(“~/bundles/jquery”)
@RenderSection(“scripts”, required: false)

Thanks,
Najmeh

May 21, 2013 at 5:42 am Using jqxmenu on the layout of MVC #21502

Dimitar

Participant

Hello Najmeh,

Please re-post your sample code and format it in the manner shown in the forum topic Code Formatting.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

May 21, 2013 at 5:56 am Using jqxmenu on the layout of MVC #21503

njm

Member

This is a simple code:

<!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 type="text/javascript" src="~/scripts/gettheme.js"></script>
        <script type="text/javascript" src="~/scripts/jquery-2.8.3.min.js"></script>
        <script type="text/javascript" src="~/jqwidgets/jqxcore.js"></script>
        <script type="text/javascript" src="~/jqwidgets/jqxmenu.js"></script>
        <script type="text/javascript" src="~/jqwidgets/jqxcheckbox.js"></script>
        @Styles.Render("~/jqwidgets/styles/jqx.base.css")
        @Styles.Render("~/jqwidgets/styles/jqx.ui-smoothness.css")
        @Styles.Render("~/Content/css")
        @Scripts.Render("~/bundles/modernizr")
    </head>
    <body>
        <script type="text/javascript">
            $(document).ready(function () {
                $("#jqxMenu").jqxMenu({ rtl: false, width: '600', height: '30px', theme: theme });
                //$("#jqxMenu").css('visibility', 'visible');
            });
        </script>
        <header>
            <div class="content-wrapper">
            <div id='jqxWidget' style="height: 300px;">
            <div id='jqxMenu' style='visibility: hidden; margin-left: 5px;'>
                <ul>
                    <li><a href="#Home">Home</a></li>
                    <li>Solutions
                        <ul style='width: 250px;'>
                            <li><a href="#Education">Education</a></li>
                            <li><a href="#Financial">Financial services</a></li>
                            <li><a href="#Government">Government</a></li>
                            <li><a href="#Manufacturing">Manufacturing</a></li>
                            <li type='separator'></li>
                            <li>Software Solutions
                                <ul style='width: 220px;'>
                                    <li><a href="#ConsumerPhoto">Consumer photo and video</a></li>
                                    <li><a href="#Mobile">Mobile</a></li>
                                    <li><a href="#RIA">Rich Internet applications</a></li>
                                    <li><a href="#TechnicalCommunication">Technical communication</a></li>
                                    <li><a href="#Training">Training and eLearning</a></li>
                                    <li><a href="#WebConferencing">Web conferencing</a></li>
                                </ul>
                            </li>
                            <li><a href="#">All industries and solutions</a></li>
                        </ul>
                    </li>
                    <li>Company
                        <ul style='width: 180px;'>
                            <li><a href="#About">About Us</a></li>
                            <li><a href="#Press">Press</a></li>
                            <li><a href="#Investor">Investor Relations</a></li>
                            <li><a href="#CorporateAffairs">Corporate Affairs</a></li>
                            <li><a href="#Careers">Careers</a></li>
                            <li><a href="#Showcase">Showcase</a></li>
                            <li><a href="#Events">Events</a></li>
                            <li><a href="#ContactUs">Contact Us</a></li>
                            <li><a href="#Become an affiliate">Become an affiliate</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
                </div>
            <br />
                <div class="float-left">
                    <p class="site-title">@Html.ActionLink("your logo here", "Index", "Home")</p>
                </div>
                <div class="float-right">
                    <section id="login">
                        @Html.Partial("_LoginPartial")
                    </section>
                    <nav>
                        <ul id="menu">
                            <li>@Html.ActionLink("Home", "Index", "Home")</li>
                            <li>@Html.ActionLink("About", "About", "Home")</li>
                            <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
                            <li>@Html.ActionLink("View News","Index","WildLife")</li>
                        </ul>
                    </nav>
                </div>
            </div>
        </header>
        <div id="body">
            @RenderSection("featured", required: false)
            <section class="content-wrapper main-content clear-fix">
                @RenderBody()
            </section>
        </div>
        <footer>
            <div class="content-wrapper">
                <div class="float-left">
                    <p>&copy; @DateTime.Now.Year - My ASP.NET MVC Application</p>
                </div>
            </div>
        </footer>
        @Scripts.Render("~/bundles/jquery")
        @RenderSection("scripts", required: false)
    </body>
</html>

May 21, 2013 at 6:00 am Using jqxmenu on the layout of MVC #21505

Dimitar

Participant

Hi Najmeh,

Are you using MVC 3 or 4?

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

May 21, 2013 at 6:06 am Using jqxmenu on the layout of MVC #21508

njm

Member

Tanks for reply.
I’m using MVC4

May 21, 2013 at 6:25 am Using jqxmenu on the layout of MVC #21512

Dimitar

Participant

Hi Najmeh,

All your scripts and links to CSS should be included in a section:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>@ViewBag.Title - My ASP.NET MVC Application</title>
        @section scripts {
        <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
        <meta name="viewport" content="width=device-width" />
        <script type="text/javascript" src="~/scripts/gettheme.js"></script>
        <script type="text/javascript" src="~/scripts/jquery-2.8.3.min.js"></script>
        <script type="text/javascript" src="~/jqwidgets/jqxcore.js"></script>
        <script type="text/javascript" src="~/jqwidgets/jqxmenu.js"></script>
        <script type="text/javascript" src="~/jqwidgets/jqxcheckbox.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                $("#jqxMenu").jqxMenu({ rtl: false, width: '600', height: '30px', theme: theme });
                //$("#jqxMenu").css('visibility', 'visible');
            });
        </script>
        }
        @Styles.Render("~/jqwidgets/styles/jqx.base.css")
        @Styles.Render("~/jqwidgets/styles/jqx.ui-smoothness.css")
        @Styles.Render("~/Content/css")
        @Scripts.Render("~/bundles/modernizr")
    </head>
    <body>
        <header>
            <div class="content-wrapper">
            <div id='jqxWidget' style="height: 300px;">
            <div id='jqxMenu' style='visibility: hidden; margin-left: 5px;'>
                <ul>
                    <li><a href="#Home">Home</a></li>
                    <li>Solutions
                        <ul style='width: 250px;'>
                            <li><a href="#Education">Education</a></li>
                            <li><a href="#Financial">Financial services</a></li>
                            <li><a href="#Government">Government</a></li>
                            <li><a href="#Manufacturing">Manufacturing</a></li>
                            <li type='separator'></li>
                            <li>Software Solutions
                                <ul style='width: 220px;'>
                                    <li><a href="#ConsumerPhoto">Consumer photo and video</a></li>
                                    <li><a href="#Mobile">Mobile</a></li>
                                    <li><a href="#RIA">Rich Internet applications</a></li>
                                    <li><a href="#TechnicalCommunication">Technical communication</a></li>
                                    <li><a href="#Training">Training and eLearning</a></li>
                                    <li><a href="#WebConferencing">Web conferencing</a></li>
                                </ul>
                            </li>
                            <li><a href="#">All industries and solutions</a></li>
                        </ul>
                    </li>
                    <li>Company
                        <ul style='width: 180px;'>
                            <li><a href="#About">About Us</a></li>
                            <li><a href="#Press">Press</a></li>
                            <li><a href="#Investor">Investor Relations</a></li>
                            <li><a href="#CorporateAffairs">Corporate Affairs</a></li>
                            <li><a href="#Careers">Careers</a></li>
                            <li><a href="#Showcase">Showcase</a></li>
                            <li><a href="#Events">Events</a></li>
                            <li><a href="#ContactUs">Contact Us</a></li>
                            <li><a href="#Become an affiliate">Become an affiliate</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
                </div>
            <br />
                <div class="float-left">
                    <p class="site-title">@Html.ActionLink("your logo here", "Index", "Home")</p>
                </div>
                <div class="float-right">
                    <section id="login">
                        @Html.Partial("_LoginPartial")
                    </section>
                    <nav>
                        <ul id="menu">
                            <li>@Html.ActionLink("Home", "Index", "Home")</li>
                            <li>@Html.ActionLink("About", "About", "Home")</li>
                            <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
                            <li>@Html.ActionLink("View News","Index","WildLife")</li>
                        </ul>
                    </nav>
                </div>
            </div>
        </header>
        <div id="body">
            @RenderSection("featured", required: false)
            <section class="content-wrapper main-content clear-fix">
                @RenderBody()
            </section>
        </div>
        <footer>
            <div class="content-wrapper">
                <div class="float-left">
                    <p>&copy; @DateTime.Now.Year - My ASP.NET MVC Application</p>
                </div>
            </div>
        </footer>
        @Scripts.Render("~/bundles/jquery")
        @RenderSection("scripts", required: false)
    </body>
</html>

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

May 21, 2013 at 6:36 am Using jqxmenu on the layout of MVC #21515

njm

Member

Hi Dimitar,

I’ve done your suggestion, but unfortunately it doesn’t work. There is no menu on the page except a lot of space on top of it.

Best regards,
Najmeh

May 21, 2013 at 6:42 am Using jqxmenu on the layout of MVC #21518

Dimitar

Participant

Hi Najmeh,

You should also uncomment the line:

//$("#jqxMenu").css('visibility', 'visible');

so that the menu is visible.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

May 21, 2013 at 6:55 am Using jqxmenu on the layout of MVC #21520

njm

Member

Hi Dimitar,

Sorry bothering you. However, although I’ve uncomment that line there is no menu on page. Maybe I’ve forgot to put an instruction or I’ve done something wrong. I’ll be grateful if could guide me.

Many thanks in advance,
Najmeh

May 21, 2013 at 8:07 am Using jqxmenu on the layout of MVC #21526

Dimitar

Participant

Hi Najmeh,

Please check if the paths to your script files are correct. You may refer to the tutorial Bind jqxGrid to SQL Database using ASP.NET MVC4 to see how to include the scripts if there is an issue at your side.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

Author

Posts

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.