MVC4 Reference and render jquery file

David Smith

I have a jquery file that I want to reference and render in in timelime.cshtml. I am attaching the file view below. review attachment. I want reference the jquery file in the attachment below.

The name of the jquery file timeline.js.

18 Replies

Know the answer? Post it — somebody with the same question will find it here.

Sunny Sharma13y ago
Hi David,

I'm in GMT +5. It's 11:01 now.
David Smith13y ago
Ok. What time is it where you located?
Sunny Sharma13y ago
ok.

Here's my skype id: sunny.programmer
David Smith13y ago
Dont work just yet. Do i need this below on the _layout.cshtml page at the bottom of the footer. Skype will be easier this problem is getting on my nerves. lol

@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/Timeline")
Sunny Sharma13y ago
Modified Code:

public class BundleConfig
{
public static void RegisterBundles(BundleCollection bundles)
{
bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
"~/Scripts/jquery-ui*"));

bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
"~/Scripts/jquery.unobtrusive*",
"~/Scripts/jquery.validate*"));

bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
"~/Scripts/modernizr-*"));

bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css"));

//TODO: Added new bundles

bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-1.9.1.min.js",
"~/Scripts/jquery.scrollTo-1.4.1.js"
"~/Scripts/Timeline.js",
));

bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
"~/Content/themes/base/jquery.ui.core.css",
"~/Content/themes/base/jquery.ui.resizable.css",
"~/Content/themes/base/jquery.ui.selectable.css",
"~/Content/themes/base/jquery.ui.accordion.css",
"~/Content/themes/base/jquery.ui.autocomplete.css",
"~/Content/themes/base/jquery.ui.button.css",
"~/Content/themes/base/jquery.ui.dialog.css",
"~/Content/themes/base/jquery.ui.slider.css",
"~/Content/themes/base/jquery.ui.tabs.css",
"~/Content/themes/base/jquery.ui.datepicker.css",
"~/Content/themes/base/jquery.ui.progressbar.css",
"~/Content/themes/base/jquery.ui.theme.css"));
}
}

-------------------------------------------------------

Give it a try and let me know if it works or not.

I've skype but not able to connect to you right this moment.

Thanks,
David Smith13y ago
Here is my bundles below. Review

public class BundleConfig
{
public static void RegisterBundles(BundleCollection bundles)
{
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-1.*"));

bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
"~/Scripts/jquery-ui*"));

bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
"~/Scripts/jquery.unobtrusive*",
"~/Scripts/jquery.validate*"));

bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
"~/Scripts/modernizr-*"));

bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css"));

//TODO: Added new bundles

bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-1.9.1.min.js",
"~/Scripts/Timeline.js"
));

bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-1.9.1.min.js",
"~/Scripts/jquery.scrollTo-1.4.1.js"
));

bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
"~/Content/themes/base/jquery.ui.core.css",
"~/Content/themes/base/jquery.ui.resizable.css",
"~/Content/themes/base/jquery.ui.selectable.css",
"~/Content/themes/base/jquery.ui.accordion.css",
"~/Content/themes/base/jquery.ui.autocomplete.css",
"~/Content/themes/base/jquery.ui.button.css",
"~/Content/themes/base/jquery.ui.dialog.css",
"~/Content/themes/base/jquery.ui.slider.css",
"~/Content/themes/base/jquery.ui.tabs.css",
"~/Content/themes/base/jquery.ui.datepicker.css",
"~/Content/themes/base/jquery.ui.progressbar.css",
"~/Content/themes/base/jquery.ui.theme.css"));
}
}
David Smith13y ago
ok. I am getting ready to try. I tried loading the project. Its to big to load. do you have skype?
Sunny Sharma13y ago
"Do I add it like this below.
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-1.9.1.min.js",
"~/Scripts/jquery.scrollTo-1.4.1.js"
));
OR

bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery.scrollTo-1.4.1.js"
));
"

My Answer:
Bundling the Script in one bundle gives you freedom to use them wherever you need it and not where you don't.

Please note, that if you create a bundle with the name that is already created, the bundle information would get over-written. What I mean is, If I have added a Script Bundle with name "~/bundles/jquery", which contains jquery-1.9.1.min.js and jquery.scrollTo-1.4.1.js, two files:

bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-1.9.1.min.js",
"~/Scripts/jquery.scrollTo-1.4.1.js"
));

AND,
I'm trying to create another one with same name, it gets over-written:
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery.scrollTo-1.4.1.js"
));
// here it contains only one file - jquery.scrollTo-1.4.1.js.

