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