[Sovled]How can I get ‘s value in div in asp:repeater which clicked div?

enter image description here

I want get <p>‘s value (Game Title Text)
When I clicked Div each game boxes.

I want to get ‘s value(ex>The Witcher 3: Wild Hunt)
and Add this value in URL.

like this
Store_Main.aspx/GameTitles/The Witcher 3

current url is
Store_Main.aspx

When I click “Cyberpunk 2077” div box,
url is Store_Main.aspx/GameTitles/Cyberpunk 2077

<asp:Repeater runat="server" ID="discountRepeater1">
    <ItemTemplate>
            <div class="div_discount_contentbox" id="div_discount_contentbox1"
                onmouseover="this.style.backgroundColor='#35373A'" onmouseout="this.style.backgroundColor='#1B1C1E'"
                onclick="onClickDivDiscount1()" runat="server">
                <div class="div_wrap_discount_image">
                    <img src='<%# Eval("메인이미지") %>'
                        class="discount_image" id="discount_image" runat="server" />
                </div>
                <div class="div_discount_title">
                    <p class="p p_discount_title"><%# Eval("게임명") %></p>
                </div>

                <div class="div_discount_price">
                    <div class="div_wrap_discount_rate">
                        <img src="Images/Icon/Icon_Discount.png" class="icon_discount" />
                        <p class="p p_discount_rate"><%# Convert.ToDouble(Eval("할인율")) * 100 %>%</p>
                    </div>
                    <div class="div_wrap_discount_price2">
                        <p class="p p_discount_price"><strike>₩<%# Eval("게임가격") %>원</strike></p>
                        <br />
                        <p class="p p_discounted_price" id="p_price" runat="server">
                            ₩<%# Convert.ToInt32(Eval("게임가격"))
                                           - Convert.ToInt32(Eval("게임가격")) * Convert.ToDouble(Eval("할인율")) %>원
                        </p>
                    </div>
                </div>
            </div>
     </ItemTemplate>
</asp:Repeater>

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

If you want to access to <p> inside of your js function onClickDivDiscount1

You have three options:

  1. pass your values inside of that function (Eval that you punt inside of your p’s), and update function to handle that parameters. For Example:

<asp:Repeater runat="server" ID="discountRepeater1">
    <ItemTemplate>
            <div class="div_discount_contentbox" id="div_discount_contentbox1"
                onmouseover="this.style.backgroundColor='#35373A'" onmouseout="this.style.backgroundColor='#1B1C1E'"
                onclick=onClickDivDiscount1('<%# Eval("게임명") %>', 'Eval("게임가격")') runat="server">
                <div class="div_wrap_discount_image">
                    <img src='<%# Eval("메인이미지") %>'
                        class="discount_image" id="discount_image" runat="server" />
                </div>
                <div class="div_discount_title">
                    <p class="p p_discount_title"><%# Eval("게임명") %></p>
                </div>

                <div class="div_discount_price">
                    <div class="div_wrap_discount_rate">
                        <img src="Images/Icon/Icon_Discount.png" class="icon_discount" />
                        <p class="p p_discount_rate"><%# Convert.ToDouble(Eval("할인율")) * 100 %>%</p>
                    </div>
                    <div class="div_wrap_discount_price2">
                        <p class="p p_discount_price"><strike>₩<%# Eval("게임가격") %>원</strike></p>
                        <br />
                        <p class="p p_discounted_price" id="p_price" runat="server">
                            ₩<%# Convert.ToInt32(Eval("게임가격"))
                                           - Convert.ToInt32(Eval("게임가격")) * Convert.ToDouble(Eval("할인율")) %>원
                        </p>
                    </div>
                </div>
            </div>
     </ItemTemplate>
</asp:Repeater>

Javascript:
function onClickDivDiscount1(discpuntTitle, discountPrice){
    alert(discountTitle, discountPrice);
}
  1. pass your div inside of that function, and update function to handle that div, and you will have access to subnodes from that function using common js, or jquery. For Example:

<asp:Repeater runat="server" ID="discountRepeater1">
    <ItemTemplate>
            <div class="div_discount_contentbox" id="div_discount_contentbox1"
                onmouseover="this.style.backgroundColor='#35373A'" onmouseout="this.style.backgroundColor='#1B1C1E'"
                onclick=onClickDivDiscount1(this) runat="server">
                <div class="div_wrap_discount_image">
                    <img src='<%# Eval("메인이미지") %>'
                        class="discount_image" id="discount_image" runat="server" />
                </div>
                <div class="div_discount_title">
                    <p class="p p_discount_title"><%# Eval("게임명") %></p>
                </div>

                <div class="div_discount_price">
                    <div class="div_wrap_discount_rate">
                        <img src="Images/Icon/Icon_Discount.png" class="icon_discount" />
                        <p class="p p_discount_rate"><%# Convert.ToDouble(Eval("할인율")) * 100 %>%</p>
                    </div>
                    <div class="div_wrap_discount_price2">
                        <p class="p p_discount_price"><strike>₩<%# Eval("게임가격") %>원</strike></p>
                        <br />
                        <p class="p p_discounted_price" id="p_price" runat="server">
                            ₩<%# Convert.ToInt32(Eval("게임가격"))
                                           - Convert.ToInt32(Eval("게임가격")) * Convert.ToDouble(Eval("할인율")) %>원
                        </p>
                    </div>
                </div>
            </div>
     </ItemTemplate>
