C# 使用jquery或javascript隐藏/显示asp.net中继器中的特定项目数
我有ASP.NET中继器，我正在将酒店房间绑定到它，我需要显示最多3个房间，当用户单击“更多房间”按钮/锚时，应显示休息记录 我用两个ASP.NET中继器解决了这个问题，其中我将第一个中继器与3个房间绑定，将第二个中继器与其他房间绑定，并用div包装（使用jQuery显示/隐藏ID）。但我认为这不是一个好办法。我需要用一个ASP.NET转发器来完成。C# 使用jquery或javascript隐藏/显示asp.net中继器中的特定项目数,c#,jquery,asp.net,repeater,C#,Jquery,Asp.net,Repeater,我有ASP.NET中继器，我正在将酒店房间绑定到它，我需要显示最多3个房间，当用户单击“更多房间”按钮/锚时，应显示休息记录 我用两个ASP.NET中继器解决了这个问题，其中我将第一个中继器与3个房间绑定，将第二个中继器与其他房间绑定，并用div包装（使用jQuery显示/隐藏ID）。但我认为这不是一个好办法。我需要用一个ASP.NET转发器来完成。 我还需要使用jquery slideToggle（）API显示和隐藏隐藏的房间 以下是我使用两个中继器的代码： <asp:Repeater
我还需要使用jquery slideToggle（）API显示和隐藏隐藏的房间 以下是我使用两个中继器的代码：
<asp:Repeater ID="RPRoomsWithThreeRecords" runat="server">
<ItemTemplate>
<div class="search_hotel_book_now">
<div class="search_hotel_book_left">
<p>Executive Room with bed and breakfast</p>
</div>
<div class="search_hotel_book_right">
<a href="#">Book Now</a> <span>2 500,-</span>
<p>NOK</p>
</div>
</div>
</ItemTemplate>
</asp:Repeater>
<div id="hideShowDiv">
<asp:Repeater ID="RPRoomsOtherRecords" runat="server">
<ItemTemplate>
<div class="search_hotel_book_now">
<div class="search_hotel_book_left">
<p> Executive Room with bed and breakfast</p>
</div>
<div class="search_hotel_book_right">
<a href="#">Book Now</a> <span>2 500,-</span>
<p> NOK</p>
</div>
</div>
</ItemTemplate>
</asp:Repeater>
</div>
2500-
诺克
2 500,-
诺克
<style type="text/css">
.search_hotel_book_now
{
border: 1px solid black;
display: block;
}
.hide
{
display: none;
}
</style>
<asp:Repeater runat="server" ID="rptr">
<ItemTemplate>
<div class='<%# (Container.ItemIndex < 3 ? "search_hotel_book_now" : "hide") %>'>
<div class="search_hotel_book_left">
<p>
Executive Room with bed and breakfast</p>
</div>
<div class="search_hotel_book_right">
<a href="#">Book Now</a> <span>2 500,-</span>
<p>NOK</p>
</div>
<%# Eval("Your_Field")%>
</div>
</ItemTemplate>
<FooterTemplate>
<div id="viewMore">
View More</div>
</FooterTemplate>
</asp:Repeater>
<script type="text/javascript">
$("#viewMore").click(function () {
$(".hide").removeClass("hide").addClass("search_hotel_book_now");
$("#viewMore").hide();
});
</script>
.立即搜索酒店预订
{
边框：1px纯黑；
显示：块；
}
隐藏
{
显示：无；
}
2 500,-
诺克
查看更多
$（“#查看更多”）。单击（函数（）{
$（“.hide”）.removeClass（“hide”）.addClass（“立即搜索酒店和预订”）；
$（“#查看更多”）.hide（）；
});
这里最重要的是
class='<%# (Container.ItemIndex < 3 ? "search_hotel_book_now" : "hide") %>'
class=''
隐藏类，该类将最初隐藏它。您可以这样做
<style type="text/css">
.search_hotel_book_now
{
border: 1px solid black;
display: block;
}
.hide
{
display: none;
}
</style>
<asp:Repeater runat="server" ID="rptr">
<ItemTemplate>
<div class='<%# (Container.ItemIndex < 3 ? "search_hotel_book_now" : "hide") %>'>
<div class="search_hotel_book_left">
<p>
Executive Room with bed and breakfast</p>
</div>
<div class="search_hotel_book_right">
<a href="#">Book Now</a> <span>2 500,-</span>
<p>NOK</p>
</div>
<%# Eval("Your_Field")%>
</div>
</ItemTemplate>
<FooterTemplate>
<div id="viewMore">
View More</div>
</FooterTemplate>
</asp:Repeater>
<script type="text/javascript">
$("#viewMore").click(function () {
$(".hide").removeClass("hide").addClass("search_hotel_book_now");
$("#viewMore").hide();
});
</script>
.立即搜索酒店预订
{
边框：1px纯黑；
显示：块；
}
隐藏
{
显示：无；
}
2 500,-
诺克
查看更多
$（“#查看更多”）。单击（函数（）{
$（“.hide”）.removeClass（“hide”）.addClass（“立即搜索酒店和预订”）；
$（“#查看更多”）.hide（）；
});
这里最重要的是
class='<%# (Container.ItemIndex < 3 ? "search_hotel_book_now" : "hide") %>'
class=''
我所做的是在数据绑定期间检查被绑定的id项>索引3，然后对其应用hide
类，该类将最初隐藏它。您可以使用Jquery:lt（）选择器：
$('.search_hotel_book_now:lt(3)').each(function(){
$(this).show();
});
默认情况下隐藏项目，并使用：lt（）显示前三个项目
对于要显示的其余部分，请设置一个单击侦听器：
$('#more-items').click(function() {
$('.search_hotel_book_now').show();
});
您可以使用Jquery:lt（）选择器：
$('.search_hotel_book_now:lt(3)').each(function(){
$(this).show();
});
默认情况下隐藏项目，并使用lt（）显示前三个项目
对于要显示的其余部分，请设置一个单击侦听器：
$('#more-items').click(function() {
$('.search_hotel_book_now').show();
});
您可以在中继器上进行双循环，而不是使用两个复制器。。
1） 外部回路将在每个酒店工作
2） 内部回路将在每个房间工作
前
$('#Selector for each hotel').each(function(e,res){
$(res).children('selector for each rooms').each(function(e1,res1){
if(parseInt(e1)>=3)
{
$(this).hide(); or .css('display','none');
}
});
$(this).children('selector for more button').click(function(){
$(this).parents('selector to the top parent of each rooms').children('selector for each rooms').show();
});
});
我想您很擅长jQuery，因为我无法从您的代码中获取选择器
如果您没有得到它，请告诉我，而不是使用两个reater，您可以做的是在中继器上进行双循环。。
1） 外部回路将在每个酒店工作
2） 内部回路将在每个房间工作
前
$('#Selector for each hotel').each(function(e,res){
$(res).children('selector for each rooms').each(function(e1,res1){
if(parseInt(e1)>=3)
{
$(this).hide(); or .css('display','none');
}
});
$(this).children('selector for more button').click(function(){
$(this).parents('selector to the top parent of each rooms').children('selector for each rooms').show();
});
});
我想您很擅长jQuery，因为我无法从您的代码中获取选择器
如果您没有收到，请告诉我。最后：）我已经收到了。：）感谢@Ahmed和@Hiren Desai的帮助：）您的示例为我提供了一种使用jQuery API解决问题的方法
基本上，我使用jquery将隐藏记录包装到一个DIV中，然后我可以使用jquery API slideToggle（）滑动和滑动隐藏记录
ASP.NET代码
<asp:Repeater runat="server" ID="RPHotels" OnItemDataBound="RPHotels_ItemDataBound">
<ItemTemplate>
<div class="search_hotel_div">
<div class="search_hotel_right">
<asp:Repeater runat="server" ID="RPRooms" OnItemDataBound="RPRooms_ItemDataBound">
<ItemTemplate>
<div class="search_hotel_book_now">
<div class="search_hotel_book_left">
<p>
<asp:Literal ID="lblRoomType" runat="server" Text="Double Ensuite Double Bed Tv Telephone"></asp:Literal>
</p>
</div>
<div class="search_hotel_book_right">
<a href="#">Book Now</a> <span>
<asp:Literal ID="lblRoomPrice" runat="server" Text="800,-"></asp:Literal></span>
</div>
</div>
</ItemTemplate>
</asp:Repeater>
<div class="more_rooms srchbox">
<a href="#" class="moreRooms">more rooms</a></div>
</div>
</div>
<hr style="border: none; border-top: #d9d9d9 solid 1px; margin-top: 10px;" />
</ItemTemplate>
JQUERY代码
//Loop will work on each Hotel
$(".search_hotel_div").each(function (e) {
//Loop will work on each Hotel's Room
//Select rooms from bottom to 4th room using jQquery slice()
//and wrap selected items with a div with class name .divSlideUpDown:
$(".search_hotel_book_now", this).slice(3).wrapAll("<div class='divSlideUpDown' style='display:none;' />");
$(this).find('.moreRooms').click(function () {
//my Toggle work here :)
$(this).parents().siblings(".divSlideUpDown").slideToggle();
$(this).text($(this).text() == "more rooms" ? "hide rooms" : "more rooms")
return false;
});
});
//每个酒店都可以使用循环
$（“.search\u hotel\u div”）。每个（功能（e）{
//Loop将在每个酒店的房间工作
//使用jQquery slice（）从底部到第四个房间选择房间
//并使用类名为的div包装所选项目。divSlideUpDown:
$（“.search\u hotel\u book\u now”，this）.slice（3.wrapAll）（“”）；
$（此）。查找（'.moreRooms'）。单击（函数（）{
//我在这里的工作：）
$（this）.parents（）.sides（“.divSlideUpDown”）.slideToggle（）；
$（this）.text（$（this）.text（）==“更多房间”？“隐藏房间”：“更多房间”）
返回false；
});
});
最后：）我已经做了感谢@Ahmed和@Hiren Desai的帮助：）您的示例为我提供了一种使用jQuery API解决问题的方法
基本上，我使用jquery将隐藏记录包装到一个DIV中，然后我可以使用jquery API slideToggle（）滑动和滑动隐藏记录
ASP.NET代码
<asp:Repeater runat="server" ID="RPHotels" OnItemDataBound="RPHotels_ItemDataBound">
<ItemTemplate>
<div class="search_hotel_div">
<div class="search_hotel_right">
<asp:Repeater runat="server" ID="RPRooms" OnItemDataBound="RPRooms_ItemDataBound">
<ItemTemplate>
<div class="search_hotel_book_now">
<div class="search_hotel_book_left">
<p>
<asp:Literal ID="lblRoomType" runat="server" Text="Double Ensuite Double Bed Tv Telephone"></asp:Literal>
</p>
</div>
<div class="search_hotel_book_right">
<a href="#">Book Now</a> <span>
<asp:Literal ID="lblRoomPrice" runat="server" Text="800,-"></asp:Literal></span>
</div>
</div>
</ItemTemplate>
</asp:Repeater>
<div class="more_rooms srchbox">
<a href="#" class="moreRooms">more rooms</a></div>
</div>
</div>
<hr style="border: none; border-top: #d9d9d9 solid 1px; margin-top: 10px;" />
</ItemTemplate>
JQUERY代码
//Loop will work on each Hotel
$(".search_hotel_div").each(function (e) {
//Loop will work on each Hotel's Room
//Select rooms from bottom to 4th room using jQquery slice()
//and wrap selected items with a div with class name .divSlideUpDown:
$(".search_hotel_book_now", this).slice(3).wrapAll("<div class='divSlideUpDown' style='display:none;' />");
$(this).find('.moreRooms').click(function () {
//my Toggle work here :)
$(this).parents().siblings(".divSlideUpDown").slideToggle();
$(this).text($(this).text() == "more rooms" ? "hide rooms" : "more rooms")
return false;
});
});
//每个酒店都可以使用循环
$（“.search\u hotel\u div”）。每个（功能（e）{
//Loop将在每个酒店的房间工作
//使用jQquery slice（）从底部到第四个房间选择房间
//并使用类名为的div包装所选项目。divSlideUpDown:
$（“.search\u hotel\u book\u now”，this）.slice（3.wrapAll）（“”）；
$（此）。查找（'.moreRooms'）。单击（函数（）{
//我在这里的工作：）
$（this）.parents（）.sides（“.divSlideUpDown”）.slideToggle（）；
$（this）.text（$（this）.text（）==“更多房间”？“隐藏房间”：“更多房间”）
返回false；
});
});
yogi，很抱歉我忘了告诉你一件事，我需要用jQuery slideToggle（）API显示和隐藏。yogi，很抱歉我忘了告诉你一件事，我需要用jQuery slideToggle（）API显示和隐藏。