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

时间:2020-10-09 08:56:53

标签: c# asp.net webforms

enter image description here

我想获取<p>的值(游戏标题文本) 当我单击Div时,每个游戏框都会出现。

我想获取的价值(例如,《巫师3:狂猎》) 并在URL中添加此值。

像这样 Store_Main.aspx / GameTitles / The Witcher 3

当前网址为 Store_Main.aspx

当我单击“ Cyber​​punk 2077” div框时, 网址是Store_Main.aspx / GameTitles / Cyber​​punk 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>

1 个答案:

答案 0 :(得分:0)

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

您有三个选择:

  1. 在该函数(在p的内部平移的Eval内传递值,并更新函数以处理该参数。例如:
<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);
}
  1. 在该函数内传递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());
}
  1. CommandArgumentCommandName用于后端处理程序,如果需要,则需要任何按钮控件,因为该属性仅存在于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样式。