BOOTSTRAP MODALPOPUP(when I pass a value to a textbox in bootstrao modal popup , popup is shoing but text box is not filling)

Question

0.00/5 (No votes)

See more:

THIS IS MY FRONT END

C#

<%@ Page Title="" Language="C#" MasterPageFile="~/Main.master" AutoEventWireup="true" CodeFile="Category.aspx.cs" Inherits="Category" %>

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
     <asp:Label ID="lblCID" runat="server" Text="" Visible="false">
   
    
       Add New Category
    
        function openModal()
        {
            $('#modal-header-primary').modal('show');
            
        }
    

    <%--Modal popup start--%>
     <div id="modal-header-primary" class="modal fade">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header modal-header-primary">
                                ×
                                <h4 id="modal-header-primary-label" class="modal-title">Add New Category</h4>

                            </div>
                            <div class="modal-body">
                                  <div class="col-md-6">
                                                <div class="form-group">
                                                    <div class="input-icon">
                                                        
                                                        <asp:TextBox ID="txtCategoryName"  runat="server" class="form-control" data-toggle="tooltip">
                                                    </div>
                                                </div>
                                            </div>

                            </div>
                            <br>
                            <div class="modal-footer">
                                 
                                Close
                                <asp:Button ID="btnCategory" runat="server" Text="Submit" OnClick="btnCategory_Click" class="btn btn-primary"/>
                                
                            </div>
                        </div>
                    </div>
                </div>
    <%--Modal popup end--%>

    <%--Grid View start--%>
    <asp:ScriptManager ID="ScriptManager1" runat="server"
        EnablePageMethods="true">
    
          
      <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                  <triggers>

<asp:AsyncPostBackTrigger ControlID="GVCategoryDetails" EventName="RowCommand" />


        <contenttemplate>
    
     <div class="row">
   
          
         </div>
    <div class="col-lg-12">

        <div class="row">
            <asp:Label ID="lblID" runat="server" Text="lblID" Visible="false">
            <asp:Label ID="lblMsg" runat="server" Text="" ForeColor="Red" Visible="false">

            <div class="panel panel-red">
                            <div class="panel-heading">Category Details</div>
                            <div class="panel-body">
            <asp:GridView ID="GVCategoryDetails" runat="server" CssClass="table table-hover table-bordered" PagerStyle-CssClass="pager"
                HeaderStyle-CssClass="header" RowStyle-CssClass="rows" AllowPaging="True" OnPageIndexChanging="GVCategoryDetails_PageIndexChanging"
                AutoGenerateColumns="false" OnRowDeleting="GVCategoryDetails_RowDeleting" 
                OnRowCommand="GVCategoryDetails_RowCommand" DataKeyNames="CategoryId"  PageSize="25">

                <columns>
                    <asp:TemplateField HeaderText="Sl.No.">
                        <itemtemplate>
                            <%#Container.DataItemIndex+1 %>
                        
                    
                  

                    <asp:BoundField HeaderText="CategoryId" DataField="CategoryId" Visible="false"
                        ItemStyle-HorizontalAlign="Justify">

                        <ItemStyle HorizontalAlign="Justify">
                    

                    <asp:BoundField HeaderText="Category Name" DataField="CategoryName"
                        ItemStyle-HorizontalAlign="Justify">

                        <ItemStyle HorizontalAlign="Justify">
                    

              
                    <asp:TemplateField HeaderText="Manage">

                        <itemtemplate>



                            <asp:ImageButton ID="ImgView" runat="server" CausesValidation="False" CommandName="ViewPopup" ToolTip="Click here to view " ImageAlign="Middle" ImageUrl="~//images/view.png" />    
                            <asp:ImageButton ID="ImgEdit" runat="server" CausesValidation="False" CommandName="Edit" ToolTip="Click here to edit " ImageAlign="Middle" ImageUrl="~/images/edit.png" />    
                            <asp:ImageButton ID="ImgDelete" runat="server" CausesValidation="False" CommandName="Delete" ToolTip="Click here to delete" ImageAlign="Middle" ImageUrl="~/images/delet.png" />



                        
                    


                
            
                                </div>

        </div>
    </div>
        </div>
            
          
    <%--GridView end--%>

C# CODE

protected void GVCategoryDetails_RowCommand(object sender, GridViewCommandEventArgs e)
   {
       if (e.CommandName == "ViewPopup")
       {
           ImageButton ImgView = (ImageButton)e.CommandSource;
           GridViewRow row = (GridViewRow)ImgView.Parent.Parent;
           int CategoryId = Convert.ToInt32(GVCategoryDetails.DataKeys[row.RowIndex].Value);
           DataTable dtCategory= _objMainBL.GetCategoryDetailsbyId(CategoryId);

           if (dtCategory!= null && dtCategory.Rows.Count > 0)
           {
             txtCategoryName.Text = dtCategory.Rows[0]["CategoryName"].ToString();
           lblCID.Text = dtCategory.Rows[0]["CategoryId"].ToString();
           ScriptManager.RegisterStartupScript(this, this.GetType(), "Pop", "openModal();", true);

           }


       }
   }

What I have tried:

I need to display value in textbox

Posted 11-Feb-19 4:16am

Member 14024377

Updated 11-Feb-19 6:50am

v3

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

alexvw · Answer 1 · 2019-02-11T06:50:00

Hi there,

Place your boostrap popup structure (or just your txtCategoryName control) inside an updatepanel with UpdateMode set to Conditional. Either set a trigger for the appropriate gridview event (GVCategoryDetails_RowCommand) or update it from code behind:

YourUpdatePanel.Update();

That should do it.

2019/02/12: Update.

Given your comment "When I use modal inside update panel I can't access txtCategoryName from Code behind", I can only assume you are interacting with your model purely from client-side js.

Please, take a look at this example (bootstrap 4.1.1):

<asp:UpdatePanel ID="UpdPnlModalTest" runat="server" ChildrenAsTriggers="false" UpdateMode="Conditional">
    <Triggers> <asp:AsyncPostBackTrigger ControlID="btnTest" EventName="Click" /> </Triggers>
    <ContentTemplate>

        <div class="modal fade" id="modal_Test" role="dialog" tabindex="-1">
            <div class="modal-dialog modal-dialog-centered">
                <div class=" modal-content">
                    <div class="modal-header">
                        <h2 class="modal-title col-10">Modal Test</h2>
                        <button type="button" class="close" data-dismiss="modal">×</button>
                    </div>
                    <div class="modal-body">
                        <asp:Label ID="lbTestData" runat="server"></asp:Label>
                    </div>
                    <div class="modal-footer"></div>
                </div>
            </div>
        </div>

    </ContentTemplate>
</asp:UpdatePanel>

I make this modal visible from code behind:

 ... void btnTest_Click(object sender, EventArgs e)
{
  //...
  lbTestData.Text = "Some string value for testing purposes!";
  //...
  ScriptManager.RegisterStartupScript(objPage, objType, "ShowIt",
  "$(document).ready(function() { $('#modal_Test').modal('show'); });", true);
}

Give it a test run.

Good luck!

PD. You are implementing a ScriptManager in your MasterPage, right?

<asp:ScriptManager ID="AjaxMngr" runat="server" EnablePartialRendering="true"> </asp:ScriptManager>