Cancel button in MVC

Question

I have a panel within a form that has 3 buttons save, edit and cancel.
When the user clicks on edit, the labels inside the panel change to textboxes wherein the user can edit the content. This part is done.
Now if the user has edited the content, but does not wish to save it, he clicks on cancel. When he does so, the edited text will be replace with the original content of the labels(data comes from the model).
I have followed the accepted answer given here

Controller:

[HttpPost]
    public ActionResult Submit(int id, string actionType)
    {
        var model = new CustomerDetailsViewModel();
        var custid = db.Customers.Find(id);
        if(actionType == "Cancel")
        {
            model.Company = custid.Company;
            model.Address = custid.Address;
            model.FullName = custid.FirstName + " " + custid.LastName;
            model.EMail = custid.EMail;
            model.Phone = custid.Phone;
            model.EntryDate = custid.EntryDate;
            model.LastInterestShown = custid.LastInterestShown;
            model.ID = custid.ID;
            model.Status = custid.Status;
        }
        return PartialView(model);
    }

View:

<input type="submit" value="Cancel" id="btncancel" name="actionType" class="btn btn-default" />

JS:

        $("#btnCancel").click(function(e){
        e.preventDefault();
        $.ajax({
            url: '/Client/Submit',
            type: 'POST',
            async: false
    });
});

Can someone tell me where am I going wrong?

Why are you making an ajax call when the button is clicked? If you want to reset the values in case they have been edited, then you could use `window.location.reload()` to refresh the page, or use javascript to get the `defaultValue` (the initial value when the page was first rendered) of each input and reset the values or just use a `` button — , Jun 01 '16 at 12:47
why the ajax type = GET and controller web action is HTTP POST? And also which controller is expected to execute when the ajax call made? — Sharukh k shaji, Jun 01 '16 at 12:50
How are you converting label->textbox? Just go back the other way (most likely hide the inputs and show the original labels). — freedomn-m, Jun 01 '16 at 13:00
What's the actual question other than "where am I going wrong" - going wrong with what? — freedomn-m, Jun 01 '16 at 13:01
@freedomn-m see [this](http://stackoverflow.com/questions/37483068/issues-with-converting-label-to-input-field-on-button-click/37483280?noredirect=1#comment62531145_37483280) — Sumedha Vangury, Jun 01 '16 at 13:02
@sumedha ugh - that question is for pure javascript. You're using MVC - so just put both the LabelFor and the EditorFor on your view, with one hidden and toggle them / copy values between. Don't mess about adding controls to your form as they won't have the correct attributes (eg validation) — freedomn-m, Jun 01 '16 at 13:05
@Sumedha Why you not passing header parameters id and actionType? Could you please debug and show the error? — Sharukh k shaji, Jun 01 '16 at 13:06
@Sumedha What Kind of scenario are you using? is it for single record or multiple record. can you able to show me exact requirement — Dinesh J, Jun 01 '16 at 14:35
I followed the suggestion given by @freedomn-m using EditorFor and DisplayFor and toogle between them as required. I referred the solution given [here](http://stackoverflow.com/questions/21817928/switch-between-editorfor-and-displayfor?rq=1) — Sumedha Vangury, Jun 02 '16 at 11:47

Emre Bolat · Answer 1 · 2016-06-01T13:20:35.013

0

You are sending an ajax request with type: "GET" and to url: "/Client/Cancel"

If you don't have a seperate

public ActionResult Cancel() {...}

field in your controller, this ajax don't work.

What you need to do is;

var postdata = { "id": id-here, "actionType": actionType-here  };

$("#btnCancel").click(function(e){
        e.preventDefault();
        $.ajax({
            url: '/Client/Submit',
            type: 'POST',
            data: JSON.stringfy(postdata),
            async: false
    });
});

in your ClientController.

edited Jun 01 '16 at 13:20

answered Jun 01 '16 at 12:51

Emre Bolat

4,316
5
29
32

yes sorry my mistake for posting the wrong code, I edited my question and corrected my code according to your answer but it still does not work – Sumedha Vangury Jun 01 '16 at 12:59
Because you are not sending any data to controller. I editted my post how you should prepare your data and send it to controller with ajax post. You should change **id-here** and **actionType-here** parts. – Emre Bolat Jun 01 '16 at 13:21

score 0 · Answer 2 · answered Jun 01 '16 at 13:45

You don't need to use AJAX to reset the input fields to their original data. Assuming you've passed your model data to your view, you can use hidden inputs to store the original values and later on get them back when the user clicks on the cancel button (just use a regular button).

View:

<input type="hidden" name="tempCompany" id="tempCompany" value="@Model.Company"> 
<input type="hidden" name="tempAddress" id="tempAddress" value="@Model.Address"> 
<input type="hidden" name="tempFullName" id="tempFullName" value="@Model.FullName">

JS:

<script>
    $("#btnCancel").click(function (e) {
        $('#Company').val($('#tempCompany').val());
        $('#Address').val($('#tempAddress').val());
        $('#FullName').val($('#tempFullName').val());
    });    
</script>

Cancel button in MVC

2 Answers2