1

asp.net mvc 4 razor を使用しており、いくつかのチェックボックスと送信ボタンがあるメイン ビューがあります。これらのチェックボックスは、実行するタスクを示します。ユーザーはチェックボックスで実行するタスクを選択し、送信ボタンをクリックしてプロセスを開始します。アクションの進行状況をコントローラに表示したい div ブロックがあります。現在実行中のタスクです。

送信ボタンをクリックすると、最初のスクリプト (メインのスクリプト) が起動され、完了したら次のタスクが実行されます。

問題は、他のスクリプトを順番に呼び出す最初のメイン スクリプトが呼び出されていないことです。

ASP.NET MVC 4 を使用しています

コードの下。

意見：

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

コントローラー (\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. そうでない場合、エラーメッセージ javascript '$' is not defined が表示されるため、代わりに配置する必要があります
  2. このスクリプト $("#frm").submit(function (event) { ... // body ... } は実行されていないため、これに対する残りのアクションも完了しません。したがって、最初のスクリプトのイベント完了は到達していません。

注:コントローラーのアクション PerformTasks に達していることを確認しました。コントローラの他のアクション Task1、Task2 に到達していません。スクリプトでは成功ではなく、完全に試しましたが成功しませんでした。また、JsonResult によって制御されるアクションの ActionResult を置き換えようとしましたが、return Redirect(...) を返して Json("") を返しましたが、成功しませんでした。

Javascript イベント ハンドラーがフォーム送信をインターセプトしていないようです。

何か案は？

生成されたコード:

<form action="/Tests/PerformTasks" id="frm" method="post"><fieldset style="margin-top:20px;margin-left:0px;float:left;"> 
   .... 
   <input type="submit" value="Execute" /> 
   ...
   <div id="divStatus"></div>
   ...
</form>

そして、スクリプトの下：

<script src="/Scripts/jquery-1.7.1.min.js" type="text/javascript">
    alert("Within Script");
    $("#frm").submit(function (event) { .. });
    ...
</script>

スクリプトはここに掲載されているものと同じです。

4

1 に答える 1

1

フォーム送信ハンドラーを document.ready で囲んでいません。フォームが DOM に入る前にアクティブ化されます。

<script type="text/javascript">
    $(document).ready(function(){
        $("#frm").submit(function (event) { 
            var form = $(evt.currentTarget);

            if(!form.validate().valid()) // you'll need to check this line
                return false;

             PerformTask();
             event.preventDefault();
             return false;
        });

    });
</script>

あなたの最初のフォームは完全なポストバックを行っていると思います。フォームの送信中に Chrome のネットワーク タブを監視すると、それが jquery などによって要求されたことがわかる場合は、部分的なポストバックを行っていることがわかります。

h番目

于 2013-09-20T08:15:21.810 に答える