javascript - JQuery 模态对话框表单回发问题

Question

我正在使用 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!");
    });
});

我当前面临的问题是，因为我必须禁用第一个按钮(“创建用户”)进行回发...我的模式弹出窗口内的提交按钮也不进行回发。 .这意味着，我在 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()。

Answer 1

据我所知，您的问题与“创建用户”按钮无关。这只是一个打开模式窗口的按钮。正如您所描述的，您没有采取任何措施“禁用第一个按钮”。

您的问题很可能是模式对话框中的表单实际上不是表单。没有带有操作属性的表单标记来定义单击提交按钮时会发生什么。

我建议您查看w3schools关于表单操作的解释。

检查this plunker这表明如果您添加表单标签，您的提交操作就会起作用

plunker