MVC 3 Razor - Ajax.BeginForm OnSuccess

Question

I am new to MVC and I am trying to refresh my page after submitting my form; but it does not work. I am only trying to hide the form and show the contents of the OnSuccess div.

My code is:

<script type="text/javascript"> $(document).ready(function () { $('#confirmation').hide(); }); function MessageConfirmation() { $('#confirmation').show('slow'); $('#contactForm').hide('slow'); } </script> @using (Ajax.BeginForm("Index", new AjaxOptions { OnSuccess = "MessageConfirmation" })) { <fieldset id="contactForm"> <legend>Message</legend> <p> @Html.Label("Email", "Email"): @Html.TextBox("Email") </p> <p> @Html.Label("Subject", "Subject"): @Html.TextBox("Subject") </p> <p> @Html.Label("Message", "Message"): @Html.TextArea("Message") </p> <p> <input type="submit" value="Send" /> </p> </fieldset> <p id="confirmation" onclick="MessageConfirmation()"> Thanks!!! </p> } 

Any alternative solutions / ideas are welcome.

Thanks in advance!

Answer 1

The description of the problem does not work, which is more suitable for people who do not know / do not care about how the computer works, and not about software developers. Software developers usually accurately describe the problem they are facing. They send the exact stack stack error / exception message that they have.

It is said that you ask for alternative solutions, here are mine: do not use MS Ajax.* helpers , use jquery directly and unobtrusively like this

 <script type="text/javascript"> $(function () { $('#confirmation').hide(); $('form').submit(function() { $('#confirmation').show('slow'); $(this).hide('slow'); return false; }); }); </script> @using (Html.BeginForm()) { <fieldset id="contactForm"> <legend>Message</legend> <p> @Html.Label("Email", "Email"): @Html.TextBox("Email") </p> <p> @Html.Label("Subject", "Subject"): @Html.TextBox("Subject") </p> <p> @Html.Label("Message", "Message"): @Html.TextArea("Message") </p> <p> <input type="submit" value="Send" /> </p> </fieldset> } <p id="confirmation"> Thanks!!! </p> 

Notice that the confirmation element has been taken out of the form from the form.

Answer 2

Do you have all the correct js files referenced by your project? In MVC3, they moved away from MS Ajax files. If I remember correctly, unobtrusive javascript should be enabled by default, so you should reference the following files: jquery.js, jquery.validate.js, jquery.valudate.unobtrusive.js, jquery.unobtrusive-ajax.js

With these link files, everything should be fine.

PS There's a very good Brad Wilson blog post explaining the details of unobtrusive ajax in MVC3 and how it all works. Have a look here: http://bradwilson.typepad.com/blog/2010/10/mvc3-unobtrusive-ajax.html

Answer 3

Make sure you can move on to your action method. Also add a failure handler and check if it failed.

Unforeseen features should also be included, and you should add unobtrusive AJAX MVC scripts for MVC 3 and razors.

NTN.

Answer 4

You can use jquery trigger

 $("#confirmation").trigger('click'); 

Since you have onclick method on div