Question

我有一个带有视图按钮的网格视图。单击视图按钮时，将打开一个模态弹出窗体，并使用所选记录数据填充textarea。在表单中，用户可以更改记录并更新记录。

我遇到两个问题： 1.当我使用文本框作为我的设计的一部分时，数据不会被带回我的文本框中。我尝试用以下方式编写文本框：

 <textarea id="userid" runat="server" style="width:250px; height:35px; resize: none" class="form-control"></textarea>

但它抱怨“不支持元素文本框”

当我使用textarea（使数据恢复正常）时，我无法从textarea获取值以更新我的记录。

我更喜欢使用文本框。请指教。

P.S。如果我能得到textarea的价值，请告诉我。

这就是我所拥有的：

<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>

       <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>

我尝试使用InnerText来获取textare的值，但它不起作用：

protected void Button1_Click1(object sender, EventArgs e)
{

    SqlConnection con = new SqlConnection(
    WebConfigurationManager.ConnectionStrings["MyDbConn"].ConnectionString);
    con.Open();
    SqlCommand cmd = new SqlCommand("sp_UserInsertUpdate", con);
    cmd.CommandType = System.Data.CommandType.StoredProcedure;
    cmd.Parameters.AddWithValue("UserID", userid.InnerText);
    cmd.Parameters.AddWithValue("UserRoleID", 1);
    cmd.Parameters.AddWithValue("Username", userid.InnerText);
    cmd.Parameters.AddWithValue("Password", pwd.InnerText);
    cmd.Parameters.AddWithValue("Email", eml.InnerText);
    cmd.Parameters.AddWithValue("DateCreate", DateTime.Today);
    cmd.ExecuteNonQuery();
    con.Close();

}

完整代码：

<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:HiddenField ID="hfUserID" runat="server"/>
        <div class="grid">
            <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") %>")'></>
                            <img src="images/delete.png" id="imgDlt" style="width:20px; height:20px" ></>
                        </ItemTemplate>
                    </asp:TemplateField>
                </Columns>
            </asp:GridView>
            </div>
        <div class="container"> 
            <div id="popupdiv" style="display:none; 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>
      <asp:TextBox ID="userid" runat="server"></asp:TextBox>

    </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 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"  class="btn btn-warning" runat="server" Text="Submit" UseSubmitBehavior="false" OnClick="Button1_Click1"/>
  </div>
</div>
</fieldset>

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

    </form>

</body>



protected void Button1_Click1(object sender, EventArgs e)
{

    SqlConnection con = new SqlConnection(
    WebConfigurationManager.ConnectionStrings["MyDbConn"].ConnectionString);
    con.Open();
    SqlCommand cmd = new SqlCommand("sp_UserInsertUpdate", con);
    cmd.CommandType = System.Data.CommandType.StoredProcedure;
    cmd.Parameters.AddWithValue("UserID", userid.InnerText);
    cmd.Parameters.AddWithValue("UserRoleID", 1);
    cmd.Parameters.AddWithValue("Username", userid.InnerText);
    cmd.Parameters.AddWithValue("Password", pwd.InnerText);
    cmd.Parameters.AddWithValue("Email", eml.InnerText);
    cmd.Parameters.AddWithValue("DateCreate", DateTime.Today);
    cmd.ExecuteNonQuery();
    con.Close();

}

Answer 1

我按照Alex Kudryashev的建议将我的功能更改为以下内容，现在我可以在文本框中检索我的值并更新

    function popup(idn, un, ps, em) {
        $("#userid").val(idn);
        $("#usern").val(un);
        $("#pwd").val(ps);
        $("#eml").val(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");
                }
            }

        });
    }

模态弹出中Textbox / TextArea的问题

1 个答案: