JQuery Modal Dialog form post-back issue

Question

Я использую диалоговое окно jquery modal, чтобы принимать информацию от пользователя (как в заполняемой форме).

Моя модальный форма отображается нажатием на кнопку ввода: -

<button id="create-user" type="button">Please Check-in</button> 

я должен отметить, что причина, у меня есть эта кнопка ввода как «кнопка» типа = вместо дефолта «представить «потому что, если я оставлю его по умолчанию, есть обратная передача, и модальное всплывающее окно исчезает (чего я не хочу по понятным причинам).

Модальная форма выглядит следующим образом: -

<%@ 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"/> 

Мой файл JS для jquery выглядит следующим образом: -

$(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, которая показывает ваше действие Submit работает, если добавить тэг формы

plunker