Cancel button in form

Question

I have a cancel button in a form:

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

        }

The issue is I want this button to go to a particular view when I click on it. How do I do this?

Hustler

Answer 1

Either you can convert the Cancel button as an anchor tag with @Html.ActionLink helper method and apply a css class which makes the link to looks like a button and then in the controller action for that link, you can return the specific view.

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

or

Use 2 submit buttons in the form. One for real submit and one for the cancel. and in your controller action, check which button called the action method. You can read more about it here in this answer.

Osmosis

Answer 2

Lot of the answers worked in either of the browsers, chrome or ie but not all.

This worked in all -

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

Dockhand

Answer 3

This is my button 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>

Then to customize the onclick attribute in some views I do this:

<script>

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

</script>

Paludal

What is Localization.Cancel ? – Chandelier

Note that window.history.back() won't work if the form is reloaded (postback). It will just take you back to the earlier version of the form. – Chandelier

@MatthewLock it's a localization string that comes from a .resx file. About the reloading, you're absolutely right... it does not work in all cases, but it is ok. – Paludal

Answer 4

Or a styled submit button:

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

Then Javascript for cancel button:

<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

Storyteller

Answer 5

So with Shyju's appraoch, you use the built in MVC ActionLink helper. Doing this, you'll need to have any images or icons done through css. However, this is much more cachable, especially if you use base64 strings for your images in css.

I like Adauto's approach because it gives you much more control of the markup. MVC Html Helpers are nice, but they still seem to have their heads in the WebForms mindset of "don't worry about it, we'll take care of it for you".

The one thing I would add is Url.Content.

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

It's never really a good idea to make your views have to know the location of content relative to it's location.

Sarver

Thank you! I focused on the answer and forgot the rest (Url.Content). – Barker

Answer 6

<a href="/Auction/[ActionName]">
    <input type="image" src="@Url.Content("~/Content/css/img/btn-cancel.png")" class="btn-form" />
</a>

if you want to preserve its look as a button, you could do something like this:

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

where [ActionName] is the name of the action that will return your desired view.

Squeegee

Answer 7

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

Barker

Answer 8

I ended up making a helper so I could reuse the cancel button. I added a js confirm in case people click the cancel button by accident after filling in the form.

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

I then call it like so:

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

If you are really keen you could try and detect the dirty state of the form too and only show the confirm dialog if the form had been changed.

Chandelier

Answer 9

     <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");
     }

Bucky

This is web forms, not MVC – Dyanna