在MVC中從視圖調用控制器方法

Question

所以，對於這個如此這么多的問題，但我不能為我的生活找到一個簡單的問題一個簡單的答案。

好的，所以我有一個帶有剃刀視圖項目的ASP MVC（c＃）（其布局由出色的DevExpress人員創建）-太棒了！ :)

情況

我在視圖中顯示了<button>和<p> -都很好。

按鈕的ID是（很有趣） myButton ，而該段是myParagraph 。

我還有一個帶有簡單方法的HomeController

        public string updateAlerts()
        {
            return "THIS IS AN IMPORTANT PARAGRAPH";
        }

我的問題是：

使用基礎知識

<button id="myButton" onclick="myFunction()">This is a button</button>

我需要使用什么來調用此方法？

有很多的問題，說明AJAX和JQuery -但在所有誠實，我還沒有如何使用那些foggiest想法！ （我是個白痴，好嗎？）

因此，我寫了一個script東西（老實說，我認為這不是“完全”需要的，

<script>
    function myFunction(){
    //how do I call this method here?
    var myString = ...

    document.getElementById("myButton").innerText = myString;
    }
</script>

誰能告訴我如何以最簡單/最容易理解的方式填寫此內容？

干杯

編輯

我以為這個答案會有所幫助，但是我要么只是愚蠢（可能），要么不適合這種情況（悲傷的表情）。

我也不知道這是否會產生“巨大的交易”，但此“段落”也位於“面板”之一（精確定位為左側導航欄）上，因此會在系統的所有頁面上看到

Answer 1

在視圖中：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script>
$(document).ready(function(){
$('#myButton').click(function(){
  $.get('<%= Url.Action(ControllerName.updateAlerts()) %>', function (data)
    {
      $('#myParagraph').text(data);
    })
  });
});
</script>

還要注意，如果您使用的是Razor，請將<%= Url.Action(ControllerName.updateAlerts()) %>替換為@Url.Action(ControllerName.updateAlerts())

Answer 2

如您所料，您將需要使用ajax。

Ajax是一組相互關聯的Web開發技術，在客戶端上用於創建異步Web應用程序。

在Wiki上了解有關它的更多信息。

這意味着不同的技術/框架以不同的方式實現它，jQuery是其中之一。 最終結果與服務器通信幾乎相同，而沒有抑制用戶的操作（不凍結瀏覽器等）。

為了使其工作，最好的選擇是在視圖中包含jquery：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

然后：

<script>
$(function () {
    ('#mybutton').on('click', function(){
        $.ajax({      
            url: '@Url.Action(HomeController.updateAlerts())'      
        }).done(function(data){
           $('#myParagraph').text(data);
        });
    });
})
</script>

Answer 3

當您嘗試修改myButton innerText時，它應該可以正常工作：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script>
$(document).ready(function(){
    $(document).ready(function () {
        $("#myButton").click(function () {
            $("#myParagraph").load("@Url.Action("updateAlerts","Home")");
        });
    });
});
</script>