Updating textarea in asp.net razor while performing tasks - asp.net-mvc

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.
Once the submit button is clicked, a the controller associated to this view is called. Within the controller I want to do the following:
1) Open another different view which has a textarea.
2) While controller is performing the tasks selected by the user, I want to update the textarea of the new view just opened (step 1).
3) When controller finishes the tasks I want to stay in the new view just opened (step 1) to wait user action through buttons (return to the previous main view).
Note: The update of the textarea is synchronous.
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 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.
How can I do this in an easy way? I do not want to use any third-party frameworks as this web app is very little.
To make it easier, the textarea could be in the same main view rather than in another different new view.
FIRST ATTEMPT (AminSaghi solution):
The main view has the following aspect now (simplified to 2 tasks):
(see at the end my issues when trying to implement it)
#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 type="text/javascript">
// 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 model:
public class ViewModel
{
public bool task01{ get; set; }
public bool task02{ get; set; }
}
Things I do not understand and I do not kwnow how to do:
1.- Once submit button is clicked, how to launch first ajax script in order to start the tasks sequence?
2.- Action PerformTasks as I understand should be leave empty, only return to the same page line should be put, am I right, because it
only launches the others in the ajax script.
3.- What is #frm in the ajax script? should i replace with something?
4.-I think for the last task, in this case task 2, is not necessary to do another ajax script as this is the last, Am I right?
5.-If some task fails, for example task 1, below tasks should be done, in this case task 2. How to do this?
6.-For each task I should pass some data, the status of all checkboxes and the within each action in the controller check if
this task has been checked to be done. If so, task is performed, if
not, task is not performed. How to pass this data to tasks, 1 and 2?
through data element in ajax?

Answer 1

One way is to brick your action method into separate task:
public ActionResult PerformTasks(ViewModel model)
{
//
}
public ActionResult Task1(string param1, string param2, ...)
{
//
}
public ActionResult Task2((string param1, string param2, ...)
{
//
}
// and so on...
Then, in your view, put each of them into the ajax success option of its previous task ajax request:
$.ajax({
url: "/Controller/PerformTasks/",
type: 'POST',
data: $("#frm").serialize(),
success: function() {
perFormTask1();
},
beforeSend: function() {
$("#divStatus").append('<br/>Begginig tasks...<br/>');
}
});
And function performTask1 can be like the following:
$.ajax({
url: "/Controller/Task1/",
type: 'POST',
data: ... // here or by query string,
success: function() {
$("#divStatus").append('Task1 completed.<br/>');
perFormTask2();
},
beforeSend: function() {
$("#divStatus").append('<br/>Begginig task 1...<br/>');
}
});
And so on for other tasks...
So, the semi-complete how-to is like the following:
1) Change your Html.BeginForm() like this:
#using(Html.BeginForm(
"action", "controller", FormMethod.Post,
htmlAttributes: new { id = "frm"}))
{
// in fact, in our situation,
// there is no matter to put correct values in action and controller parameters
// because we'll override them and do our job through ajax...
}
2) Add the following script into your view:
<script>
$("#frm").submit(function (event) {
$("#frm").validate();
if ($("#frm").valid()) {
$.ajax({
url: "/Controller/PerformTasks/",
type: 'POST',
data: $("#frm").serialize(),
success: function () {
perFormTask1();
},
beforeSend: function () {
$("#divStatus").append('<br/>Begginig tasks...<br/>');
}
});
event.preventDefault();
}
});
function performTask1() {
$.ajax({
url: "/Controller/Task1?param1=data1&param2=data2 ...",
type: 'POST',
success: function() {
$("#divStatus").append('Task1 completed.<br/>');
perFormTask2();
},
beforeSend: function() {
$("#divStatus").append('<br/>Begginig task 1...<br/>');
}
});
}
// and also for other task, add similar performTask functions...
</script>