jQuery UI Widgets › Forums › Getting Started › Installation
Tagged: MVC4
This topic contains 4 replies, has 4 voices, and was last updated by Peter Stoev 11 years, 7 months ago.
-
AuthorInstallation Posts
-
1. Download jQWidgets.
2. Unzip to a directory of your choice.
3. Copy the jqwidgets directory to your project.
4. Use your favorite text editor to create a basic HTML page:
<html><head> <!-- add the jQuery script --> <script type="text/javascript" src="scripts/jquery-1.9.0.min.js"></script> <!-- add the jQWidgets framework --> <script type="text/javascript" src="jqwidgets/jqxcore.js"></script> <!-- add one or more widgets --> <script type="text/javascript" src="jqwidgets/jqxbuttons.js"></script> <!-- add one of the jQWidgets styles --> <link rel="stylesheet" href="jqwidgets/styles/jqx.darkblue.css" type="text/css" /></head><body> <script type="text/javascript"> $(document).ready(function () { $("#myButton").jqxButton({ width: '120px', height: '35px', theme: 'darkblue'}); }); </script> <input type="button" value="Click Me" id='myButton'/></body></html>
hi, I try to test any widget of jwidget in MVC4, but the application doesn’t run due to errors of javascript, but when I test in MVC3 everything works fine, my doubt is if the widget’s don’t work in MVC4 or I need to do something else to make the widgets work.
best regards.Our product does not have any dependencies on a specific platform or IDE. We tried to find an issue with MVC4, but without avail. Could you provide additional details about the issues that you experience with MVC4? Which version of jQuery do you use – 1.7.2 or some other version? You can also send us a sample to support@jqwidgets.com. We’ll be glad to take a look at it.
Here’s more info about my working sample with MVC4.
– Views/Shared/_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" /> @Styles.Render("~/Content/themes/base/css", "~/Content/css") <link rel="stylesheet" href="~/Scripts/jqwidgets/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="~/Scripts/jquery-1.6.2.min.js"></script> <script type="text/javascript" src="~/Scripts/jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="~/Scripts/jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="~/Scripts/jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="~/Scripts/jqwidgets/jqxtooltip.js"></script> <script type="text/javascript" src="~/Scripts/jqwidgets/globalization/jquery.global.js"></script> <script type="text/javascript"> jQuery(document).ready(function () { jQuery("#jqxWidget").jqxCalendar({ width: 250, height: 250 }); }); </script></head><body> <header> <div class="content-wrapper"> <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> </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>© @DateTime.Now.Year - My ASP.NET MVC Application</p> </div> <div class="float-right"> <ul id="social"> <li><a href="http://facebook.com" class="facebook">Facebook</a></li> <li><a href="http://twitter.com" class="twitter">Twitter</a></li> </ul> </div> </div> </footer> @RenderSection("scripts", required: false)</body></html>
– Views/Home/Index.cshtml
@{ ViewBag.Title = "Home Page";}@section featured { <section class="featured"> <div class="content-wrapper"> <div id='jqxWidget'> </div> <hgroup class="title"> <h1>@ViewBag.Title.</h1> <h2>@ViewBag.Message</h2> </hgroup> <p> To learn more about ASP.NET MVC visit <a href="http://asp.net/mvc" title="ASP.NET MVC Website"> http://asp.net/mvc</a>. The page features <mark>videos, tutorials, and samples</mark> to help you get the most from ASP.NET MVC. If you have any questions about ASP.NET MVC visit <a href="http://forums.asp.net/1146.aspx/1?MVC" title="ASP.NET MVC Forum">our forums</a>. </p> </div> </section>}<h3> We suggest the following:</h3><ol class="round"> <li class="one"> <h5> Getting Started</h5> ASP.NET MVC gives you a powerful, patterns-based way to build dynamic websites that enables a clean separation of concerns and that gives you full control over markup for enjoyable, agile development. ASP.NET MVC includes many features that enable fast, TDD-friendly development for creating sophisticated applications that use the latest web standards. <a href="http://go.microsoft.com/fwlink/?LinkId=245151">Learn more</a></li> <li class="two"> <h5> Add NuGet packages and jump start your coding</h5> NuGet makes it easy to install and update free libraries and tools. <a href="http://go.microsoft.com/fwlink/?LinkId=245153"> Learn more</a></li> <li class="three"> <h5> Find Web Hosting</h5> You can easily find a web hosting company that offers the right mix of features and price for your applications. <a href="http://go.microsoft.com/fwlink/?LinkId=245157"> Learn more</a></li></ol>
The jQWidgets package is added to the Scripts folder of the ASP .NET MVC4 project. To create the test project, I clicked File>New >Project. Then I selected Visual C# on the left in VS2010 and then I selected ASP.NET MVC 4 Web Application. In the New ASP.NET MVC 4 Project dialog box, I selected Internet Application and left Razor as the default view engine.
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.comCan you please check if this would work also on VS2012. It will work only if you choose MVC 3. It will never work if you choose MVC 4. You will always get jqxCalendar undefined exception.
Hi omaralfa,
The post from my previous post is for MVC4 and Yes it will work with VS2012 and MVC4.
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.com -
AuthorPosts
The topic ‘Installation’ is closed to new replies.