HTML helpers in ASP.NET MVC 3 with Javascsript action

Question

I have many HTML helper in Helpers.cshtml file, but some of the helper (html) need some jquery action, so how do i can call jquery inside helpers.cshtml, is that possible?

i know we can keep the js file in header or particular page, but i do not want to do like that, i want to use jquery or javascript only on the page which loaded particular helper.

anyone have idea on this? My scenario is, i have list box control, that is properly loading from helper, but i need to apply custom theme to the list box.

Little more Clarity

//in index.cshtml
@Helpers.testListBox("mylist" "1,2,3,4,5,6,7")


//in Helpers.cshtml
@helper testListBox(string listName, string listData){

    //...... HTML code .........

    //Javascript here?

}

Answer 1

With Web Forms, the framework could automatically include Javascript (once) when certain server controls were used on a page; ASP.Net MVC has no such facility. It sounds like this is what you're missing.

The way to do it is on the client. Look at RequireJS at http://requirejs.org/. This is a client-side library for managing Javascript dependencies. This does what Web Forms did, but better, and it does more. Your master layout will have a script tag like this:

<script src="/Scripts/require.js" type="text/javascript" data-main="/Scripts/main"></script>

This can be the only script tag you include on every page. Everything else can be dynamically loaded only as needed by RequireJS. It's true that you load this on every page, but it's smaller than jQuery, and it earns its place because it does so much for you.

Using your example, let's say you have this markup:

@Helpers.testListBox("mylist" "1,2,3,4,5,6,7")

and it renders HTML and needs jQuery scripting. You would render this:

// HTML for list box here

<script type="text/javascript>
require(['jquery'], function($) {
  // Do your jQuery coding here:
  $("myList").doSomething().whatever();
});
</script>

The require function will load jQuery, unless it has already been loaded, and then execute your code. It's true that your jQuery snippet is repeated once per use of the HTML helper, but that's not a big deal; that code should be short.

RequireJS manages dependencies effectively; you can have module A, and module B which dependes on A, and module C which depends on B. When your client code asks for module C, A and B will be loaded along with C, and in the correct order, and only once each. Furthermore, except for the initial load of require.js, scripts are loaded asynchronously, so your page rendering is not delayed by script loading.

When it's time to deploy your site on the web server, there's a tool that will examine the dependencies among the Javascript files and combine them into one or a small number of files, and then minimize them. None of your markup has to change at all. While in development, you can work with lots of small, modular Javascript files for easy debugging, and when you deploy, they are combined and minimized for efficiency.

This is much better than what the web forms framework did, and entirely client-side, which in my opinion is where it belongs.

Answer 2

You can put a <script> tag in the helper body.

Answer 3

How about this for an example of a partial view:

@model Member.CurrentMemberModel
@{

    var title = "Test View";
}

        <script type="text/javascript">
            // Javascript goes in here, you can even add properties using "@" symbol
            $(document).ready(function () {
                //Do Jquery stuff here
            });
        </script>

@if (currentMember != null)
{
     <div>Hello Member</div>
}
else
{
    <div>You are not logged in</div>
}