【发布时间】：2016-05-24 04:21:54
【问题描述】：
我正在使用 jquery 模式对话框来接受来自用户的信息（如可填写的表单）。
我的模态表单是通过单击输入按钮显示的：-
<button id="create-user" type="button">Please Check-in</button>
我必须指出，我将这个输入按钮设置为 type="button" 而不是默认的 "submit" 的原因是，如果我将其保留为默认值，则会有回发并且模式弹出窗口消失（其中我不想要，原因很明显）。
模态形式如下：-
<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
CodeBehind="Default.aspx.cs" Inherits="CheckInSystem._Default" %>
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" />
<script type="text/jscript" src="http://code.jquery.com/jquery-2.2.0.min.js"></script>
<script type="text/jscript" src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="Scripts/ProgramFiles/Popup.js" type="text/javascript"></script>
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<h2>
Welcome to the Check-In Kiosk!
</h2>
<div style="margin-top: 40px">
</div>
<div style="margin-left: 20px;">
<asp:GridView ID="ActiveCheckIn" runat="server" BackColor="White" BorderColor="#999999"
BorderStyle="Outset" BorderWidth="1px" CellPadding="5" ForeColor="Black"
onrowcancelingedit="ActiveCheckIn_RowCancelingEdit"
onrowediting="ActiveCheckIn_RowEditing"
onrowupdating="ActiveCheckIn_RowUpdating" >
<AlternatingRowStyle BackColor="#CCCCCC" />
<Columns>
<asp:CommandField ShowEditButton="True" />
</Columns>
<FooterStyle BackColor="#CCCCCC" />
<HeaderStyle BackColor="Gray" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="#999999" ForeColor="Black" HorizontalAlign="Center" />
<SelectedRowStyle BackColor="#000099" Font-Bold="True" ForeColor="White" />
<SortedAscendingCellStyle BackColor="#F1F1F1" />
<SortedAscendingHeaderStyle BackColor="#808080" />
<SortedDescendingCellStyle BackColor="#CAC9C9" />
<SortedDescendingHeaderStyle BackColor="#383838" />
</asp:GridView>
</div>
<div style="margin-top: 40px">
</div>
<hr />
<div style="margin-top: 20px">
</div>
<h2 style="margin-left: 20px">
New Check-In?
</h2>
<button id="create-user" type="button" style="margin-left: 20%">
Click Here!</button>
<div id="dialog-form" title="New Visitor Check-in:">
<form id="myForm" method="post">
<p>
* All form fields are required.</p>
<div class="formContainer">
<div class="row">
<b>Visitor:</b>
<input id="visitor" type="text" runat="server" style="margin-left: 60px" required="true" />
</div>
<div class="row">
<b>Type of Visit:</b>
<asp:DropDownList ID="TypeOfVisitDesc" runat="server" DataValueField="TypeOfVisitKey"
DataTextField="TypeOfVisitDesc" CssClass="ddlist" DataSourceID="TypeOfVisitDataSrc">
</asp:DropDownList>
<asp:LinqDataSource ID="TypeOfVisitDataSrc" runat="server" ContextTypeName="CheckInSystem.CheckInSystemDataContext"
EntityTypeName="" TableName="TypeOfVisits">
</asp:LinqDataSource>
</div>
<div class="row">
<b>Visitee:</b>
<input id="visitee" type="text" runat="server" style="margin-left: 59px" required="true" />
</div>
<div class="row">
<b>Arrival:</b>
<input id="arrival" type="text" runat="server" style="margin-left: 59px" required="true" />
</div>
<div class="row">
<b>Departure:</b>
<input id="departure" type="text" runat="server" style="margin-left: 33px" required="true" />
</div>
</div>
<div>
<input id="Submit1" type="submit" runat="server" value="Check-In" class="myButton" />
</div>
</form>
</div>
<div class="statusMessage">
<asp:Label ID="Status" runat="server" Text=""></asp:Label>
</div>
</asp:Content>
在模式弹出窗口内有几个字段，最后是一个提交按钮：-
<input id="Submit1" type="submit" runat="server" value="Check-In" class="myButton"/>
我的jquery对话框的JS文件如下：-
$(function () {
var form;
var dialog = $("#dialog-form").dialog({
autoOpen: false,
show: {
effect: "blind",
duration: 50
},
hide: {
effect: "explode",
duration: 1000
},
height: 455,
width: 796,
modal: true,
buttons: {
Cancel: function () {
dialog.dialog("close");
}
}
});
$("#create-user").button().on("click", function () {
dialog.dialog("open");
});
$("#myForm").submit(function (event) {
alert("you have submitted the form!");
});
});
我目前面临的问题是，因为我不得不禁用第一个按钮（“create-user”）进行回发......我的模态弹出窗口中的提交按钮也没有进行回发.. .这意味着，我在 C# 方面收集用户数据的机制没有被遍历：-
protected void Page_Load(object sender, EventArgs e)
{
if (IsPostBack)
{ Allow_CheckIn(); }
}
private void Allow_CheckIn()
{
using (CheckInSystemDataContext objDataContext = new CheckInSystemDataContext())
{
Checkin newCheckIn = new Checkin();
newCheckIn.VisitorName = visitor.Value.ToString();
newCheckIn.TypeOfVisitKey = Convert.ToInt32(TypeOfVisitDesc.SelectedValue);
newCheckIn.VisiteeName = visitee.Value.ToString();
newCheckIn.Arrival = Convert.ToDateTime(arrival.Value);
newCheckIn.Departure = Convert.ToDateTime(departure.Value);
objDataContext.CheckIns.InsertOnSubmit(newCheckIn);
objDataContext.SubmitChanges();
Status.Text = "Check-In successful!";
Status.CssClass = "success";
Bind_gvw_CheckIn();
}
}
但是，我无法将第一个按钮设置为提交类型...任何建议我可以做什么，以便在将数据插入模式弹出窗口后遍历我的 Allow_CheckIn()。
【问题讨论】：
标签： javascript c# jquery asp.net