Return MVC view while submitting serialized data(MVC, Ajax)

Question

I am new to mvc I have this AJax and Controller,

i need to return a view that say "Email Sent"

for now the controller redirected me to the

http://localhost:1365/?Name=as&Adress=adsads&city=a&state=as&zip=as&phone=asas&Message=a

Ajax Call

<script>
        $(function () {
            $("#JqAjaxForm").submit(function () {
                debugger;
                var sdata = $("#JqAjaxForm").serialize();

                alert(sdata);

                senddata = { "daye": sdata };

                $.ajax({

                    url: '/Email/emaildata',
                    async: false,
                    type: "POST",
                    data: JSON.stringify(senddata),
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    error: function (jqXHR, textStatus, errorThrown) {
                       alert("FAIL: " + errorThrown);
                    },
                    success: function (data, textStatus, jqXHR) {
                        alert("Email Sent");
                    }
                });
            });
        });
    </script>

Controller

// GET: /Email/

   public ActionResult emaildata(string Daye)
    {
        var a = Daye;

        return View();
    }

If you are trying to navigate away from the email form then don't do an AJAX call, do a standard form submission, and have your action return `RedirectToAction("EmailSent")`. If you don't want navigation return a `PartialView("EmailSent")` and in your AJAX success handler replace div content `$("#resultDiv").html(result)`. — Jasen, Jun 10 '15 at 21:08
"If you are trying to navigate away from the email form then don't do an AJAX""" Have you any alternate to post serilazed data to the mvc controller ? — Jot Dhaliwal, Jun 10 '15 at 21:12
actually for now i have to collect the data from contact form having feilds (Name , Email, Address) to the controller , — Jot Dhaliwal, Jun 10 '15 at 21:18
laterly i will append this data to the email body and sent a mail — Jot Dhaliwal, Jun 10 '15 at 21:18
Then you don't need to serialize this yourself in javascript. Just POST the form. In most cases I would only post a serialized json string if I didn't handle the data myself and passed it to a 3rd party service. — Jasen, Jun 10 '15 at 21:22
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/80228/discussion-between-jot-and-jasen). — Jot Dhaliwal, Jun 10 '15 at 21:22

Jasen · Accepted Answer · 2015-06-10T23:22:05.493

You don't need json serialization nor AJAX. First create a class to hold your form fields.

public class EmailForm
{
    public string Name { get; set; }
    public string Address { get; set; }
    public string Message { get; set; }
}

Then your form will match the EmailForm property names to the input names.

<form action="/Email/emaildata" method="POST">
    <input type="text" name="Name" />
    <input type="text" name="Address" />
    <textarea type="text" name="Message"></textarea>
    <button type="submit">Send</button>
</form>

Your POST action takes the EmailForm as a parameter and the values will be bound for you.

[HttpPost]
public ActionResult emaildata(EmailForm form)
{
    // access properties e.g. form.Name
    // add send email code here

    TempData["emailform"] =  form;
    return RedirectToAction("EmailSent");
}

Then return a redirect response to the browser. Use TempData dictionary to pass the data to the redirected action.

[HttpGet]
public ActionResult EmailSent()
{
    var form = TempData["emailform"] as EmailForm;
    return View(form);
}

Now your MVC view result page can use the original data

@model MyNamespace.EmailForm

Email Sent!
<ul>
    <li>@Model.Name</li>
    <li>@Model.Address</li>
    <li>@Model.Message</li>
</ul>

Once you have this working If you want to use ajax for a bells and whistles "No Postback" experience look at @Ajax.BeginForm http://stackoverflow.com/questions/5410055/using-ajax-beginform-with-asp-net-mvc-3-razor — Peter, Jun 11 '15 at 03:40

Return MVC view while submitting serialized data(MVC, Ajax)

1 Answers1