Кнопка Отмена в форме - PullRequest
Новая
       27

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

12 голосов
/ 28 марта 2012

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

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

        }

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

Ответы [ 9 ]

27 голосов
/ 28 марта 2012

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

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

или

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

4 голосов
/ 08 июля 2014

Множество ответов работали в любом из браузеров, chrome или т. Д., Но не во всех.

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

<input type="button" value="Cancel" onclick="location.href='@Url.Action("Index","Home")';"/>
4 голосов
/ 30 июня 2013

Это моя кнопка 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 голосов
/ 05 июля 2012

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

<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
2 голосов
/ 28 марта 2012 
<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 голосов
/ 28 марта 2012

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

Мне нравится подход Адауто, потому что он дает вам гораздо больший контроль над разметкой. Помощники 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>

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

1 голос
/ 28 марта 2012 
<a href="@Url.Action("CancelBid", "Auction")"><img src="../../Content/css/img/btn-submit.png" class="btn-form" /></a>
0 голосов
/ 30 июля 2018 
     <asp:Button runat="server" class="btn btn-danger"
       CausesValidation="false" onclick="Cancel_Click" Text="Cancel"/>


     protected void Cancel_Click(object sender, EventArgs e)
     {
        Response.Redirect("Test.aspx");
     }
0 голосов
/ 19 декабря 2016

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

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

...