Переход JavaScript на частичный вид

Question

Я пытаюсь создать общее решение для кнопок, запускающих функции JavaScript в ASP.NET MVC 3. С этой целью я создал класс C# ToolButton и частичный вид с тем же именем, что и следует:

<%@ 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> 

Заметил обработчик onClick? Я приду к этому в одно мгновение. toolbutton.js - это пользовательское расширение jQuery и обрабатывает все события. Идея теперь иметь, скажем, IEnumerable с кнопками, которые вызывают разные (чисто JavaScript ведомые) события, как так:

<%@ 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> 

проблема теперь, что я не могу понять, как передать событие обработчик для конкретного экземпляра ToolButton. Я хотел бы выполнить собственный обработчик JavaScript для любой отдельной кнопки в перечислении, например, одна кнопка очищает текстовое поле, а другая кнопка заполняет ту же самую текстовую область с некоторым предварительно отформатированным текстом - когда эта кнопка нажата, то есть мне нужно пройти в обработчике onClick, который устанавливается, когда этот экземпляр ToolButton инициализируется (обычно, когда ToolButton.ascx частично отображается).

Есть ли способ пройти JavaScript на частичный просмотр?

Answer 1

Вы можете придумать соглашение о назначении своего обработчика для вашей кнопки-инструмента.

<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> 

И тогда на вашей родительской странице:

<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> 

Мне это кажется рода странно, но я не знаю, все ваши потребности для вашего проекта. Являются ли эти кнопки динамическими? Используется на нескольких страницах? Является ли js, который связывает кнопку с щелчком мыши в текстовое поле, хранящееся в базе данных или закодированное на странице? Если бы я мог узнать вашу конечную цель с помощью кнопок, я мог бы предложить дополнительную помощь.

Пример js на jsfiddle.