Javascript 模式对话框内的按钮不工作_Javascript_Asp.net

Javascript 模式对话框内的按钮不工作

javascript asp.net

Javascript 模式对话框内的按钮不工作,javascript,asp.net,Javascript,Asp.net,我有一个带有视图按钮的网格。单击“查看”按钮时，将打开一个模式对话框，并显示表单中的所有信息我的模态对话框中还有一个按钮（buttonID:Button1）。问题是，当我点击对话框内的按钮时，什么都没有发生这就是我到目前为止所做的： <%@ Page Language="C#" AutoEventWireup="true" CodeFile="AddUser.aspx.cs" Inherits="AddUser" %> <!DOCTYPE html> <

我有一个带有视图按钮的网格。单击“查看”按钮时，将打开一个模式对话框，并显示表单中的所有信息

我的模态对话框中还有一个按钮（buttonID:Button1）。问题是，当我点击对话框内的按钮时，什么都没有发生

这就是我到目前为止所做的：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="AddUser.aspx.cs" Inherits="AddUser" %>

  <!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
      <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
      <script src='http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js'></script>
      <script src='http://cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.4.5/js/bootstrapvalidator.min.js'></script>
    <link href ="http://code.jquery.com/ui/1.11.4/themes/ui-Lightnes/jquery-ui.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    <script  src="js/index.js"></script>

<link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css'/>
<link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css'/>
<link rel='stylesheet prefetch' href='http://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.0/css/bootstrapValidator.min.css'/>
    <link rel="stylesheet" href="css/style.css"/>

    <script>
        function popup(idn, un, ps, em) {
            $("#userid").text(idn);
            $("#usern").text(un);
            $("#pwd").text(ps);
            $("#eml").text(em);
            $("#popupdiv").dialog({
                closeOnEscape: false,
                position: 'fixed',
                width: 1080,
                height: 500,
                autoOpen: true,
                modal: true,
                open: function (event, ui) {
                    $(".ui-dialog-titlebar-close", ui.dialog | ui).hide();
                },
                buttons: {
                    Close: function () {
                        $(this).dialog("close");
                    }
                }
            });
        }

    </script>

</head>
<body>

    <form id="form1" runat="server" >

            <asp:Button ID="btnAddUser" runat="server" Text="Add New User" OnClick="btnAddUser_Click" />
            <asp:GridView AutoGenerateColumns="false" ID="gvUsers" runat="server"  PagerStyle-CssClass="pager"
                HeaderStyle-CssClass="header" RowStyle-CssClass="rows"         
                CssClass="mydatagrid" AllowPaging="True" 
                ShowHeaderWhenEmpty="true"
                BackColor="White" BorderColor="#CCCCCC" BorderStyle="None" BorderWidth="1px" CellPadding="3">
                <FooterStyle BackColor="White" ForeColor="#000066" />
                <HeaderStyle BackColor="#006699" Font-Bold="True" ForeColor="White" />
                <PagerStyle BackColor="White" ForeColor="#000066" HorizontalAlign="Left" />
                <RowStyle ForeColor="#000066" />
                <SelectedRowStyle BackColor="#669999" Font-Bold="True" ForeColor="White" />
                <SortedAscendingCellStyle BackColor="#F1F1F1" />
                <SortedAscendingHeaderStyle BackColor="#007DBB" />
                <SortedDescendingCellStyle BackColor="#CAC9C9" />
                <SortedDescendingHeaderStyle BackColor="#00547E" />
                <Columns>
                    <asp:BoundField DataField="UserID" HeaderText="UserID" />
                     <asp:BoundField DataField="Username" HeaderText="Username" />
                     <asp:BoundField DataField="Password" HeaderText="Password" />
                    <asp:BoundField DataField="Email" HeaderText="Email" />

                    <asp:TemplateField>
                        <ItemTemplate>
                            <img src="images/edit.png" id="imgBtn" style="width:20px; height:20px" onclick='popup("<%# Eval("UserID") %>", "<%# Eval("Username") %>","<%# Eval("Password") %>","<%# Eval("Email") %>")'></>
                        </ItemTemplate>
                    </asp:TemplateField>
                </Columns>
            </asp:GridView>

        <div class="container"> 
            <div id="popupdiv" style=" margin: auto;
    width: 100%;
    padding: 10px;
     background-color: #333333;
    background-color: #333333; ">
                <div class="well form-horizontal"   id="contact_form">
