如何使用按鈕（非提交）單擊事件來調用我的控制器上的方法？

我覺得這個問題很荒謬，但是在這裏，我試圖做一個非常簡單的ASP.NET MVC 5應用程序。我的第一個很親切。我想有一個按鈕，點擊時會做一些事情，但不會更改用戶的視圖，或者最多返回「已提交電子郵件」消息。如何使用按鈕（非提交）單擊事件來調用我的控制器上的方法？

我的問題是我無法弄清楚如何將按鈕連接到不改變視圖的「事件」或「動作」（即使用@Html.ActionLink()）或是提交按鈕。我找到的每個例子都是一個提交按鈕。

感謝您的任何幫助。

編輯

這仍然不適用於我。我會在下面發佈我的代碼。我的努力是基於這裏和鏈接的文章所說的。此外，僅供參考，我可以使用@ Html.ActionLink（「鏈接文本」，「動作名稱」）工作，但顯示爲鏈接，我試圖使用「按鈕」。

Index.cshtml

@{ 
    ViewBag.Title = "Home Page"; 
} 

<div class="hero-unit"> 
    <h3>Marketing & Communications Project Request Form</h3> 
    <p>User: <strong>@Context.User.Identity.Name</strong></p> 
</div> 
<div class="row"> 
    <div class="span4"> 
     @Html.ActionLink("Send Email", "SendEmail") @*this line works*@ 
     <input id="SendEmail" class="btn" type="button" value="SendEmail" /> @*this line does not 

    </div> 
</div> 

<script type="text\javascript"> 
    $(function(){ 
     var url = '@Url.Action("SendEmail", "HomeController")'; 
     $("input#SendEmail").on('click', function() {     
      $.ajax({ 
       url: url  
      }) 
     }); 
    }); 
</script>

的HomeController

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

     public ActionResult About() 
     { 
      ViewBag.Message = "Your application description page."; 

      return View(); 
     } 

     public ActionResult Contact() 
     { 
      ViewBag.Message = "Your contact page."; 

      return View(); 
     } 

     public ActionResult SendEmail() 
     { 
      //Code to create and send email here 

      return View("Index"); 
     } 
    }

來源

2013-10-15 Refracted Paladin

OK，說你有以下按鈕，寫在HTML：

<input type="button" id="MyButton" value="Click Me />

您可以使用jQuery連接到click事件：

$(function(){ 
    $("input#MyButton").on('click', function(){ 
    // Do what you want. 
    }); 
});

如果使用HTML助手，如HTML.TextBoxFor()，只要你知道，產生input的ID，您可以使用相同的jQuery代碼掛鉤的click事件。

編輯：

您可以將該jQuery代碼放在視圖中，例如，

<script type="text/javascript"> 
    $(function(){ 
     $("input#MyButton").on('click', function(){ 
     // Do what you want. 
     }); 
    }); 
</script>

通常你找到附近放置視圖的底部腳本代碼，但是你可以把它放在任何地方，你真的喜歡。

或者您可以將該jQuery放置在單獨的JavaScript（* .js）文件中。只要確保你添加以下到<head>部分_Layout.cshtml：

<script type='text/javascript' src='@Url.Content("~Scripts/YourFile.js")' ></script>

_Layout.cshtml是在你的項目中使用一個主佈局文件（假設你已經選擇通常的ASP.NET MVC項目模板之一在Visual Studio中）。

編輯：

關於jQuery的參考，_Layout.cshtml您可以添加此，如果jQuery是不是已經提到：

<script type='text/javascript' src='@Url.Content("~Scripts/jquery.version.js")' ></script>

只需更換文件名正確的你。現在，如果您的MVC應用程序使用捆綁，事情會變得有趣。這有點出於我的知識庫，因此可能會更好地查看討論MVC應用程序中的CSS/JavaScript捆綁的其他SO問題。

來源

2013-10-15 12:33:26

也許說明明顯，但可能是值得一提的參考Jquery的，如在頁面需要引用它。 – christiandev

@christiandev我希望它是明顯的.... :) –

我使用cshtml，我會在哪裏放置jQuery功能？我曾經在視圖上想過，但我猜不到...... –

你可以用這個使用jQuery AJAX（POST）調用

<a id="btn-send-mail">SendEmail</a>

$(document).ready(function(){ 
    $('#btn-send-mail').click(function(e){ 
    e.preventDefault(); 

    var emailData={}; 
    emailData.toMail='[email protected]'; 

    $.post('/Mail/Send/',{data:emailData}, function(result){ 
     if(result.status==true){ 
     alert('Email submitted successfully'); 
    }});//end of post 
    });//end of click 
});//end of ready

控制器代碼

public class MailController 
{ 
    [HttpPost] 
    public JsonResult Send(Email obj) 
    { 
    //Code for sending email 
    return Json(new {status=true}); 
    } 
}

來源

2013-10-15 13:24:22

如果你不想簡單地實現下面的示例代碼要使用正常的jquery調用，您可以利用Razor @ Ajax.ActionLink。

您只需像普通的Html.ActionLink一樣設置鏈接，然後創建一個發送您的電子郵件的控制器操作，因爲此調用是異步的，它不會刷新頁面。

@Ajax.ActionLink("Send Email", // <-- Text to display 
    "SendEmail", // <-- Action Method Name 
    new AjaxOptions 
    { 
     UpdateTargetId="", // <-- Used if you want to update up, DOM element ID to update 
     HttpMethod = "GET" // <-- HTTP method 
    })

我會建議做的jQuery的方式，但這裏是一個example使用Ajax.ActionLink

來源

2013-10-15 20:36:29 hjgraca

如何使用按鈕（非提交）單擊事件來調用我的控制器上的方法？

回答

相關問題