[已解决]如何在单击 div 的 asp:repeater 中获取 <p> 在 div 中的值？

Question

enter image description here

我想获得<p>的价值（游戏标题文字）当我点击 Div 每个游戏框时。

我想获得的值（ex>The Witcher 3: Wild Hunt）并在 URL.

中添加此值

像这样 Store_Main.aspx/GameTitles/The 巫师 3

当前 url 是 Store_Main.aspx

当我点击“赛博朋克 2077”div 框时， url 是 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>&#8361;<%# Eval("게임가격") %>원</strike></p>
                        <br />
                        <p class="p p_discounted_price" id="p_price" runat="server">
                            &#8361;<%# Convert.ToInt32(Eval("게임가격"))
                                           - Convert.ToInt32(Eval("게임가격")) * Convert.ToDouble(Eval("할인율")) %>원
                        </p>
                    </div>
                </div>
            </div>
     </ItemTemplate>
</asp:Repeater>

Answer 1

如果您想在 js 函数中访问 <p> onClickDivDiscount1

您有三个选择：

在该函数内部传递您的值（Eval 您在 p 内部输入的值），并更新函数以处理该参数。例如：

<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>&#8361;<%# Eval("게임가격") %>원</strike></p>
                        <br />
                        <p class="p p_discounted_price" id="p_price" runat="server">
                            &#8361;<%# Convert.ToInt32(Eval("게임가격"))
                                           - Convert.ToInt32(Eval("게임가격")) * Convert.ToDouble(Eval("할인율")) %>원
                        </p>
                    </div>
                </div>
            </div>
     </ItemTemplate>
</asp:Repeater>

Javascript:

function onClickDivDiscount1(discpuntTitle, discountPrice){
    alert(discountTitle, discountPrice);
}

将您的 div 传递到该函数内部，并更新函数以处理该 div，您将可以使用通用 js 或 jquery 从该函数访问子节点。例如：

<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>&#8361;<%# Eval("게임가격") %>원</strike></p>
                        <br />
                        <p class="p p_discounted_price" id="p_price" runat="server">
                            &#8361;<%# 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());
}

CommandArgument 和 CommandName 用于后端处理程序，如果需要，您需要任何按钮控件，因为该属性仅存在于 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>&#8361;<%# Eval("게임가격") %>원</strike></p>
                        <br />
                        <p class="p p_discounted_price" id="p_price" runat="server">
                            &#8361;<%# Convert.ToInt32(Eval("게임가격"))
                                           - Convert.ToInt32(Eval("게임가격")) * Convert.ToDouble(Eval("할인율")) %>원
                        </p>
                    </div>
                </div>
            </div>
     </ItemTemplate>
</asp:Repeater>

代码隐藏 C#

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

更新： 我读了你的问题更新，你不需要 javascript 这里，你可以使用 <asp:HyperLink> 简单的，比如：

<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>&#8361;<%# Eval("게임가격") %>원</strike></p>
                        <br />
                        <p class="p p_discounted_price" id="p_price" runat="server">
                            &#8361;<%# Convert.ToInt32(Eval("게임가격"))
                                           - Convert.ToInt32(Eval("게임가격")) * Convert.ToDouble(Eval("할인율")) %>원
                        </p>
                    </div>
                </div>
            </div>
</asp:HyperLink>
     </ItemTemplate>
</asp:Repeater>

之后可能需要一个小 css 样式。

[已解决]如何在单击 div 的 asp:repeater 中获取 <p> 在 div 中的值？

[Sovled]How can I get <p>'s value in div in asp:repeater which clicked div?

c#

asp.net

webforms