<fieldset>
    <div class="form-group">
  <label class="col-md-4 control-label">Username</label>  
  <div class="col-md-4 inputGroupContainer">
  <div class="input-group">
  <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
        <textarea id="userid" runat="server" style="width:250px; height:35px; resize: none" name="first_name"  class="form-control"></textarea>
    </div>
  </div>
</div>

<!-- Text input-->

<div class="form-group">
  <label class="col-md-4 control-label" >Password</label> 
    <div class="col-md-4 inputGroupContainer">
    <div class="input-group">
  <span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
   <textarea type="text" id="usern"  runat="server" style="width:250px; height:35px; resize: none" class="form-control"></textarea>
    </div>
  </div>
</div>

<!-- Text input-->
       <div class="form-group">
  <label class="col-md-4 control-label">E-Mail</label>  
    <div class="col-md-4 inputGroupContainer">
    <div class="input-group">
        <span class="input-group-addon"><i class="glyphicon glyphicon-envelope"></i></span>
               <textarea type="text" id="pwd"  runat="server" style="width:250px; height:35px; resize: none" class="form-control"></textarea>
    </div>
  </div>
</div>

<!-- Select Basic -->

<div class="form-group"> 
  <label class="col-md-4 control-label">User Role</label>
    <div class="col-md-4 selectContainer">
    <div class="input-group">
            <span class="input-group-addon"><i class="glyphicon glyphicon-list"></i></span>
            <textarea type="text" id="eml"  runat="server" style="width:250px; height:35px; resize: none" class="form-control" ></textarea>

  </div>
</div>
</div>
<!-- Button -->
<div class="form-group">
  <label class="col-md-4 control-label"></label>
  <div class="col-md-4">

    <asp:Button ID="Button1" data-dismiss="modal" class="btn btn-warning" runat="server" Text="Submit" OnClick="Button1_Click1"/>
  </div>
</div>
</fieldset>



        </div>
                </div>
</div>

    </form>

</body>
</html>

最可能的问题是，模式是在表单外部创建的，因此如果按钮是在表单外部创建的，它将无法工作

大多数模态都有一种设置模态创建位置的方法。例如，

jqueryui

具有该属性。因此，如果您将

appendTo设置为：'FORM'

，它将在表单中创建模式，您的按钮将按预期工作。

尝试使用in按钮：

<asp:Button ID="Button1" data-dismiss="modal" class="btn btn-warning" runat="server"
    Text="Submit" UseSubmitBehavior="false" OnClick="Button1_Click1"/>

我可以确认按钮是表单的一部分。您可以查看我上面的代码以获得进一步的参考。我认为问题在于我没有在我的JSF中添加或调用button onClick方法。当弹出窗口打开时，您可以确认按钮是浏览器中表单的一部分吗？您可能已经在表单中创建了模式，但是当打开模式对话框时，它可能会出现在主体上，而不是表单上。如果您使用jquery ui，默认值为“body”，我试图在JS中调用onClick方法，但它仍然不起任何作用。然而，当我说alert（）时；它在模态对话框中响应，但当我调用onClick时，它不会执行任何操作切换到链接按钮，它将再次工作。谢谢您，先生！！请您提供更多的信息，说明它以前为什么不工作，现在为什么工作（显然现在我添加了UseSubmitBehavior=“false”），以便我更好地理解UseSubmitBehavior属性的值为false。因此，该按钮使用ASP.NET回发机制。

<asp:Button ID="Button1" data-dismiss="modal" class="btn btn-warning" runat="server"
    Text="Submit" UseSubmitBehavior="false" OnClick="Button1_Click1"/>