CODEWITHSUNDEEP
javascriptasp.netajaxasp.net-mvc
peanut
peanut

Reputation: 283

ASP.NET MVC - AJAX Submit Form does not fire appropriate event

In my personDetails.cshmtl file, I have the following form: 

<form id="userUpdateForm" method="post">
    <fieldset>
        <legend>User Details</legend>
        <input type="checkbox" name="authorisedCheckbox" value="Authorised" id="authCheck" />Authorised<br />
        <input type="checkbox" name="enabledCheckbox" value="Enabled" id="eCheck" />Enabled<br />
    </fieldset>
    <fieldset>
        <input type="hidden" name="personId" id="idCheck" value='@ViewData["personId"]'>
    </fieldset>
    <input type="submit" value="Save Changes" name="Save Changes">
    <button type="button">Cancel</button>
</form>

I then have Javascript further down the page as follows:

$('#userUpdateForm').submit(function (e) {
        var personDetails = {
            Enabled: $('#eCheck').val(),
            Authorised: $('#authCheck').val(),
            Id: $('#idCheck').val()
        };

        $.ajax({
            type: "POST",
            url: '<%= Url.Action("submitForm", "Home") %>',
            data: JSON(personDetails),
            //contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (result) {
                '@Url.Action("Index", "Home")';
            },
            error: function (result) {
                alert("A problem occured when submitting the form.");
            }
        });

        return false;
    });

The Javascript is meant to fire when the Submit button is hit. First the method 'submitForm' in the 'HomeController' is fired, before it redirects back to 'Index' also in the 'HomeController', which just outputs a view.

The 'submitForm' currently resembles the following: 

       [HttpPost]
        public ActionResult submitForm(JsonResult jsonForm)
        {
            System.Diagnostics.Debug.WriteLine("made it here");
            System.Diagnostics.Debug.WriteLine(jsonForm);
            return View();
        }

So my question is: what am I missing with the current form to make the AJAX event fire? I'm fairly sure it is not currently firing as there is no alert and nothing output on the console from the method it's supposed to hit.

I would rather not change the form itself too much as I currently have another bit of Javascript that sets the checkboxes to checked onload where appropriate.

EDIT: I fixed the method with Stephen Muecke's advice. What I'm trying to do here is: hit button -> submit details to my submitForm method -> submitForm method takes details and does some stuff in the database -> return success when finished -> on success, redirected from personDetails.cshtml to index.cshtml.

Upvotes: 1

Views: 611

Answers (2)

Ashiquzzaman
Ashiquzzaman

Reputation: 5284

Example:

Model:

public class MyModel{
        public string Id {get;set;}
        public string Authorised {get;set;}
        public string Enabled {get;set;}
    }

Action:

[HttpPost]
        public ActionResult submitForm(MyModel model)
        {
            System.Diagnostics.Debug.WriteLine("made it here");
            System.Diagnostics.Debug.WriteLine(jsonForm);
            return View();
        }

Script:

$('#userUpdateForm').submit(function (e) {
        var personDetails = {
            Id: $('#idCheck').val(),
            Authorised: $('#authCheck').val(),
            Enabled: $('#eCheck').val()
        };

        $.ajax({
            type: "POST",
            url: '@Url.Action("submitForm", "Home")',
            contentType: "application/json",
            data: JSON.stringify({ model: personDetails })
            success: function (result) {
                window.location.href = "/home/index/";              
            },
            error: function (result) {
                alert("A problem occured when submitting the form.");
            }
        });

        return false;
    });

Upvotes: 1

Mannan Bahelim
Mannan Bahelim

Reputation: 1365

You need to create one other class that should contain all the properties that you are posting to submitForm action method.

currently you are using JsonResult class that doesn't contain the properties that you trying to post so here ModelBinder will not bind the data. reference Model Binder..Great articles ...love it .... 

   public class personDetails {
        public string Enabled {get;set;}
        public string Authorised {get;set;}
        public string Id {get;set;}
    } 
[HttpPost]
        public ActionResult submitForm(personDetails ObjpersonDetails)
        {
            System.Diagnostics.Debug.WriteLine("made it here");
            System.Diagnostics.Debug.WriteLine(jsonForm);
            return View();
        }

Upvotes: 2

Related Questions