【问题标题】:Calling a C# function by a HTML button通过 HTML 按钮调用 C# 函数
【发布时间】:2021-06-21 14:53:11
【问题描述】:

我想做的是通过按钮调用函数。

我会给你一个简单的代码不起作用!

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


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

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

注意:我没有使用 MVC

【问题讨论】:

  • 没有。你不能那样做。这就是 JavaScript 的用途。
  • 如果你想,它就行不通了。 onclick 用于调用 JavaScript 函数..

标签: c# html asp.net razor


【解决方案1】:

我知道这是一个老问题,但是当您查找如何在 ASP Razor 中运行 OnClick 方法时,这是 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 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

【讨论】:

  • 感谢您分享此内容。即使从浏览文章中,我也可以说事情与我在倾倒想法时概述我的 UI 的方式大致一致,同时太累了无法编写实际代码。对于主要习惯于桌面开发的人来说,使用处理程序方法是一种更直观的方法,而且这似乎适用于作为 WebForms 精神继承者的东西。 :)
【解决方案2】:

你不能这样。不是ASP.NET WebForms

因此,如果您想在 Razor 中单击按钮时执行 C# 函数,您必须可以创建一个Controller,然后当用户单击按钮时,您必须可以调用一个 javascript 函数,它会向您的控制器发送一个 ajax 请求,然后获取数据(如果有数据)并显示它。

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

在你的控制器中添加这个方法:

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:我假设你的控制器名称是 HomeController,如果它有不同的名称,你必须更改 url:

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

【讨论】:

  • 已编辑以防止创建 MVC 和 Razor(语法)需要 MVC 模式的假设。您可以使用 Razor 语法并简单地对其他页面执行标准 HTTP POST,和/或相同(模仿“回发”,您可以在其中“处理”发布的数据 - 比“Web 表单”更“裸机”,但核心概念相同)..Hth.
  • 对不起,我太笨了,但我应该如何在 asp.net 网站中制作控制器(没有 MVC)?
【解决方案3】:
<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>
}

【讨论】:

  • 如果你想使用内联函数,你可能需要像这样定义函数:@functions{ string MyFunction() { return "Hello Razor"; } }
猜你喜欢
  • 2019-11-06
  • 2017-05-19
  • 2017-10-01
  • 2018-01-15
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多