1

我正在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 上进行测试。

更新：

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

4

2 回答 2

3

我会使用链接，因为您正在重定向到另一个页面。这样做你不需要用 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

于 2012-07-28T14:26:11.580 回答
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 类以及许多其他使更复杂的小部件成为可能的东西。正如您在使用 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();
于 2012-08-02T00:01:11.013 回答