jQuery control not showing up. | Infragistics Forums

1290

jQuery control not showing up.

Cidolfus posted over 12 years ago

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

10

Infragistics User posted over 12 years ago in reply to Martin Pavlov

Sorry, but this doesn't look right to me. Infragistics should play with Microsoft's rules and you should be able to use the new "bundling" feature of MVC 4. Also, you can't assume that everyone wants an Infragistics control on every page. There might be many pages that don't need it and you don't want to put that in the master page. The design of the loader code should change to be work right. Please:)

Johan
Cancel
Reply

Cancel
1290

Cidolfus posted over 12 years ago in reply to Martin Pavlov

Thanks for the very detailed and comprehensive explanation.

It works now :)
Cancel
Reply

Cancel
23953

Verified Answer
Offline Martin Pavlov posted over 12 years ago
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

<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")

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

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

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

    <script type="text/javascript" src="@Url.Content("~/scripts/infra/infragistics.loader.js")"></script>

</head>

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

Code Snippet

@using Infragistics.Web.Mvc

@{

    ViewBag.Title = "Index";

}

<h2>

    Index</h2>

    @(Html.Infragistics()

        .Loader()

        .ScriptPath(Url.Content("~/Content/Infragistics/js/"))

        .CssPath(Url.Content("~/Content/Infragistics/css/"))

        .Theme("metro")

        .Render()

    )

    @(Html.Infragistics().DatePicker()

        .ID("leftDatePicker")

        .Width(150)

        .DateInputFormat("dateTime")

        .Value(DateTime.Now)

               .Render())

<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.
Cancel
Reply

Reject Answer

Cancel