Кнопка отмены в форме

У меня есть кнопка отмены в форме:

@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" />

        }

Проблема в том, что я хочу, чтобы эта кнопка переходила к определенному виду, когда я нажимаю на нее. Как это сделать?

Ответ 1

Либо вы можете преобразовать кнопку "Отмена" в качестве тега привязки с помощью хелпер-метода @Html.ActionLink и применить класс css, который делает ссылку похожей на кнопку, а затем на действие контроллера для этой ссылки, вы можете вернуть конкретную вид.

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

или

Используйте 2 кнопки отправки в форме. Один для реального submit и один для отмены. и в действии вашего контроллера проверьте, какая кнопка называется методом действия.  Вы можете прочитать об этом здесь, в этом ответе.

Ответ 2

Это моя кнопка 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>

Ответ 3

Или стильная кнопка отправки:

<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

Ответ 4

Большая часть ответов работала в любом из браузеров, хром или т.д., но не все.

Это работало во всех -

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

Ответ 5

Итак, с оценкой Shyju вы используете встроенный помощник MVC ActionLink. Для этого вам нужно будет иметь любые изображения или значки, сделанные через css. Тем не менее, это гораздо более cachable, особенно если вы используете base64 строки для ваших изображений в css.

Мне нравится подход Adauto, потому что он дает вам гораздо больше контроля над разметкой. MVC Html Помощники хорошие, но они все еще, кажется, имеют свои головы в мышлении WebForms: "Не беспокойтесь об этом, мы позаботимся об этом для вас".

Единственное, что я хотел бы добавить, это Url.Content.

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

Никогда не рекомендуется, чтобы ваши взгляды знали местоположение содержимого относительно его местоположения.

Ответ 6

<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] - это имя действия, которое вернет вам нужный вид.

Ответ 7

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

Ответ 8

В итоге я создал помощника, чтобы повторно использовать кнопку отмены. Я добавил подтверждение 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" ))

Если вы действительно заинтересованы, вы можете попробовать и обнаружить грязное состояние формы и показать диалог подтверждения, если форма была изменена.