Answered by:
ASP.NET MVC 4 - AJAX function not being called

Question
-
I am using asp.net mvc 4 razor and I have a main view that has some checkboxes and a submit button. Those checkboxes indicates the tasks to be performed. User selects the tasks to be performed through the checkboxes and then he launch the process by clicking on the submit button. I have a div block or textarea on which I want to put the progress of the action in the controller.
Once the submit button is clicked, the controller associated to this view is called.
For example:
Controller:
public ActionResult PerformTasks(ViewModel model) { // model contains the values of the checkboxes. With this I know which tasks to perform. UpdateTextArea("Beginning tasks..."); // ##### Do first task UpdateTextArea("Doing task #1..."); // Do some stuff for task #1 // ##### Do second task UpdateTextArea("Doing task #2..."); // Do some stuff for task #2 (...) // ##### Doing last task UpdateTextArea("Doing task #N..."); // Do some stuff for task #N UpdateTextArea("Tasks completed."); // At the end of the process, new view just opened with contains the textarea // must remain to user action. return ¿? }
The Output in the textarea or div for the new view just opened would be:
- Textarea content at the end of the process - Beginning tasks... Doing task #1... Doing task #2... Doing task #3... ... Doing task #N... Tasks completed.
so I have implemented the following, by spliting the main actions in several ones in the controller:
@using (Html.BeginForm( "PerformTasks", "Tests", FormMethod.Post, htmlAttributes: new { id = "frm" })) { (...) @Html.CheckBoxFor(m => m.task01)<span>Task 1</span><br /> @Html.CheckBoxFor(m => m.task02)<span>Task 2</span><br /> (...) <input type="submit" value="Do Tasks" /> <div id="divStatus"> </div> } <script> // First ajax script $("#frm").submit(function (event) { $("#frm").validate(); if ($("#frm").valid()) { $.ajax({ url: "/Tests/PerformTasks/", type: 'POST', data: $("#frm").serialize(), success: function() { perFormTask1(); }, beforeSend: function() { $("#divStatus").append('<br/>Begginig tasks...<br/>'); } }); event.preventDefault(); } }); // second ajax script function performTask1() { $.ajax({ url: "/Tests/Task1/", type: 'POST', data: $("#frm").serialize(), success: function() { $("#divStatus").append('Task1 completed.<br/>'); perFormTask2(); }, beforeSend: function() { $("#divStatus").append('<br/>Begginig task 1...<br/>'); } }); }; function performTask2() { $.ajax({ url: "/Tests/Task2/", type: 'POST', data: $("#frm").serialize(), success: function() { $("#divStatus").append('Task2 completed.<br/>'); }, beforeSend: function() { $("#divStatus").append('<br/>Begginig task 2...<br/>'); } }); }; </script>
Controller (TestsController.cs under \Controllers):
public class TestsController : Controller { [HttpPost] public ActionResult PerformTasks(ViewModel model) { // Nothing to do here, tasks are done individually in the methods below. // To stay in the same page after submit button is clicked return Redirect(this.Request.UrlReferrer.AbsolutePath); } [HttpPost] public ActionResult Task1(ViewModel model) { // Task 1 should be done if checkbox in the main view is checked, otherwise not. bool doTask1 = model.task01; if (doTask1 ) { // Do some stuff } // To stay in the same page after submit button is clicked return Redirect(this.Request.UrlReferrer.AbsolutePath); } [HttpPost] public ActionResult Task2(ViewModel model) { // Task 2 should be done if checkbox in the main view is checked, otherwise not. bool doTask2 = model.task02; if (doTask2) { // Do some stuff } // To stay in the same page after submit button is clicked return Redirect(this.Request.UrlReferrer.AbsolutePath); } }
The view model:
public class ViewModel { public bool task01{ get; set; } public bool task02{ get; set; } }
I have below issues :
- I should put <script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" type="text/javascript"> instead of <script> because if not, I get the error message javascript '$' is not defined
- this line $("#frm").submit(function (event) { ... // body ... } is not being executed so neither the rest of actions on this completes. And so event complete of the first script is not being reached.
Any ideas?
Thursday, September 19, 2013 2:29 PM
Answers
-
Hi,
Please post your question in ASP.NET forum for better responses.
Thanks for your understanding.
Caillen
<THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
Thanks
MSDN Community Support
Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.Friday, September 20, 2013 6:57 AM