locked
ASP.NET MVC 4 - AJAX function not being called RRS feed

  • 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 :
    1. 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
    2. 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?



    • Edited by rrodri Thursday, September 19, 2013 2:32 PM
    • Moved by Caillen Friday, September 20, 2013 6:58 AM
    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.

    • Proposed as answer by Just Karl Friday, September 20, 2013 7:42 PM
    • Marked as answer by Just Karl Friday, September 27, 2013 3:49 PM
    Friday, September 20, 2013 6:57 AM