在执行任务时更新 asp.net razor 中的 textarea

Question

我正在使用 asp.net mvc 4 razor，我有一个主视图，其中包含一些复选框和一个提交按钮。这些复选框指示要执行的任务。用户通过复选框选择要执行的任务，然后通过单击提交按钮启动流程。

单击提交按钮后，将调用与此视图关联的控制器。在控制器中，我想执行以下操作：

1) 打开另一个具有文本区域的不同视图。 2）当控制器执行用户选择的任务时，我想更新刚刚打开的新视图的文本区域（步骤 1）。 3）当控制器完成任务时，我想留在刚刚打开的新视图中（步骤 1）等待用户通过按钮操作（返回上一个主视图）。

注意：textarea的更新是同步的。

例如：

控制器：

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 ¿?
}

刚刚打开的新视图的文本区域中的输出将是：

- Textarea content at the end of the process -

Beginning tasks...

Doing task #1...
Doing task #2...
Doing task #3...
...
Doing task #N...

Tasks completed.

我怎样才能以简单的方式做到这一点？我不想使用任何第三方框架，因为这个网络应用程序非常少。

为方便起见，textarea 可以在同一个主视图中，而不是在另一个不同的新视图中。

第一次尝试（AminSaghi 解决方案）：

主视图现在具有以下方面（简化为 2 个任务）： （在尝试实施时看到最后我的问题）

@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>

控制器（\Controllers 下的TestsController.cs）：

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);
  }
}

型号：

public class ViewModel
{
    public bool task01{ get; set; }
    public bool task02{ get; set; }
}

我不明白的事情，我不知道该怎么做：

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

一种方法是将您的操作方法分成单独的任务：

public ActionResult PerformTasks(ViewModel model)
{
    //
}

public ActionResult Task1(string param1, string param2, ...)
{
    //
}

public ActionResult Task2((string param1, string param2, ...)
{
    //
}

// and so on...

然后，在您看来，将它们中的每一个都放入其上一个任务 ajax 请求的 ajax success 选项中：

$.ajax({
    url: "/Controller/PerformTasks/",
    type: 'POST',
    data: $("#frm").serialize(),
    success: function() {            
        perFormTask1();
    },
    beforeSend: function() { 
        $("#divStatus").append('<br/>Begginig tasks...<br/>'); 
    }            
});

而函数performTask1可以如下：

$.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/>'); 
    }            
});

其他任务等等……

所以，半完整的操作方法如下：

1) 像这样更改您的Html.BeginForm()：

@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) 将以下脚本添加到您的视图中：

<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>