将 JavaScript 传递给局部视图

Question

我正在尝试为在 ASP.NET MVC 3 中触发 JavaScript 函数的按钮提供一个通用解决方案。为此，我创建了一个 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 处理程序，例如，一个按钮清除文本区域，另一个按钮用一些预格式化的文本填充相同的文本区域 - 当单击该按钮时，即我需要通过在初始化 ToolButton 实例时设置的 onClick 处理程序中（通常是在 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是在页面上编码的吗？如果我能通过按钮找出你的最终目标，我可能会提供更多帮助。

jsfiddle上的js示例。