Let’s say for example that I have a partial view that uses the jQuery UI slider control (which I’ll specify some unique id value). Plus it has JS code which needs to be called to initialize it. Say this is in the form of a method and a call to that method using that id. Now, let’s say that we want several sliders on that page, and use that partial view several times, so we’ll only need the jQuery UI scripts and the method definition once, but we’ll need each separate call to the function. To handle this, you’d need to add to you partial view, the following:
JScripts.Std("slide");
JScripts.AddScript("MySlider", "function HideSlider(id) { $(id).Hide();}")
JScripts.AddScript("HideSlider('#"+ myId + "');") 

“JScripts.Std()” says that “slider” is one of the standard JavaScript files which we have defined what it’s traits and dependencies are. Actually, that could be a comma-separated list of them, so you can state everything you need in one line. I originally envisioned only a few “standard” files – jQuery, jQuery UI, et al – but soon realized assigning a keyword for every script file used made life easier. How a file is pre-defined, as well as where we get a JScripts object, will be discussed in the next section.

The first “JScripts.AddScript()” call defines the function that we need. The second AddScript called calls that function, using the id specific to that instance of the partial view. So, if our page has three instances of this partial view, we’ll need the function definition only once, but the call to it three times. This is handled by given a name to the snippet that need not be repeated. All blocks with the same name are rendered only once (actually, blocks with the same name as an existing block are ignored, so make sure that you only use a particular name for one script block. )


Then in the Layout, we just add the lines:
<head>
@JScripts.InsertCss();
</head>
<body> 
/* other content for the page */ 
@JScripts.InsertScripts();
<html> 

This will produce an output of:

<head>
<link rel="stylesheet" type="text/css" href="content/css/ui.base.css" />
<link rel="stylesheet" type="text/css" href="content/css/ui.core.css" />
<link rel="stylesheet" type="text/css" href="content/css/ui.slider.css" />
</head>
<body>
/* other content for the page */
<script type="text/javascript" src="/Scripts/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="/Scripts/ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="/Scripts/ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="/Scripts/ui/jquery.ui.mouse.js"></script>
<script type="text/javascript" src="/Scripts/ui/jquery.ui.slider.js"></script>
<script type="text/javascript">
//<![CDATA[
function HideSlider(id) { $(id).Hide();}
HideSlider('#sl12321');
HideSlider('#sl14315');
HideSlider('#sl68953');
//]]>
</script>
</body>
<html> 

That is, unless we are using MVC4 and have turned on bundling/compression, in which case, it will look more like:
<head>
<link rel="stylesheet" type="text/css" href="content/css/home_index?u=1234e6f7g9838759503u"/>
</head>
<body>

/* other content for the page */
<script type="text/javascript" src="Scripts/home_index?u=123e432d543f765a654"> </script>
<script type="text/javascript">
//<![CDATA[
function HideSlider(id) { $(id).Hide();}
HideSlider('#sl12321');
HideSlider('#sl14315');
HideSlider('#sl68953');
//]]>
</script>
</body>
<html> 

Last edited Jul 20, 2012 at 4:35 PM by JamesCurran, version 3

Comments

No comments yet.