How to hide or display Lable if Status is true on Modal Popup using jQuery in ASP.Net

Last Reply on Jul 10, 2017 09:07 AM By Indresh

Posted on Jul 04, 2017 06:13 AM

i wan to hid this lable if status in table is false and display if true

 <asp:Label ID="PLNHid" runat="server" CssClass="glyphicon glyphicon-user" title="." data-toggle="tooltip" Font-Size="Small" ForeColor=""></asp:Label>

 

<div class="modal fade" id="myModalprofilepopup" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
    aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content" style="height: 600px">
            <asp:Image ID="photos" runat="server" ImageUrl='<%# String.Format("BannerImage/{0}",Eval("ImageBanner").ToString()) %>'
                class="userphotos media-object  animated fadeInDown" Style="width: 100%" />
            <a class=" " style="position: absolute; bottom: 40px; top: 102px; left: 9px;">
                <div class=" pull-left " style="margin-bottom: 6px; background-color: transparent">
                    <asp:Image ID="Image1photo" runat="server" ImageUrl='<%# String.Format("PROFILEPHOTOS/{0}",Eval("ImageName").ToString()) %>'
                        class="userprofilepgoto img-responsive2  img-thumbnail  animated fadeInDown img-circle"
                        Style="width: 35%" />
                </div>
            </a><a class=" pull-left" style="margin-left: 160px; margin-top: 2px; margin-bottom: 2px">
                <asp:Label ID="Namepro" runat="server" Text='<%# Eval("Name") %>' Font-Bold="True"
                    CssClass="namepro" Font-Size="Larger" ForeColor="Black" />
                <asp:Label ID="UserName" Text='<%#Eval("UserName") %>' runat="server" CssClass="username" />
                <asp:Label ID="PLNHid" runat="server" CssClass="glyphicon glyphicon-user" title="."
                    data-toggle="tooltip" Font-Size="Small" ForeColor=""></asp:Label>
            </a>
            <asp:Label ID="lblGallaryId" Text='<%#Eval("UserId") %>' runat="server" Font-Size="XX-Small" />
            <div id="modalbody5" class="modal-body">
            </div>
        </div>
    </div>
</div>

 

<script type="text/javascript">
         $(function () {
             $('[id*=btncall]').on('click', function () {
                 var id = $(this).closest('span').find('[id*=lblGallaryId]').html();
                 $.ajax({
                     type: "POST",
                     url: "Timeline.aspx/GetGallery",
                     data: '{id:"' + id + '"}',
                     contentType: "application/json; charset=utf-8",
                     dataType: "json",
                     success: function (response) {
                         $(".userphotos").attr('src', 'BannerImage/' + response.d[0].photos);
                         $(".userprofilepgoto").attr('src', 'PROFILEPHOTOS/' + response.d[0].Image1photo);
                         $(".namepro").html(response.d[0].Namepro);
                         $(".username").html(response.d[0].UserName);
                         $('#myModalprofilepopup').modal('show');
                     },
                     failure: function (response) {
                         alert(response.d);
                     },
                     error: function (response) {
                         alert(response.d);
                     }
                 });
                 return false;
             });
         });
</script>

 

Posted on Jul 10, 2017 09:07 AM Modified on on Jul 10, 2017 09:38 AM

Hi micah,

I have modified your code as per your requirement. So please refer the below code.

HTML

