ASP MVC多按鈕表單讓JQuery攔截按鈕單擊

我創建了一個基於解決方案here的多鍵表單。ASP MVC多按鈕表單讓JQuery攔截按鈕單擊

我需要jQuery攔截按鈕的單擊事件之一，並用模態對話框提交後手動提交。但是，當我嘗試使用type =「button」時，控制器中的命令值變爲null。我也嘗試在我的JavaScript文件中使用preventDefault（），但是同樣的事情發生。

筆者認爲：

<input id="action1" type="submit" name="command" value="Action One" /> 
<input id="action2" type="submit" name="command" value="Action Two" />

在我的控制器：

if (command == "Action One") 
{ 
    // Do something 
} 
else if (command == "Action Two") 
{ 
    // Do something else 
}

在我的javascript：

$('#action1').click(function (e) { 
    e.preventDefault(); 
    showModalDialog(); 
});

來源

2016-08-05 Patee Gutee

作爲一種變通方法，您可以嘗試folloing：

將相同的CSS class屬性分配給兩個按鈕。
用type="button"代替type="submit"。
添加一個jQuery單擊事件到css名當兩個按鈕都將觸發clicked.Store在變量
顯示模式彈出，並在用戶點擊後，點擊的按鈕值「OK」召控制器操作通過點擊按鈕的值。

聽起來像很多工作，但它非常簡單。只需將以下代碼複製並粘貼到您的解決方案中並運行它。瞭解它是如何工作的並適用於您自己的解決方案。

查看：

<head> 
    <meta name="viewport" content="width=device-width" /> 
    <title>Command</title> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script> 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" /> 
    <script type="text/javascript"> 
     $(function() { 
      var command = ""; 

      $(".command").click(function() { 
       command = $(this).val(); 
       $(".modal-body").empty(); 
       $(".modal-body").html("You selected command - " + command + ".Press OK call the controller..."); 
       $('#myModal').modal('show'); 
      }); 

      $("#btnOK").click(function() { 
       $.getJSON("/Command/MyCommand?command=" + command, function (data) { 
        alert(data); 
       }); 
      }); 
     }); 
    </script> 
</head> 
<body> 
    <input class="command" type="button" id="action1" name="command" value="Action One" /> 
    <input class="command" type="button" id="action2" name="command" value="Action Two" /> 
    <div id="myModal" class="modal fade"> 
     <div class="modal-dialog"> 
      <div class="modal-content"> 
       <div class="modal-header"> 
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
        <h4 class="modal-title" id="myModalLabel">Modal Header</h4> 
       </div> 
       <div class="modal-body"> 
       </div> 
       <div class="modal-footer"> 
        <button id="btnOK" type="button" class="btn btn-primary" data-dismiss="modal">OK</button> 
        <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button> 
       </div> 
      </div> 
     </div> 
    </div> 
</body>

控制器：

public class CommandController : Controller 
{ 
    public ActionResult Index() 
    { 
     return View(); 
    } 

    public JsonResult MyCommand(string command) 
    { 
     System.Diagnostics.Debugger.Break(); 
     return Json(command + " is complete.", JsonRequestBehavior.AllowGet); 
    } 
}

來源

2016-08-06 08:03:41

感謝丹尼斯。我會嘗試你的解決方案。 –

ASP MVC多按鈕表單讓JQuery攔截按鈕單擊

回答

相關問題