MVC 4: Bundles

Instantiating Script and Style References Efficiently

Including references to script and style tags has always been a tedious and time-consuming web development task.
Now MVC 4 provides an alternate method by allowing developers to “bundle” files together into a single reference which may then be referenced to “render” them into appropriate pages.

For this example I’ll begin with a simple table encapsulated within a div.

1-MVC-4-Bundles

I wish to style the table and div using style sheets and include a JavaScript file reference.

2-MVC-4-Bundles

3-MVC-4-Bundles

Instead of using separate include statements, I can “bundle” them together and simply use the virtual reference later within pages.

4-MVC-4-Bundles

Now I may refer to each file by its virtual reference (the first string) instead of the much longer file path.

For example, within the Index View I will instruct the MVC engine to generate necessary link and script statements for my style sheets and JavaScript files respectively.

5-MVC-4-Bundles

Now within my page’s source, my files have the necessary tags to be used.

6-MVC-4-Bundles

When I load my View, I’m presented with proof my JavaScript file is loaded.

7-MVC-4-Bundles

Also, my View’s div and table are styled as intended.

8-MVC-4-Bundles

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s