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これにより、そのボタンは送信ボタンのように動作します。

これを機能させるための多くの可能なパスがあります。単純なものから複雑なものまで始めます。1つは、問題を完全に回避し、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を使用したスタイリング要素の例でわかるように、タグでさえ、YUIcss<a>スタイルだけを使用すると素敵なボタンのように見えます。JavaScriptを使用する必要がない場合は、使用しない方がよいでしょう。

2番目のオプションは、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 に答える