模态对话框内的按钮不起作用

时间:2017-12-03 16:09:30

标签: javascript asp.net

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

我的模态对话框中还有一个按钮(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>

我的按钮功能代码,但它不起作用

protected void Button1_Click1(object sender, EventArgs e)
{
    Response.Redirect("~/AddNewUser.aspx");
}

2 个答案:

答案 0 :(得分:3)

尝试在按钮中使用UseSubmitBehavior="false"

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

答案 1 :(得分:1)

最可能的问题是模式是在外部表单中创建的,因此如果按钮是在表单外部创建的,则无法使用。

大多数模态都可以设置模态的创建位置。例如,jquery-ui具有appendTo属性。因此,如果您设置appendTo: 'FORM',它将在表单内创建模式,您的按钮将按预期工作。