通过ASP.NET Razor中的html按钮调用C#函数

Question

好吧标题说明了一切,我想做的是通过按钮调用功能

我将给你留下一个不起作用的简单代码!:

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


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

关于如何在上面的代码中完成我想做的事情的任何想法？

注意:我不使用MVC

Answer 1

你不能这样做ASP.NET WebForms.事实并非如此.

因此,如果你想要在Razor上点击按钮执行C#功能,你必须创建一个Controller,然后当用户点击一个按钮你必须可以调用一个javascript函数,它会向你的控制器发送一个ajax请求,然后获取数据(如果有的话)是数据)并显示它.

更新:这是一个关于如何执行此操作的替代简单示例:

在Controller中添加此方法:

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

在您的视图(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:我假设您的Controller名称是HomeController,如果它具有不同的名称,您必须更改URL:

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

Answer 2

我知道这是一个老问题，但这是当您查找如何OnClick在 ASP Razor 中运行方法时在 google 上的第一个结果，我认为有比当前接受的答案更好的方法。我不知道在撰写原始答案时这是否是新的，但我确实认为这是处理这种行为的最佳方式，因为它不需要手写 AJAX 或 JavaScript 方法。

对于那些从 Web 窗体到 ASP Razor 的人来说，重新创建这种行为的最好（也是最简单的）方法可能是使用处理程序方法。处理程序方法附加到 Get 和 Post 方法，并且可以使用 ASP Razor 生成的表单运行。

默认情况下，您的 cshtml.cs 页面将具有如下所示的功能：

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

但有时，您希望根据帖子的确切原因做一些具体的事情。这是您可以实现处理程序方法的地方。

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

如果您随后想要使用按钮方法，您只需创建一个 ASP 按钮来指示其处理程序方法。

<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