cshtml中使用Bootstrap，创建弹出对话框，并将用户输入的数据传入OnGet方法

好的，我可以为您解答这个问题。首先，我们需要在cshtml文件中引入Bootstrap的相关库文件。可以在<head>标签中添加以下代码： ```html  <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.slim.min.js"></script> <script src="https://cdn.bootcss.com/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.bootcss.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> ``` 接下来，我们可以创建一个按钮，点击按钮后弹出对话框。可以在<body>标签中添加以下代码： ```html  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal"> 弹出对话框 </button>  <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">请输入数据</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body">  <form method="get"> <div class="form-group"> <label for="inputData">数据：</label> <input type="text" class="form-control" id="inputData" name="data"> </div> </form> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button> <button type="button" class="btn btn-primary" onclick="submitForm()">确认</button> </div> </div> </div> </div> ``` 在这个对话框中，我们创建了一个表单，用户可以在表单中输入数据。当用户点击确认按钮时，我们需要将数据传递给OnGet方法。为了实现这个功能，我们可以在<script>标签中添加以下代码： ```javascript function submitForm() { // 获取用户输入的数据 var data = $('#inputData').val(); // 将数据传递给OnGet方法 window.location.href = 'Index?data=' + data; } ``` 这个函数会在用户点击确认按钮时被调用。它首先从表单中获取用户输入的数据，然后使用window.location.href将数据传递给OnGet方法。最后，我们需要在OnGet方法中接收传递过来的数据。可以在.cs文件中添加以下代码： ```csharp public void OnGet(string data) { // 处理用户传递过来的数据 // ... } ``` 这样，当用户在对话框中输入数据并点击确认按钮时，数据就会被传递给OnGet方法进行处理了。

阅读全文

cshtml中使用Bootstrap，创建弹出对话框，并将用户输入的数据传入OnGet方法

相关推荐

使用html+css+js实现自定义弹出对话框/输入框

使用window.prompt()实现弹出用户输入的对话框

Blazor的简单Bootstrap模式对话框

cshtml中使用Bootstrap，创建弹出对话框，并将用户输入的数据保存至Model中的Value变量

bootstrap快速创建项目

ASP.NET MVC 使用Bootstrap的方法

Bootstrap table使用方法记录

razor-pages-bootstrap-ajax-modals:有关使用Razor Pages和Bootstrap创建基于AJAX的模态的教程的源代码-ajax source code

asp.net-core-bootstrap-ajax-modals:有关使用ASP.NET Core和Bootstrap创建基于AJAX的模态的教程的源代码-ajax source code

掌握在MVC5中使用Bootstrap进行前端布局

使用Bootstrap创建一个Blazor cshtml页面，添加一个按钮，点击后调用cs文件中的OnNewPage方法，并转到Newpage

在cshtml中使用{{}}

c# 在cshtml里面使用js里面的数据源

1、创建一个特性路由器，通过Controler 控制器的方法将当前时间（年、月、日）显示在页 三、设计题 2.创建一个网页index.cshtml，使用Html.ActionLink 路由另外的一个网页second.cshtml。

1、创建一个特性路由器，通过Controler 控制器的方法将当前时间（年、月、日）显示在页 三、设计题 2.创建一个网页index.cshtml，使用Html.ActionLink 路由另外的一个网页second.cshtml。

如何在CSHTML中处理从数据库获取的数据以避免重复？

cshtml文件中使用<%%>没有效果

怎么使用cshtml5

最新推荐

【路径规划】乌燕鸥算法栅格地图机器人最短路径规划【含Matlab仿真 2886期】.zip

Raspberry Pi OpenCL驱动程序安装与QEMU仿真指南

管理建模和仿真的文件

Fluent UDF实战攻略：案例分析与高效代码编写

如何使用DPDK技术在云数据中心中实现高效率的流量监控与网络安全分析？

Apache RocketMQ Go客户端：全面支持与消息处理功能

"互动学习：行动中的多样性与论文攻读经历"

Fluent UDF进阶秘籍：解锁高级功能与优化技巧

在Vue项目中，如何利用Vuex进行高效的状态管理，并简要比较React中Redux或MobX的状态管理模式？

WStage平台：无线传感器网络阶段数据交互技术

1、创建一个特性路由器，通过Controler 控制器的方法将当前时间（年、月、日）显示在页三、设计题 2.创建一个网页index.cshtml，使用Html.ActionLink 路由另外的一个网页second.cshtml。

1、创建一个特性路由器，通过Controler 控制器的方法将当前时间（年、月、日）显示在页三、设计题 2.创建一个网页index.cshtml，使用Html.ActionLink 路由另外的一个网页second.cshtml。