Setup MVC 4 (VS 2010) with jQuery Controls V 2012.1

240

Herbert posted over 11 years ago

Hi,

I found a Video showing how to Setup a MVC Project with 2011.1 Version of the jQuery Controls but this doesn't work for me.

Now I need to know how to setup a MVC 4 Project (VS 2010) with jQuery Controls V. 2012.1.

Can you please provide a step by step resource?!

Thanks for your help.

Regards

Herbert

Parents

23953

Offline Martin Pavlov posted over 11 years ago

Hello Herbert,

From 12.2 version we provide Ignite UI Visual Studio project templates for MVC 3/4, but unfortunately they are not available in 12.1.

Also in 12.1 we don't have Infragistics.Web.Mvc.dll pre-compiled for MVC4 as part of the installation. You have to manually compile NetAdvantage for jQuery source for the MVC wrappers against MVC 4 (the source should be available for download from our website for users with licenses).

Apart from that the steps for setting up a MVC 4 project to use the Infragistics jQuery controls are:
1. Copy the js/css folders from the NA for jQuery installation folder into your project

2. (Optional)Add reference to Infragistics.Web.Mvc.dll (compiled against MVC 4). It is not a mandatory step, but the wrappers make the server side data binding very easy.

3. Add references to jQuery, jQuery UI libraries and infragistics.loader.js in the Views\Shared\_Layout.cshtml file

4. In the Views\Home\Index.cshtml configure the Infragistics Loader and use our controls.

For more information you may want to read the Adding Controls to an MVC Project and Using Infragistics Loader topics.

Hope this helps,
Martin Pavlov
Infragistics, Inc.
Cancel
Reply

Cancel

240

Herbert posted over 11 years ago in reply to Martin Pavlov

Hi Martin,

thank you for your reply.

I was able to compile the wrappers for MVC against MVC 4 successfully and added the reference to my project accordingly.

After this I added the scripts and layout (CSS) as described to do a test with the Rating Control. But unfortunately there is an error running the project (translated from german):
"JavaScript RuntimeError: The Property "isDocumentReady" is not defined or Nullreference cannot be set."

Here is the code for my _Layout.cshtml:

<html lang="en">
		<head>
				<meta charset="utf-8" />
				<title>@ViewBag.Title - ITC Webshop App</title>
				<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
				<meta name="viewport" content="width=device-width" />
				<script src="../../Scripts/jquery-1.7.1.js" type="text/javascript"></script>
				<script src="../../Scripts/jquery-ui-1.8.20.js" type="text/javascript"></script>
				<script src="../../Scripts/IG/infragistics.js" type="text/javascript"></script>
				<script src="../../Scripts/IG/infragistics.loader.js" type="text/javascript"></script>
				<link href="../../Content/IG/themes/infragistics/infragistics.theme.css" rel="stylesheet" type="text/css" />
				@Styles.Render("~/Content/css")
				@Scripts.Render("~/bundles/modernizr")
		</head>
.
.
.

Here is the code for my Index.cshtml:

@using Infragistics.Web.Mvc;
 
@{
    ViewBag.Title = "Willkommen bei ITC Webcommerce";
}
@section featured {
    <section class="featured">
        <div class="content-wrapper">
	.
	.
	.
        </div>
    </section>
}
 
@(Html.Infragistics().Rating()
	.Precision(RatingPrecision.Exact)
	.Value(3)
	.VoteCount(5)
	.Render()
	)

Any help to get this running is appreciated!

Regards
Herbert

240

Herbert posted over 11 years ago in reply to Herbert

Hi,

isn't there anybody who can help me out with this issue? I'm totally stuck!

Normally I create Windows software. So I thought using the jQuery Controls could help me to avoid learning the whole java stack so that I can just focus on my core logic in .NET!?

Also reading the documentation is a pain if you're not aware what has to be done since it's missing important steps to take and requires a certain knowledge.

Please let me know what can be done to get this basic sample running!

Best Regards

Herbert
Cancel
Reply

Cancel
23953

Offline Martin Pavlov posted over 11 years ago in reply to Herbert

Hello Herbert,

I see this error for the first time. The code you provide is correct, so the problem should be somewhere else. In order to move forward with investigating this problem can you provide the generated HTML code from your project.

I'm attaching a sample MVC4 project with configured igRating. I use the Infragistics Loader to load the scripts for the Ignite UI controls. In order to run the project you have to copy the "packages" folder from a newly created MVC4 project into my project and create the proper Infragistics.Web.Mvc.dll reference.

Best regards,
Martin Pavlov
Infragistics, Inc.
Cancel
Reply

Cancel
240

Herbert posted over 11 years ago in reply to Martin Pavlov

Hi Martin,

thank you for your reply.

I've attached the whole project except the default references and scripts (I think you'll have them). What you'll is the Infragistics.Web.Mvc.dll which I compiled against MVC 4 (with different Version Number).

I think this will help you better to investigate the problem.

Unfortunately I couldn't find you attachment.

Best Regards

Herbert

WebShop4.zip
Cancel
Reply

Cancel

Reply

23953

Offline Martin Pavlov posted over 11 years ago in reply to Herbert

Hello Herbert,

First, sorry for the delay.

The problem was that you reference jQuery 2 times in the _Layout.cshtml. One at the head section, the other at the bottom using bundling.

Attached you can find the corrected _Layout.cshtml.

Best regards,
Martin Pavlov
Infragistics, Inc.

_Layout.zip
Cancel
Reply

Cancel

Children

240

Herbert posted over 11 years ago in reply to Martin Pavlov

Hi Martin,

sorry for the delay. It happened because of a business trip.

Thank you very much for you help. It took me to the right direction and my project is working now.

It would be very nice to show me the use of the loader instead of the whole infragistics.js.

Best regards,

Herbert
Cancel
Reply

Cancel