web-dev-qa-db-ja.com

フォームのキャンセルボタン

フォームにキャンセルボタンがあります：

@using (Html.BeginForm("ConfirmBid","Auction"))
        {
          some stuff ...

                    <input type="image" src="../../Content/css/img/btn-submit.png" class="btn-form" />
                    <input type="image" src="../../Content/css/img/btn-cancel.png" class="btn-form" />

        }

問題は、このボタンをクリックしたときに特定のビューに移動することです。どうすればよいですか？

c#asp.net-mvc-3buttonrazorcancel-button
13
Sachin Kainth

@ Html.ActionLinkヘルパーメソッドを使用して[キャンセル]ボタンをアンカータグとして変換し、リンクをボタンのように見せるためのcssクラスを適用してから、そのリンクのコントローラーアクションで特定のビューを返すことができます。

@Html.ActionLink("Cancel","Index","Products",null, new { @class="clsButtonFake"})

または

フォームで2つの送信ボタンを使用します。 1つは実際の送信用で、もう1つはキャンセル用です。コントローラアクションで、アクションメソッドを呼び出したボタンを確認します。あなたはそれについてもっと読むことができます ここでこの答えにあります。

27
Shyju

多くの回答がいずれかのブラウザで機能しました。chromeまたは、すべてではありません。

これはすべてうまくいきました-

<input type="button" value="Cancel" onclick="location.href='@Url.Action("Index","Home")';"/>
5
rmdev

これは私のボタンのHTMLです：

<button type="button"
        class="btn btn-inverse"
        id="cancel"
        onclick="window.history.back()">
        <i class="icon-remove icon-large"></i>
        <br />@Localization.Cancel
</button>

次に、いくつかのビューでonclick属性をカスタマイズするために、次のようにします。

<script>

    $(document).ready(function ()
    {
        $("#cancel").
            attr("onClick",
            "document.location.href='@Html.Raw(Url.Action("Index", "Standard",
             new { ManualId = Model.ManualId, ChapterId = Model.ChapterId }))'");
    });

</script>
4
Leniel Maccaferri

またはスタイル付きの送信ボタン：

<input type="submit" value="Save Form" name="Save" class="submit-button btn-form" />

次に、キャンセルボタンのJavascript：

<input type="button" onclick="document.location.href('Home/Index')" value="Cancel" class="cancel-button btn-form" />
// Note: This avoids any of the validation that may happen in the model that 
// normally gets triggered with a submit
3
Nathan
<a href="/Auction/[ActionName]">
    <input type="image" src="@Url.Content("~/Content/css/img/btn-cancel.png")" class="btn-form" />
</a>

ボタンとしての外観を維持したい場合は、次のようにすることができます。

<a href="/Auction/[ActionName]">
    <input type="button" value="Cancel">
</a>

どこ [ActionName]は、目的のビューを返すアクションの名前です。

2
Dmitry Efimenko

したがって、Shyjuのアプローチでは、組み込みのMVCActionLinkヘルパーを使用します。これを行うには、cssを介して画像またはアイコンを作成する必要があります。ただし、これは、特にcssの画像にbase64文字列を使用する場合は、はるかにキャッシュしやすくなります。

Adautoのアプローチは、マークアップをより細かく制御できるので気に入っています。 MVC Html Helpersは素晴らしいですが、WebFormsの考え方には、「心配しないでください。私たちが自動的に処理します」という考え方を持っているようです。

追加するのはUrl.Contentです。

<a href="@Url.Action("CancelBid", "Auction")"><img src="@Url.Content("~/Content/css/img/btn-submit.png" class="btn-form" /></a>

ビューにコンテンツの場所を基準にしたコンテンツの場所を認識させることは、決して良い考えではありません。

2
mccow002
<a href="@Url.Action("CancelBid", "Auction")"><img src="../../Content/css/img/btn-submit.png" class="btn-form" /></a>
1
Adauto

キャンセルボタンを再利用できるように、結局ヘルパーを作成しました。フォームに入力した後、誤ってキャンセルボタンをクリックした場合に備えて、js確認を追加しました。

@helper FormCancelButton(string cancelUrl)
{
    <button type="button" class="btn" onclick="if (confirm('Cancel changes?')) location.href = '@cancelUrl';">Cancel</button>
}

私はそれを次のように呼びます：

@FormCancelButton(Url.Action("Index", "User" ))

本当に熱心な場合は、 フォームのダーティ状態を検出 も試して、フォームが変更された場合にのみ確認ダイアログを表示することができます。

0
Matthew Lock