这是我的问题。 我正在使用Visual Studio 2015网络表单。 我创建了一个测试平均计算器。 所有代码都有效,但是当我将其放置在模态中时,单击模态内的计算按钮会关闭模态。 计算有效,但我需要单击模态窗口才能查看结果。 这是 aspx 代码
<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.Master"AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication7._Default" %>
<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#testAvgModal">Test Average</button>
<div class="modal fade" id="testAvgModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Test Average</h4>
</div>
<div class="modal-body">
<div class="row">
<br />
<section class="form-horizontal">
<div class="form-group">
<label class="col-sm-4 control-label" for="t1TextBox">Test 1: </label>
<div class="col-sm-2">
<input class="form-control" runat="server" id="t1TextBox" required="required" type="text" placeholder="77"/>
</div>
</div>
</section>
</div>
<div class="row">
<section class="form-horizontal">
<div class="form-group">
<label class="col-sm-4 control-label" for="t2TextBox">Test 2: </label>
<div class="col-sm-2">
<input class="form-control" runat="server" id="t2TextBox" required="required" type="text" placeholder="77"/>
</div>
</div>
</section>
</div>
<div class="row">
<section class="form-horizontal">
<div class="form-group">
<label class="col-sm-4 control-label" for="t3TextBox">Test 3: </label>
<div class="col-sm-2">
<input class="form-control" runat="server" id="t3TextBox" type="text" placeholder="77"/>
</div>
</div>
</section>
</div>
<div class="row">
<section class="form-horizontal">
<div class="form-group">
<label class="col-sm-4 control-label" for="avgOutputLabel">Average Test Score: </label>
<div class="col-sm-2">
<label class="col-sm-4 control-label" runat="server" id="avgOutputLabel"> </label>
</div>
</div>
</section>
</div>
<div class="row">
<section class="form-horizontal">
<div class="form-group">
<div class="col-sm-4"></div>
<div class="col-sm-6">
<button type="submit" class="btn btn-primary" onclick="calculateButton_Click" >Calculate Average</button>
<button type="reset" class="btn btn-primary" >Clear</button>
<%--<asp:Button ID="calculateButton" CssClass="btn btn-success" runat="server" OnClick="calculateButton_Click" Text="Calculate Average" />--%>
<%--<asp:Button ID="clearButton" CssClass="btn btn-warning" runat="server" OnClick="clearButton_Click" Text="Clear" />--%>
</div>
</div>
</section>
</div>
</div>
<div class="modal-footer">
<a href="#" data-dismiss="modal" class="btn btn-info">Close</a>
</div>
</div>
</div>
</div>
这是背后的代码
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Windows.Forms;
namespace WebApplication7
{
public partial class _Default : Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void calculateButton_Click(object sender, EventArgs e)
{
double test1;
double test2;
double test3;
double average;
test1 = double.Parse(t1TextBox.Value);
test2 = double.Parse(t2TextBox.Value);
test3 = double.Parse(t3TextBox.Value);
average = (test1 + test2 + test3) / 3.0;
avgOutputLabel.InnerText = average.ToString("N2");
}
}
}
您的模态没有关闭,也没有显示。
您必须了解服务器端代码和客户端代码之间的区别。
当你使用引导程序创建一个模态时,它会通过javascript在客户端执行,每当你的页面被重新渲染时,它都会随着页面返回到其初始状态而消失。
模态内的按钮具有"提交"操作,这意味着数据将被发布到服务器,服务器将返回包含新内容的整页。
因此,当您按下计算按钮时,数据将发送到服务器,页面将重新呈现,并且由于用户从未单击该按钮,因此它没有打开模式。
实现所需目标的正确方法是通过 ajax,对服务器中的某个资源进行异步调用,该资源执行计算,并在 ajax 调用的响应中使用新值更新文本框。