cshtml中使用Bootstrap,创建弹出对话框,并将用户输入的数据保存至Model中的Value变量
时间: 2024-03-06 22:50:55 浏览: 41
好的,我可以为您解答这个问题。
首先,在cshtml中使用Bootstrap创建弹出对话框,可以通过以下步骤实现:
1. 导入Bootstrap的CSS和JS文件,可以在头部添加以下代码:
```
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>
```
2. 创建一个按钮,点击按钮后弹出对话框,可以添加以下代码:
```
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
弹出对话框
</button>
```
其中,`data-toggle="modal"`表示点击按钮后弹出对话框,`data-target="#myModal"`表示对话框的id为"myModal"。
3. 创建对话框,可以添加以下代码:
```
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel">输入数据</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="inputData">数据</label>
<input type="text" class="form-control" id="inputData" placeholder="请输入数据">
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary" id="saveData">保存</button>
</div>
</div>
</div>
</div>
```
其中,`<div class="modal fade" id="myModal">`表示对话框的id为"myModal",`<h4 class="modal-title" id="myModalLabel">输入数据</h4>`表示对话框的标题为"输入数据",`<input type="text" class="form-control" id="inputData" placeholder="请输入数据">`表示输入框。
4. 在JS中,保存用户输入的数据至Model中的Value变量,可以添加以下代码:
```
$('#saveData').click(function() {
var inputData = $('#inputData').val();
// 将用户输入的数据保存至Model中的Value变量
Model.Value = inputData;
$('#myModal').modal('hide');
});
```
其中,`$('#saveData').click(function() {`表示点击"保存"按钮时执行的函数,`var inputData = $('#inputData').val();`表示获取输入框的值,`Model.Value = inputData;`表示将值保存至Model中的Value变量,`$('#myModal').modal('hide');`表示隐藏对话框。
希望这个回答能够帮助到您!
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)