7

ショートバージョン:

入力ボタン (送信) とアンカー タグを取得して、CSS を使用し、Javascript を使用せずに同じものを視覚的にレンダリングする方法を知っていますか?

ロングバージョン：

ASP.NET MVC アプリケーションを開発しています。このサイトには、モデルの詳細を表示したり、モデルを作成または更新したりするためのページが含まれています。ページ アクションはフォームの下部にあり、通常はUpdateとCancelまたはEdit、DeleteとList (詳細ビュー ページの場合) が含まれます。Update、Edit、およびDeleteアクションはフォームからサーバーにデータを投稿しますが、CancelおよびListアクションはアクションは、適切な GET リクエストによって処理されます。私の設計目標の 1 つは、Javascript が無効になっている場合でも、Javascript が有効になっている場合と同じようにサイトが機能するようにすることです。また、要素がポストバックを引き起こすか、GET 要求を開始するかにかかわらず、UI 要素が視覚的に同じようにレンダリングされるようにしたいと考えています。

Javascript がなくてもフォーム送信を機能させるには、送信ボタンを使用する必要があると思います。CSS を使用して、ボタンの視覚的なスタイリングをオーバーライドして、SO ページの上部にある「ボタン」のようにレンダリングします。GET リクエストを生成するアクションをアンカー タグで処理したいのですが、これらのタグとスタイル付きボタンを同じようにレンダリングするのに問題がありました。配置とフォントサイズに問題があるようです。私はそれらを近づけることができましたが、同一ではありませんでした.

EDIT : ボタンとアンカーを使用したスタイルの違いには、バウンディング ボックス内のベースラインに対して同じ位置にレンダリングするフォントを取得できず、コンテナに対して同じサイズと配置でレンダリングするバウンディング ボックス自体を取得できないことが含まれます。私の微調整に関係なく、物事はいずれかの方法でほんの数ピクセルずれていました. あなたがそれを機能させることができたなら、私に知らせてください。それが可能だということを知っていれば、それが機能するようになるまで試し続けることが容易になります。

私が試したことの 1 つは、フォーム ボタンのようなスタイルのボタンの周りに GET アクションをラップすることでした。これは Firefox ではうまくいきましたが、IE7 ではうまくいきませんでした。IE7 でそのようなボタンをクリックしても、クリックがアンカーに反映されませんでした。私が思いついたのは、必要なアクションに関連付けられた method="GET" を使用して、GET 用の新しいフォームを作成することです。location.hrefこれを、目的のアクションの URL に設定する onclick ハンドラーを持つ送信ボタンにラップします。これは、フォームが別のフォームにネストされている場合でも、視覚的に同じようにレンダリングされ、機能しているように見えます。ちょっとした問題は、Javascript が無効になっている場合、私の GET URL には、?必要なきれいな URL ではなく、最後に a が含まれていることです。

私が知りたいのは、他の誰かがこれを別の方法で解決したかどうかです。他に試すことができるアイデアはありますか？?Javascriptがオフになっているときにリクエストが投稿として送信されたときにGET URLを修正する方法はありますか?

詳細ビューからの以下のサンプル コード。onclick ハンドラーを JavaScript 経由で追加することもできます (そして間違いなく追加する必要があります) が、インラインで行うと実際のコードは読みやすくなります。以下のすべてのマークアップを生成するために、HtmlHelper 拡張機能を使用しています。読みやすくするために再フォーマットしました。

    <form action="../Edit/2" class="inline-form" method="get">
        <input class="button"
               onclick="location.href='../Edit/2';return false;"
               value="Edit"
               type="submit" />
    </form>
    <form action="../Delete/2" class="inline-form" method="post">
         <input class="button"
                value="Delete"
                type="submit" />
    </form>
    <form action="../List" class="inline-form" method="get">
        <input class="button"
               onclick="location.href='../List';return false;"
               value="List Donors"
               type="submit" />
    </form>
4

1 に答える 1

10

ボタンタグのスタイリングに関するこの記事をチェックしてください。とタグの両方を同様にレンダリングするための CSS が含まれており、ボタンにアイコンを許可するという副作用もあります。

于 2009-02-13T21:17:21.613 に答える