Question

我将ASP.NET MVC 3与Yahoo API version 3一起使用。当我点击它时，我试图让我的YUI3 button重定向到另一个页面，这个按钮是我的取消按钮。取消按钮是普通按钮类型，但它被视为提交按钮。它没有重定向到正确的页面，而是像提交按钮一样，它启动了我的页面验证，就像提交按钮一样。

我认为可能是我的HTML，但我确实验证了它。它验证100％正确。所以我然后将整个页面剥离到最低限度，但取消按钮仍然像提交按钮一样工作。这是我的HTML标记：

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
     <head>
          <title>Create2</title>
     </head>

     <body class="yui3-skin-sam">

          <h1>Test submit</h1>

          @using (Html.BeginForm())
          {
               <button id="SaveButton" type="submit">Save</button>
               <button id="CancelButton" type="button">Cancel</button>
          }

          <script src="http://yui.yahooapis.com/3.6.0pr4/build/yui/yui-min.js"></script>
          <script>
               YUI().use('button', function (Y) {
                    var saveButton = new Y.Button({
                         srcNode: '#SaveButton'
                    }).render();

                    var cancelButton = new Y.Button({
                         srcNode: '#CancelButton',
                         on: {
                              'click': function (e) {
                                   Y.config.win.location = '/Administration/Department/List';
                              }
                         }
                    }).render();
               });
          </script>

     </body>
</html>

我不确定我在这里做错了什么？这可能是他们的API中的错误吗？我正在测试IE8和最新版本的FireFox。

更新

我忘了提到如果这些按钮不在表单标签之间，那么重定向工作正常。如果我将它们放在表单标签中，则重定向不起作用。

Answer 1

我会使用链接，因为您正在重定向到另一个页面。这样做你不需要用javascript初始化它或注册onClick监听器。

<button id="SaveButton" type="submit">Save</button>
<a id="CancelButton" href='/Administration/Department/List'>Cancel</a>

请查看此链接以设置链接样式：http://yuilibrary.com/yui/docs/button/cssbutton.html

Answer 2

Y.Button窗口小部件正在从“取消”按钮中删除type属性。这使得该按钮的行为类似于提交按钮。

有许多可能的途径可以完成这项工作。我将从简单到复杂。第一个是完全避免这个问题而根本不使用JavaScript。只需使用链接：

<form action="/Administration/Department/Create2" method="post">
    <button class="yui3-button">Save</button>
    <a class="yui3-button" href="/Administration/Department/List">Cancel</a>
</form>

毕竟，Button小部件正在做的就是为每个标签添加几个css类以及许多其他可以使更复杂的小部件成为可能的东西。正如您在Styling elements with cssbutton示例中所看到的，即使<a>标签看起来就像使用YUI css样式的漂亮按钮一样。如果您不必使用JavaScript，最好不要使用它。

第二个选项是避免Y.Button窗口小部件并使用Y.Plugin.Button插件。它在kb和处理能力方面都更轻巧。并且它不会触及标记属性，因此您的位置代码将起作用。

YUI().use('button-plugin', function (Y) {
  Y.all('button').plug(Y.Plugin.Button);
  Y.one('#CancelButton').on('click', function () {
    Y.config.win.location = '/Administration/Department/List';
  });
});

最后，您可以通过阻止按钮的默认操作来破解Y.Button小部件的行为：

var cancelButton = new Y.Button({
  srcNode: '#CancelButton',
  on: {
  'click': function (e) {
      e.preventDefault();
      Y.config.win.location = '/Administration/Department/List';
    }
  }
}).render();

YUI3按钮单击事件的作用类似于提交类型而不是按钮类型

2 个答案: