Display image in Modal Popup based on Repeater selection using jQuery Ajax in ASP.Net

micah

SOLVED CLOSED ACTIVE ANSWERED
User: micah
Posted: on May 26, 2017 02:05 AM
Forum: Data Controls
Answer: 1
Views: 8234
Sample Code: Download

I have image gallery which if i click on any image inside button it will popup the picture, but the jquery is showing undefind error

<script type="text/javascript">
        $(function () {
            // btncall 1 click
            $('[id*=btncall]').on('click', function () {
                var id = $(this).closest('tr').find($('[id*=lblGallaryId]')).text();
                $.ajax({
                    type: "POST",
                    url: "AlbumPage.aspx/GetGallery",
                    data: '{id:"' + id + '"}',
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (response) {
                        var table = $("#modalbody").find('div').eq(0).clone(true);
                        var customers = response.d;
                        $("#modalbody").find('div').eq(0).remove();
                        $(customers).each(function () {
                          
                            $(".userphotos", table).attr('src', 'UserImage/' + this.photos);

                            $(".username", table).html(this.UserName);
                           
                            $("#modalbody").append(table);
                            table = $("#modalbody").find('div').eq(0).clone(true);
                        });
                        $('#myModal').modal('show');
                       
                    },
                    failure: function (response) {
                        alert(response.d);
                    },
                    error: function (response) {
                        alert(response.d);
                    }
                });
                return false;
            });
        });
</script>
   --------------------------------------------------------------------------------------------------

 string username9 = this.Page.User.Identity.Name;
                Getgallery(username9);
            }
        
    }

    public void Getgallery(string username9)
    {
        // int followerid;
        //  int followingid;
        string str = ConfigurationManager.ConnectionStrings["DB"].ConnectionString;
        string getADPOST = "GetUserGallery";
        using (SqlConnection con = new SqlConnection(str))
        {
            con.Open();
            using (SqlCommand cmd = new SqlCommand(getADPOST, con))
            {
                cmd.CommandType = CommandType.StoredProcedure;
                cmd.Parameters.AddWithValue("@UserName", Session["userName"]);
              //  cmd.Parameters.AddWithValue("@FriendUserName", Session["userName"]);
                //   cmd.Parameters.AddWithValue("@Name", username);
                //   
                SqlDataAdapter da = new SqlDataAdapter(cmd);
                DataTable ds = new DataTable();
                da.Fill(ds);




                Repeater1.DataSource = ds;
                Repeater1.DataBind();
            }
        }
    }
    
    [WebMethod]
    public static List<Gallery> GetGallery(int id)
    {
        string constr = ConfigurationManager.ConnectionStrings["DB"].ConnectionString;
        using (SqlConnection con = new SqlConnection(constr))
        {
            using (SqlCommand cmd = new SqlCommand("SELECT ImageName,UserName FROM UserImageGallery WHERE Id = '" + id + "'"))
            {
                cmd.Connection = con;
                List<Gallery> customers = new List<Gallery>();
                con.Open();
                SqlDataReader sdr = cmd.ExecuteReader();
                while (sdr.Read())
                {
                    customers.Add(new Gallery
                    {
                        photos = sdr["ImageName"].ToString(),
                         
                       // Name = sdr["fName"].ToString(),
                        UserName = sdr["UserName"].ToString(),
                       // ShareContent = sdr["ShareContent"].ToString(),


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

Download FREE API for Word, Excel and PDF in ASP.Net

AnandM

0 7

Reply
ANSWER
User: AnandM
Replied: on May 26, 2017 07:58 AM
Report

micah says:
<asp:Repeater ID="Repeater1" runat="server" >







           <ItemTemplate>





               <span class="gamma-container" style="margin-bottom:6px" >

                   <asp:LinkButton ID="btncall" runat="server">

   <asp:Image ID="Image2user" Text='<%#Eval("ImageName")%>' runat="server" src='<%#getSRCDD(Container.DataItem)%> ' class="mygallery img-thumbnail animated slideInLeft" style=" background-repeat:no-repeat;" alt="" data-aria-label-part="" background-image='<%# ("../UserImage/") %>' ImageAlign="Middle" />

                          </asp:LinkButton>

                      </span>



               </ItemTemplate>

        </asp:Repeater>

replace above with below code

<div>
    <asp:Repeater ID="Repeater1" runat="server">
        <ItemTemplate>
            <span class="gamma-container" style="margin-bottom: 6px">
                <asp:LinkButton ID="btncall" runat="server">
                    <asp:Image ID="Image2user" Text='<%#Eval("ImageName")%>' runat="server" src='<%#getSRCDD(Container.DataItem)%>'
                        class="mygallery img-thumbnail animated slideInLeft" Style="background-repeat: no-repeat;"
                        alt="" data-aria-label-part="" background-image='<%# ("../UserImage/") %>' ImageAlign="Middle" />
                </asp:LinkButton>
                <asp:Label ID="lblGallaryId" Text='<%#Eval("Id") %>' runat="server" />
            </span>
        </ItemTemplate>
    </asp:Repeater>
</div>

micah says:
<script type="text/javascript">

        $(function () {

            // btncall 1 click

            $('[id*=btncall]').on('click', function () {

                var id = $(this).closest('tr').find($('[id*=lblGallaryId]')).text();

                $.ajax({

                    type: "POST",

                    url: "AlbumPage.aspx/GetGallery",

                    data: '{id:"' + id + '"}',

                    contentType: "application/json; charset=utf-8",

                    dataType: "json",

                    success: function (response) {

                        var table = $("#modalbody").find('div').eq(0).clone(true);

                        var customers = response.d;

                        $("#modalbody").find('div').eq(0).remove();

                        $(customers).each(function () {



                            $(".userphotos", table).attr('src', 'UserImage/' + this.photos);

                            $(".username", table).html(this.UserName);



                            $("#modalbody").append(table);

                            table = $("#modalbody").find('div').eq(0).clone(true);

                        });

                        $('#myModal').modal('show');



                    },

                    failure: function (response) {

                        alert(response.d);

                    },

                    error: function (response) {

                        alert(response.d);

                    }

                });

                return false;

            });

        });

</script>

above code with below

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

Dont simply copy paste the code first try to understand the code what is done and how it is done unecessarily you have used the code which is nothing to do with your requirement.

I agree, here is the link: https://www.e-iceblue.com/Introduce/spire-office-for-net-free.html

Display image in Modal Popup based on Repeater selection using jQuery Ajax in ASP.Net

Company

Explore

Follow us

Contact Us