Pass JavaScript to a Partial View

I'm trying to come up with a generic solution to buttons triggering JavaScript functions in ASP.NET MVC 3. To that end I created a C# ToolButton class and a partial view with that same name as follows:

<%@ Control Language="C#" 
            Inherits="System.Web.Mvc.ViewUserControl<ToolButton>" %>

<%@ Import Namespace="Models.Shared" %>

<script src="<%= Url.Content("~/Scripts/Utility/toolbutton.js") %>" type="text/javascript"></script>

<script type="text/javascript">

   $(function () {
      $('<%: String.Format("#{0}", Model.Id) %>').toolbutton({ 'onClick': function () { alert('xyz'); } });
   });

</script>

<div id="<%: Model.Id %>" class="tool-button"></div>

Noticed the onClick handler? I'll come to that in a jiffy. toolbutton.js is a custom jQuery extension and handles all the events. The idea now is to have, say, an IEnumerable with buttons that trigger different (purely JavaScript driven) events, like so:

<%@ Control Language="C#" 
            Inherits="System.Web.Mvc.ViewUserControl<IEnumerable<ToolButton>>" %>

<%@ Import Namespace="Models.Shared" %>

<div class="tool-panel">
   <table>
      <tbody>
         <tr>

            <% foreach (var toolButton in Model)
               { %>
                  <td><% Html.RenderPartial("ToolButton", toolButton); %></td>
            <% } %>

         </tr>
      </tbody>
   </table>
</div>

The problem now is, that开发者_JAVA百科 I can't figure out how to pass the event handler to a particular instance of ToolButton. I'd like to execute a custom JavaScript handler for any single button in the enumeration, for example one button clears a textarea and another button fills that same textarea with some pre-formatted text - when that button is clicked, i.e. I need to pass in a handler for onClick that gets set when that instance of ToolButton is initalized (typically when ToolButton.ascx is partially rendered).

Is there any way of passing JavaScript to a partial view?

---

You could come up with a convention for the name of your handler for your tool-button.

<script type="text/javascript">

  $(function () {
    $('<%:String.Format("#{0}", Model.Id) %>').toolbutton({
        'onClick': function () {
            if (typeof <%=String.Format("OnClickFor{0}", Model.Id)%> == 'function') { 
              <%: String.Format(OnClickFor{0}", Model.Id) % >();
            }
        });
  });

</script>

<div id="<%: Model.Id %>" class="tool-button"></div>

And then on your parent page:

<script type="text/javascript">
  var onClickFor01 = function(){alert('Clicked onClickFor01 ')}
</script>

<div class="tool-panel">
   <table>
      <tbody>
         <tr>

            <% foreach (var toolButton in Model)
               { %>
                  <td><% Html.RenderPartial("ToolButton", toolButton); %></td>
            <% } %>

         </tr>
      </tbody>
   </table>
</div>

To me this seems sort of strange, but I dont know all your needs for your project. Are these buttons dynamic? Used on multiple pages? Is the js that links a button click to a text box stored in a database or coded on the page? If I could find out your end goal with the buttons I might be able to offer some more assistance.

Example of the js on jsfiddle.