<div>
    <asp:DataList ID="dlUsers" runat="server" RepeatColumns="2" CellSpacing="10" RepeatDirection="Horizontal"
        RepeatLayout="Table">
        <ItemTemplate>
            <table>
                <tr>
                    <td>
                        <b>ID : </b>
                        <asp:Label ID="lblGallaryId" runat="server" Text='<%#Eval("Id") %>' /><br />
                        <b>Name : </b>
                        <asp:Label ID="lblName" runat="server" Text='<%#Eval("Name") %>' /><br />
                        <b>UserName : </b>
                        <asp:Label ID="Label2" runat="server" Text='<%#Eval("UserName") %>' />
                    </td>
                    <td>
                        <asp:Button ID="btncall" runat="server" Text="Show" class="btn btn-primary btn-sm" />
                    </td>
                </tr>
            </table>
        </ItemTemplate>
    </asp:DataList>
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <div class="container">
        <div class="row">
            <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                <ContentTemplate>
                    <asp:Label ID="Label1" runat="server" Text=""></asp:Label><br />
                    <%--Modal 1 Start--%>
                    <div class="modal fade" id="myModalprofilepopup" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
                        aria-hidden="true">
                        <div class="modal-dialog">
                            <div class="modal-content" style="height: auto">
                                <div class=" " style="position: absolute; bottom: 60px; top: 129px; left: 9px;">
                                    <div class=" pull-left " style="margin-bottom: 6px; background-color: transparent">
                                        <a id="A1" href="#" runat="server">
                                            <asp:Image ID="Image1photo" runat="server" ImageUrl='<%# String.Format("PROFILEPHOTOS/{0}",Eval("ImageName").ToString()) %>'
                                                class="userprofilepgoto img-responsive2  animated fadeInDown img-circle" Style="width: 90px;
                                                height: 90px" BorderStyle="Solid" BorderWidth="2" BorderColor="#CCCCCC" />
                                        </a>
                                    </div>
                                </div>
                                <a class=" pull-left" style="margin-left: 103px; margin-top: 2px">
                                    <asp:Label ID="Namepro" runat="server" Text='<%# Eval("Name") %>' Font-Bold="True"
                                        CssClass="namepro" Font-Size="Larger" ForeColor="Black" />
                                    <asp:Label ID="UserVerifyStatus" runat="server" CssClass="userverifystatus glyphicon glyphicon-ok-sign"
                                        title="." data-toggle="tooltip" Font-Size="Small" Style="display: none" ForeColor=""></asp:Label><asp:Label
                                            ID="UserName" Text='<%#Eval("UserName") %>' runat="server" CssClass="username" />
                                </a>
                                <asp:Label ID="lblGallaryId" Text='<%#Eval("UserId") %>' runat="server" Font-Size="0px" />
                                <div class="clearfix" style="">
                                </div>
                                <div id="modalbody5" class="modal-body">
                                    <div class="clearfix" style="">
                                    </div>
                                    <asp:Label ID="Summary" runat="server" Text="Hi am Test123 @ #Sportifer, one sports social community, share, hype and connect to everyone on sports world . "
                                        CssClass="summary" Font-Size="Larger" ForeColor="Black" />
                                    <div class="clearfix" style="">
                                    </div>
                                    <div class="clearfix" style="">
                                    </div>
                                    <%--Modal 1 End--%>
                </ContentTemplate>
            </asp:UpdatePanel>
        </div>
    </div>
</div>
<div>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
    <script type="text/javascript">
        $(function () {
            $('[id*=btncall]').on('click', function () {
                var id = $(this).closest('tr').find('[id*=lblGallaryId]').html();
                $.ajax({
                    type: "POST",
                    url: "Default2.aspx/GetGallery",
                    data: '{id:"' + id + '"}',
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (response) {
                        $(".userphotos").attr('src', 'BannerImage/' + response.d[0].photos);
                        $(".userprofilepgoto").attr('src', 'PROFILEPHOTOS/' + response.d[0].Image1photo);
                        $(".namepro").html(response.d[0].Namepro);
                        $(".username").html(response.d[0].UserName);
                        $(".summary").html(response.d[0].Summary);
                        //   $(".userverifystatus").html(response.d[0].UserVerifyStatus);
                        if (response.d[0].UserVerifyStatus == "1") {
                            $('[id*=UserVerifyStatus]').show();
                        }
                        else {
                            $('[id*=UserVerifyStatus]').hide();
                        }

                        $('#myModalprofilepopup').modal('show');
                    },
                    failure: function (response) {
                        alert(response.d);
                    },
                    error: function (response) {
                        alert(response.d);
                    }
                });
                return false;
            });
        });
    </script>
</div>

C#

[WebMethod]
public static List<Gallery> GetGallery(int id)
{
    string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
    using (SqlConnection con = new SqlConnection(constr))
    {
        using (SqlCommand cmd = new SqlCommand("SELECT ImageName as ImageBanner,ImageName,UserName,Name,UserVerifyStatus FROM User3  WHERE UserId = '" + id + "'"))
        {
            cmd.Connection = con;
            List<Gallery> gallery = new List<Gallery>();
            con.Open();
            SqlDataReader sdr = cmd.ExecuteReader();
            while (sdr.Read())
            {
                gallery.Add(new Gallery
                {
                    photos = sdr["ImageBanner"].ToString(),
                    Image1photo = sdr["ImageName"].ToString(),
                    UserName = sdr["UserName"].ToString(),
                    Namepro = sdr["Name"].ToString(),
                    UserVerifyStatus = sdr["UserVerifyStatus"].ToString(),
                });
            }

            con.Close();
            return gallery;
        }
    }
}

Vb.net

<WebMethod> _
Public Shared Function GetGallery(id As Integer) As List(Of Gallery)
	Dim constr As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
	Using con As New SqlConnection(constr)
		Using cmd As New SqlCommand("SELECT ImageName as ImageBanner,ImageName,UserName,Name,UserVerifyStatus FROM User3  WHERE UserId = '" + id + "'")
			cmd.Connection = con
			Dim gallery As New List(Of Gallery)()
			con.Open()
			Dim sdr As SqlDataReader = cmd.ExecuteReader()
			While sdr.Read()
				gallery.Add(New Gallery() With { _
					Key .photos = sdr("ImageBanner").ToString(), _
					Key .Image1photo = sdr("ImageName").ToString(), _
					Key .UserName = sdr("UserName").ToString(), _
					Key .Namepro = sdr("Name").ToString(), _
					Key .UserVerifyStatus = sdr("UserVerifyStatus").ToString() _
				})
			End While

			con.Close()
			Return gallery
		End Using
	End Using
End Function