</asp:Repeater>

Javascript:
function onClickDivDiscount1(_self){
    alert (_self.getElementsByClassName("p_discount_title").innerText);
// if you using jquery:
    alert ($(_self).find(".p_discount_title").text());
}
  1. CommandArgument and CommandName used for backend handlers, if you want that, you need any button control, as that properties exists only in IButton:
    https://docs.microsoft.com/en-us/dotnet/api/system.web.ui.webcontrols.ibuttoncontrol.commandargument?view=netframework-4.8

<asp:Repeater runat="server" ID="discountRepeater1">
    <ItemTemplate>
            <div class="div_discount_contentbox" id="div_discount_contentbox1"
                onmouseover="this.style.backgroundColor='#35373A'" onmouseout="this.style.backgroundColor='#1B1C1E'"
                onclick=onClickDivDiscount1() runat="server">
<asp:Button runat="server" id="btn1" Text="do" OnClick="btnDo_Click"
CommandArgument='<%# Eval("게임명") %>' CommandName='<%# Eval("게임가격") %>'></asp:Button>
                <div class="div_wrap_discount_image">
                    <img src='<%# Eval("메인이미지") %>'
                        class="discount_image" id="discount_image" runat="server" />
                </div>
                <div class="div_discount_title">
                    <p class="p p_discount_title"><%# Eval("게임명") %></p>
                </div>

                <div class="div_discount_price">
                    <div class="div_wrap_discount_rate">
                        <img src="Images/Icon/Icon_Discount.png" class="icon_discount" />
                        <p class="p p_discount_rate"><%# Convert.ToDouble(Eval("할인율")) * 100 %>%</p>
                    </div>
                    <div class="div_wrap_discount_price2">
                        <p class="p p_discount_price"><strike>₩<%# Eval("게임가격") %>원</strike></p>
                        <br />
                        <p class="p p_discounted_price" id="p_price" runat="server">
                            ₩<%# Convert.ToInt32(Eval("게임가격"))
                                           - Convert.ToInt32(Eval("게임가격")) * Convert.ToDouble(Eval("할인율")) %>원
                        </p>
                    </div>
                </div>
            </div>
     </ItemTemplate>
</asp:Repeater>

Codebehind C#
public void btnDo_Click(object sender, EventArgs e){
   btn1.Text = e.CommandName + e.CommandArgument;
}

Update:
I read your update of question, You dont need javascript here, you can use <asp:HyperLink> simple, like:
<asp:Repeater runat="server" ID="discountRepeater1">
    <ItemTemplate>
<asp:HyperLink ID="HyperLink1" NavigateUrl='<%# String.Concat("~/Store_Main.aspx/GameTitles/", Eval("게임명")) %>' runat="server">
            <div class="div_discount_contentbox" id="div_discount_contentbox1"
                onmouseover="this.style.backgroundColor='#35373A'" onmouseout="this.style.backgroundColor='#1B1C1E'">
                <div class="div_wrap_discount_image">
                    <img src='<%# Eval("메인이미지") %>'
                        class="discount_image" id="discount_image" runat="server" />
                </div>
                <div class="div_discount_title">
                    <p class="p p_discount_title"><%# Eval("게임명") %></p>
                </div>

                <div class="div_discount_price">
                    <div class="div_wrap_discount_rate">
                        <img src="Images/Icon/Icon_Discount.png" class="icon_discount" />
                        <p class="p p_discount_rate"><%# Convert.ToDouble(Eval("할인율")) * 100 %>%</p>
                    </div>
                    <div class="div_wrap_discount_price2">
                        <p class="p p_discount_price"><strike>₩<%# Eval("게임가격") %>원</strike></p>
                        <br />
                        <p class="p p_discounted_price" id="p_price" runat="server">
                            ₩<%# Convert.ToInt32(Eval("게임가격"))
                                           - Convert.ToInt32(Eval("게임가격")) * Convert.ToDouble(Eval("할인율")) %>원
                        </p>
                    </div>
                </div>
            </div>
</asp:HyperLink>
     </ItemTemplate>
</asp:Repeater>

Probably will need a small css styles after that.


All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes
Article Rating
Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x