Post with ajax ASP.NET

Question

Controller

    [HttpPost]
    [ValidateAntiForgeryToken]
    public ActionResult Index(Contact contact)
    {
        using (LawContext DB = new LawContext())
        {
            if (ModelState.IsValid)
            {
                DB.Contact.Add(contact);
                DB.SaveChanges();
                return Json("OK");
            }

            return View();
        }
    }

View

                @using (Html.BeginForm("Index", "Contact", FormMethod.Post))
                {
                        @if (!ViewData.ModelState.IsValid)
                        {
                                @Html.ValidationSummary("", new { @class = "alert-danger" })
                        }
                        @Html.AntiForgeryToken()
                            @Html.TextBoxFor(m => m.Lastname, new { @class = "form-control margin-bottom10", @placeholder = "Name" })

                            @Html.TextBoxFor(m => m.Mail, new { @class = "form-control margin-bottom10", @placeholder = "Mail" })

                            @Html.TextBoxFor(m => m.Phone, new { @class = "form-control margin-bottom10", @placeholder = "Phone" })

                            @Html.TextAreaFor(m => m.Message, new { @class = "form-control margin-bottom10", @placeholder = "Message", @rows = "3" })

                            <input type="submit" value="Submit" class="btn btn-darkgray" id="btn_contact" />
                }

JavaScript

$(document).ready(function () {
    $("#btn_contact").click(function () {

        $.ajax(
            {
                type: "POST",
                url: "Contact/Index", 
                data: { 
                    Lastname: $("#Lastname").val(),
                    Mail: $("#Mail").val(),
                    Phone: $("#Phone").val(),
                    Message: $("#Message").val()
                },
                dataType: "json",
                async: true,
                processData: false,
                cache: false,
                contentType: "application/json; charsetset=utf8",
                success: function (data) {
                    alert('success');
                },
                failure: function (data) {
                    alert('failure');
                },
                error: function (data) {
                    alert('error');
                }
            });
    });
});

I do not understand why this is happening Do not normally have to be alerted? How can I do this properly? I would like your help. I have studied many examples. I guess I lost hope I could do without asking.

I would like to work well.

The way you are doing now is you are using the form submit button to call index action on ContactController which returns view that's why empty page with just ok. If you want to use ajax to call the same action try use a normal button give it id btn_contact. The rest of the code looks fine. I haven't tested it, but it should work(pop an alert). — iAM
– iAM, Commented Aug 26, 2017 at 22:05
You making both a an ajax call and a normal submit. You need to cancel the default submit - $("#btn_contact").click(function (e) { e.preventDefault; $.ajax(.... or add return false; as the last line of code in your method. As a side note there is no need to wrap @Html.ValidationSummary() in the if block — user3559349
– user3559349, Commented Aug 26, 2017 at 22:50
In addition, return View(); makes no sense because you never do anything with the view you return — user3559349
– user3559349, Commented Aug 26, 2017 at 22:51
@StephenMuecke When I did not check, the style I gave seemed empty — KYEmr
– KYEmr, Commented Aug 27, 2017 at 8:37
And as a side note, just use data: $('form').serialize(), and remove contentType: "application/json; charsetset=utf8", (the model in your POST method would not even be binding with your current code when you make the ajax POST). You can also remove async: true, (that's the default) — user3559349
– user3559349, Commented Aug 27, 2017 at 8:49

codejockie · Accepted Answer · 2017-08-27 00:12:44Z

Try changing your submit button to:
<input type="button" value="Submit" class="btn btn-darkgray" id="btn_contact" />

Or you can leave it as is and in your Ajax call, do:

$(document).ready(function () {
    $("#btn_contact").click(function (event) {
        event.preventDefault();

        $.ajax(
            {
                type: "POST",
                url: "Contact/Index", 
                data: { 
                    Lastname: $("#Lastname").val(),
                    Mail: $("#Mail").val(),
                    Phone: $("#Phone").val(),
                    Message: $("#Message").val()
                },
                dataType: "json",
                async: true,
                processData: false,
                cache: false,
                contentType: "application/json; charsetset=utf8",
                success: function (data) {
                    alert('success');
                },
                failure: function (data) {
                    alert('failure');
                },
                error: function (data) {
                    alert('error');
                }
            });
    });
});

This is so as to prevent the default behaviour of the submit type button which sends the form to the action url (<form action="contact/index" method="POST" ...) which in your case you don't have.

Collectives™ on Stack Overflow

Post with ajax ASP.NET

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related