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处理程序，例如，一个按钮清除textarea，另一个按钮用一些预格式化的文本填充相同的textarea - 当单击该按钮时，即我需要通过在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是否单击存储在数据库中或在页面上编码的文本框？如果我能用按钮找到你的最终目标，我可能会提供更多帮助。

jsfiddle上的js示例。

将JavaScript传递给部分视图

1 个答案: