asp.net 通过HTML按钮调用C#函数

jxct1oxe  于 2023-05-19  发布在  .NET
关注(0)|答案(3)|浏览(261)

我想做的是通过一个按钮来调用函数。
我将给你留下一个简单的代码**,它不起作用!**:

@{
    protected void print()
    { 
        @<p>WELCOME!</p>
    }
}

<form>
    <button  onclick="print" value="CLICK ME"/>
</form>

任何关于如何完成我试图在上面的代码做的想法?

注意:IM不使用MVC

wlsrxk51

wlsrxk511#

我知道这是一个老问题,但这是当你在谷歌上查找如何在ASP Razor中运行OnClick方法时的第一个结果,我认为有一个比目前接受的答案更好的方法来做到这一点。我不知道这是不是写原始答案时的新方法,但我认为这是处理这种行为的最佳方法,因为它不需要手写 AJAX 或JavaScript方法。
对于那些从Web Forms进入ASP Razor的人来说,重新创建这种行为的最好(也是最简单)的方法可能是使用处理程序方法。处理程序方法被附加到Get和Post方法之后,并且可以使用ASP Razor生成的表单来运行。
默认情况下,您的cshtml.cs页面将具有如下所示的函数:

public async Task OnPostAsync()
{
    <Do Post Stuff Here>
}

有时候,你想做一些具体的事情,这取决于到底是什么导致了帖子。这是您可以实现处理程序方法的地方。

public async Task OnPostButton()
{
    <Do button stuff here>
}

如果您想使用button方法,只需创建一个ASP Button来指示它的处理程序方法。

<form asp-page-handler="button" method="post">
   <button class="btn btn-default">Button</button>
</form>

这将告诉razor页面在结果按钮的查询字符串中添加对按钮处理程序方法的引用,如下所示。

<form method="post" action="/page?handler=button">

访问它将告诉Razor使用命名的处理程序方法。只要处理程序的名称与函数和HTTP方法的名称匹配,它就会运行该函数。
你的代码看起来像这样:

@{
    protected void print()
    { 
        @<p>WELCOME!</p>
    }

    public async Task OnPostPrint()
    {
        print();
    }
}

<form asp-page-handler="Print" method="post">
   <button class="btn btn-default">CLICK ME</button>
</form>

别忘了,这只会调用OnPostPrint方法。如果你每次发布都需要运行一些东西,它也需要在那个方法中。最好将这些任务分解为一个单独的函数,然后在post方法中调用它。更容易维护。
有关方法处理程序的更多信息,包括如何向其中添加变量,请查看Mikes DotNetting!他做了一个伟大的工作,解释这一点彻底,我觉得我学到了很多从他的文章。
https://www.mikesdotnetting.com/article/308/razor-pages-understanding-handler-methods

huwehgph

huwehgph2#

你不能这样做。这不是ASP.NET WebForms
因此,如果你想在Razor中对按钮单击执行C#函数,你必须创建一个Controller,然后当用户单击按钮时,你必须调用一个JavaScript函数,它向你的控制器发送一个 AJAX 请求,然后获取数据(如果有数据)并显示它。
更新:这里有一个关于如何做到这一点的替代简单示例:
在您的控制器中添加此方法:

public ActionResult GetMessage()
    {
        string message = "Welcome";
        return new JsonResult {Data = message,JsonRequestBehavior = JsonRequestBehavior.AllowGet};
    }

在View(HTML)中:

<input type="button" onclick="GetMessage()" value="Get Message"/>
<p></p>

JavaScript:

function GetMessage() {
        $.get("/Home/GetMessage", function (data) {
            $("p").html(data);
        });
    }

不要忘记导入jQuery库:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

PS:我假设你的控制器名称是HomeController,如果它有不同的名称,你必须更改URL:

$.get("/{Controller-Name}/{Action-Name}", ...)
1hdlvixo

1hdlvixo3#

<input type="button" id="button" value="click me" />

@{
    string MyFunction()
    {
        return "Hello Razor";
    }
}

@section Scripts
{
    <script type="text/javascript">
         document.addEventListener("DOMContentLoaded", function () {
            var button = document.getElementById('button');
            button.addEventListener('click', function () {
                var test = "@MyFunction()";
                console.log(test);
             });
        });
    </script>
}

相关问题