在按钮单击时从视图调用方法而不重新加载答案

【问题标题】：Call Method from View on Button click without reload在按钮单击时从视图调用方法而不重新加载
【发布时间】：2022-01-09 15:58:58
【问题描述】：

我还没有找到解决问题的方法。我正在使用 asp.net mvc。在我的视图中，我试图在 Buttonclick 上调用一个方法。这是按钮现在的样子

 <button type="button" id="@openButtonID" data-loading-text=" öffnen..." class="btn btn-primary" autocomplete="off" onclick="location.href='@Url.Action("Open", "Home", new {index =i} )'" disabled="@notConnected">

因此，每次我单击按钮时，网站都会自行重新加载。在网站上有一个摄像头流，在刷新期间会消失几秒钟。现在我的任务是避免这种情况，因此在整个过程中都可以看到流。我曾尝试像这样通过 Razor 调用该方法：

<button type="button" id="@openButtonID" data-loading-text=" öffnen..." class="btn btn-primary" autocomplete="off" onclick="@{( (GateControl.Controllers.HomeController)this.ViewContext.Controller ).Open( i );}" disabled="@notConnected">

但这只是在加载视图时调用方法。当我尝试这个时，我将方法的返回设置为无效。我也尝试过，就像this 中描述的那样。要么网站重新加载，要么我无法进入该方法。我还尝试了几个堆栈溢出的代码 sn-ps，但它不起作用。

这就是方法的样子

[CustomAuthorize]
public void Open( int index )
{

    //some code

}

【问题讨论】：

标签： asp.net asp.net-mvc

【解决方案1】：

既然您已经尝试过使用 jQuery，我想您会使用该库。您可以做的是将单击事件绑定到您的按钮并在其中进行 GET ajax 调用。您可以在按钮中使用“data-”属性让您的 url 在服务器上生成并在客户端上可用。

<button id="button-id" class="btn btn-primary" data-loading-text=" öffnen..."  data-url="@Url.Action("Open", "Home", new {index =i} )" disabled="@notConnected" autocomplete="off">

应该这样做：

   $("#button-id").click(function(){
        var url = $("#button-id").data("url");
        $.get(url , function(result) {
           //do something with the result if you ever need to
        });
    });

这样您就不会刷新页面。您还可以向我们提供有关该服务器方法及其作用的更多详细信息，也许它还需要一些更改。

【讨论】：

【解决方案2】：

这是我正在使用的完整代码

<script src="~/Scripts/jquery-1.10.2.min.js" type="text/javascript"></script>
<button type="button" id="@openButtonID" data-loading-text=" öffnen..." class="btn btn-primary" autocomplete="off" data-url="@Url.Action("Open", "Home" , new {index=i+1} )" disabled="@notConnected">
                            Öffnen
                        </button><br /><br />
                          <script type="text/jscript">
    $("#@openButtonID").click(function () {
        var url = $("#@openButtonID").data("url");
        $.get(url, function (result) {
            //do something with the result if you ever need to
        });
    });
                        </script>

【讨论】：