Forums Ignite UI for jQuery
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Cidolfus
1290
jQuery control not showing up.
posted

I'm creating my first MVC4 jQuery project and I'm taking close reference to the date-picker/date-picker-metro-theme sample.

However, when I run my site, the control doesn't show up.

This is the code I used in the cshtml file to render the control

@(Html.Infragistics().DatePicker()
    .ID("leftDatePicker")
    .Width(150)
    .DateInputFormat("dateTime")
    .Value(DateTime.Now)
           .Render())

I have added Infragistics.Web.Mvc dll. Referenced all the scripts and css folders. Added the assembly in the web.config.

I can't seem to attach my project, maybe the file size is too big. It's 17mb. I have uploaded it onto my dropbox

https://dl.dropbox.com/u/3487495/MvcApplication8.zip

The view containing the calendar is in DatePickerMetroTheme.cshtml

Parents
  • 23953
    Verified Answer
    Offline posted

    Hi,

    First, in MVC 4 project jQuery is included at the bottom of the page and the NA for jQuery is executing before jQuery is actually loaded. So you should move @Scripts.Render("~/bundles/jquery") in the <head> section in _Layout.cshtml.

    Second, jQuery UI is not included by default so you should include @Scripts.Render("~/bundles/jqueryui") in the <head> section in _Layout.cshtml.

    Third, you need to move the Infragistics Loader initialization code from the _Layout.cshtml to the "Views/DateTime/Index.cshtml", because loader cannot infer the control if the loader and control are in different views. 

    Here is how your _Layout.cshtml HEAD should look like:

    Code Snippet
    1. <head>
    2.     <meta charset="utf-8" />
    3.     <title>@ViewBag.Title - My ASP.NET MVC Application</title>
    4.     <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
    5.     <meta name="viewport" content="width=device-width" />
    6.     @Styles.Render("~/Content/css")
    7.     @Scripts.Render("~/bundles/modernizr")
    8.     @Scripts.Render("~/bundles/jquery")
    9.     @Scripts.Render("~/bundles/jqueryui")
    10.     <script type="text/javascript" src="@Url.Content("~/scripts/infra/infragistics.loader.js")"></script>
    11. </head>

     

    Here is how your "Views/DateTime/Index.cshtml" should look like:

    Code Snippet
    1. @using Infragistics.Web.Mvc
    2. @{
    3.     ViewBag.Title = "Index";
    4. }
    5. <h2>
    6.     Index</h2>
    7.     @(Html.Infragistics()
    8.         .Loader()
    9.         .ScriptPath(Url.Content("~/Content/Infragistics/js/"))
    10.         .CssPath(Url.Content("~/Content/Infragistics/css/"))
    11.         .Theme("metro")
    12.         .Render()
    13.     )
    14.     @(Html.Infragistics().DatePicker()
    15.         .ID("leftDatePicker")
    16.         .Width(150)
    17.         .DateInputFormat("dateTime")
    18.         .Value(DateTime.Now)
    19.                .Render())
    20. <p>testing</p>

     

    Note: The recommended practice is that scripts should be at the bottom of the page for best performance and that is how it is implemented in MVC 4 project template. Infragistics NA for jQuery MVC Wrappers output JavaScript code and the problem is that if you put your MVC Wrapper code in the scripts section(@section scripts {}) your controls will be outputted at the bottom of the page.

    If you want your scripts at the bottom then you should use pure JavaScript.

     

    Hope this helps,

    Martin Pavlov

    Infragistics, Inc.

Reply Children
No Data