Question

我使用的是asp.net mvc 4 razor，我有一个主视图，它有一些复选框和一个提交按钮。这些复选框表示要执行的任务。用户通过复选框选择要执行的任务，然后通过单击提交按钮启动该过程。

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

1）打开另一个具有textarea的不同视图。 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输出将是：

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

Controller（\ 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>

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

1 个答案: