创建一个ASP.Net Core WebApplication(Razor Page),包含一个按钮,点击按钮后,调用CSModel中过的OnOpen函数
时间: 2024-03-01 10:53:18 浏览: 187
可以按照以下步骤来创建一个包含按钮的Razor Page,并调用CSModel中的OnOpen函数:
1. 打开Visual Studio,创建一个新的ASP.Net Core WebApplication项目。
2. 在创建项目的时候,选择"Web Application (Model-View-Controller)"模板,并勾选"Enable Razor runtime compilation"选项,以便在开发时进行实时的Razor页面编译。
3. 在创建项目后,打开"Pages"文件夹,创建一个名为"Index.cshtml"的Razor页面。
4. 在Index.cshtml页面中添加一个按钮,并绑定一个名为OnOpen的事件处理程序,代码如下:
```html
<button class="btn btn-primary" onclick="OnOpen()">Open</button>
```
在这里,我们使用了Bootstrap的按钮样式,并在按钮上绑定了一个名为OnOpen的JavaScript函数。
5. 在Index.cshtml页面中添加一个JavaScript脚本块,并在其中定义OnOpen函数,代码如下:
```html
<script>
function OnOpen() {
// 在这里编写调用OnOpen函数的逻辑
fetch('/Index/OnOpen')
.then(response => response.json())
.then(data => console.log(data));
}
</script>
```
在这里,我们使用fetch函数来异步调用/Index/OnOpen路由,并在返回的JSON数据中打印一条日志信息,以便确认函数是否被正确调用。
6. 在.cs文件中编写OnOpen方法的逻辑,代码如下:
```csharp
public JsonResult OnOpen()
{
// 在这里编写调用CSModel中的OnOpen函数的逻辑
var result = CSModel.OnOpen();
return new JsonResult(result);
}
```
在这里,我们在Index页面对应的.cs文件中定义了一个名为OnOpen的方法,并在方法中调用了CSModel中的OnOpen方法,并将返回值封装成JSON格式返回给前端页面。注意:这里的CSModel可以根据您的具体应用场景进行修改,用于调用您的业务逻辑代码。
7. 运行应用程序,并在浏览器中打开Index页面。单击"Open"按钮,将会调用OnOpen函数,并在控制台中打印一条日志信息,以便确认函数是否被正确调用。
注意:这里我们使用了fetch函数来异步调用OnOpen方法,并且在返回的JSON数据中打印一条日志信息,以便确认函数是否被正确调用。如果您希望在服务器端调用函数,可以使用C#的事件处理程序来实现。
阅读全文