So now if I try to render this bundle: ~/bundles/jquery, using this statement: @Scripts.Render("~/bundles/jquery"), it will render only a single file jquery.scrollTo-1.4.1.js because this is what we have declared in the last bundle for said name.

Please check if you're adding two bundles with same name. Bundles provide you the flexibility of rendering only required files hence decreasing the bandwidth and increasing the speed, like, if I need jquery UI on any View, I'll render a bundle that contains jquery-ui... .js, otherwise I won't.

Thanks.
David Smith13y ago
Do I add it like this below.

bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-1.9.1.min.js",
"~/Scripts/jquery.scrollTo-1.4.1.js"
));

or

bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery.scrollTo-1.4.1.js"
));
Sunny Sharma13y ago
Well, I don't think jquery.scrollTo-1.4.1.min.js comes bundled with ASP.NET MVC4 template.

What I meant, If timeline.js file has any dependency to this jquery.scrollTo-1.4.1.min.js then do add this to the bundle, otherwise you don't need to.

You can share your project if still have any issues and I'll sort it out.

Thanks.
David Smith13y ago
Can you give me the exact code to adding the jquery.scrollTo-1.4.1.min.js to the bundle object
Sunny Sharma13y ago
Yes, all the dependent files should be added to the bundle.
Apart of that, modify this line of code:

---------------------------------------------------
" @Model.LoadMoreUrl "')" href="javascript:void(0)">
More

as

More

(Remove the double quotes around @Model.LoadMoreUrl)

HTH :)
David Smith13y ago
I am missing the jquery.scrollTo-1.4.1.js file. I forgot to add. Do i add this to the bundle like this below to make the scroll to feature work of the timeline.

bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-1.9.1.min.js",
"~/Scripts/jquery.scrollTo-1.4.1.js"
));
David Smith13y ago
So I hit view page source, and I saw the timeline.js, for some reason the anchor is not working when I try to click the link. can you let me know if I am doing something wrong with code below.

@if (Model.PageSize == Model.Updates.Count)
{

More

}
else if (Model.CurrentPageIndex > 0)
{
Thats all folks!
}
David Smith13y ago
The name of the js file is timeline.js, not timescript.js.

-The timeline.js is located in the script folder.

-By default for the ASP MVC4 template the _layout.cshtml has the @Scripts.Render("~bundles/jquery") at the bottom of the page after the footer.

-I did not add @Scripts.Render("~bundles/timeline") to the _layout.cshtml, because you said if i wanted the timeline.js file to be render on every page just add it to the bundle. I did just that. Review below.

bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-1.9.1.min.js",
"~/Scripts/Timeline.js"
));
Review attachments below and look at every file.
Sunny Sharma13y ago
Hi David,

Not to worry about, I'll help you with that.

I assume in my previous post that timescript.js file is present inside Scripts folder. If not, then please move it and try again. If yes, please try to check in the View Source of rendered html if "timeline.js" is being rendered. Just try to find "timeline.js". If it's in there then it is being rendered otherwise not.

If it is being rendered and it's not working as expected then there must me some problem within your timeline.js file codes, suggest you to check that.

If it's not being rendered, check your master layout _Layout.cshtml if it has the snippet at the bottom or top to render the defined script bundle:
@Scripts.Render("~/bundles/timeline")

HTH :)
David Smith13y ago

I changed the second input parameter.

From:

bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-1.10.2.min.js",
"~/Scripts/timeline.js",
));

To:

bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-1.9.1.min.js",
"~/Scripts/timeline.js",
));

However I am still troubleshooting why my timeline feature is not working yet. I wonder if the .js file is being rendered.
Sunny Sharma13y ago
Hi Davd,

The easiest way is to use the bundling feature that comes with MVC 4.

Open BundleConfig.cs file under App_Start, find this pattern and modify:
------------------------------------------------------------------------
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-1.10.2.min.js",
"~/Scripts/timeline.js",
));
------------------------------------------------------------------------

That's it. Now it will be rendered automatically wherever you've this snippet in view:
@Scripts.Render("~/bundles/jquery")

basically above line lies in _Layout.cshtml so that jquery file is rendered in each derived page.

Alternatively, if you want to refer this file to any specific page only, then create a script bundle and refer in those pages, like:

Your new script bundle:
-----------------------------------------------------------------------
bundles.Add(new ScriptBundle("~/bundles/timeline").Include(
"~/Scripts/timeline.js",
));
-----------------------------------------------------------------------

Now put this snippet to render this bundle in any view like:
@Scripts.Render("~/bundles/timeline")

Hope you got the point.

Happy Coding :)