ایجاد دکمه Read More در سایت

[manit44]

با سلام

بنده یک سایتی مطابق تصویر پیوست درست کردم که با Entity Framework نوشته شده و آیمتها به صورت داینامیک و با String Builder ساخته میشن. حالا میخوام اگر رکوردهام بیشتر از 12 تا شد دکمه Read more فعال بشه و ادامه پست هام با کلیک بر روی دکمه Read More نمایش داده بشن ولی هر کاری کردم نتونستم. خواهشا کمک کنید چون بنده قبلا هم چند تا پست گذاشته بودم ولی کسی جواب نداد.

کد سی شارپ:
using (Entities context = new Entities()) {
StringBuilder sb = new StringBuilder();
int count = context.tblBooks.ToList().Count + context.tblCatalogs.ToList().Count +
context.tblDesigns.ToList().Count + context.tblDocuments.ToList().Count +
context.tblFilms.ToList().Count + context.tblMagazines.ToList().Count +
context.tblPaintings.ToList().Count + context.tblPhotoes.ToList().Count +
context.tblPostalCards.ToList().Count + context.tblPosters.ToList().Count +
context.tblPrints.ToList().Count + context.tblVoices.ToList().Count;


if (count > 12)
{
sb.Append("<div class='main-row-archive'>");
sb.Append("<div class='column-container'>");
foreach (var book in context.tblBooks.ToList())
{
string hashID = Helper.Encrypt(book.Id);
sb.Append("<a href=Detail.aspx?ID=" + hashID + " style ='text-decoration: none; color: #090b06;'>");
sb.Append("<div class='column-box' id='box'>");
sb.Append("<img class='archive-image' src='data:image/jpg;base64," + Convert.ToBase64String(book.ArchiveImage) + "'/>");
sb.Append("<div class='photo-desc'>");
sb.Append("<p>" + book.BookTitle + "</p>");
sb.Append("<p>" + book.BookSubject + "</p>");
sb.Append("<p>" + book.Publisher + "</p>");
sb.Append("</div>");
sb.Append("</div>");
sb.Append("</a>");
}


foreach (var catalog in context.tblCatalogs.ToList())
{
string hashID = Helper.Encrypt(catalog.Id);
sb.Append("<a href=Detail.aspx?ID=" + hashID + " style ='text-decoration: none; color: #090b06;'>");
sb.Append("<div class='column-box'>");
sb.Append("<img class='archive-image' src='data:image/jpg;base64," + Convert.ToBase64String(catalog.ArchiveImage) + "'/>");
sb.Append("<div class='photo-desc'>");
sb.Append("<p>" + catalog.CatalogTitle + "</p>");
sb.Append("<p>" + catalog.CatalogSubject + "</p>");
sb.Append("<p>" + catalog.Designer + "</p>");
sb.Append("</div>");
sb.Append("</div>");
sb.Append("</a>");
}


foreach (var design in context.tblDesigns.ToList())
{
string hashID = Helper.Encrypt(design.Id);
sb.Append("<a href=Detail.aspx?ID=" + hashID + " style ='text-decoration: none; color: #090b06;'>");
sb.Append("<div class='column-box'>");
sb.Append("<img class='archive-image' src='data:image/jpg;base64," + Convert.ToBase64String(design.ArchiveImage) + "'/>");
sb.Append("<div class='photo-desc'>");
sb.Append("<p>" + design.DesignTitle + "</p>");
sb.Append("<p>" + design.DesignSubject + "</p>");
sb.Append("<p>" + design.DesignDate + "</p>");
sb.Append("</div>");
sb.Append("</div>");
sb.Append("</a>");
}


foreach (var document in context.tblDocuments.ToList())
{
string hashID = Helper.Encrypt(document.Id);
sb.Append("<a href=Detail.aspx?ID=" + hashID + " style ='text-decoration: none; color: #090b06;'>");
sb.Append("<div class='column-box'>");
sb.Append("<img class='archive-image' src='data:image/jpg;base64," + Convert.ToBase64String(document.ArchiveImage) + "'/>");
sb.Append("<div class='photo-desc'>");
sb.Append("<p>" + document.DocTitle + "</p>");
sb.Append("<p>" + document.DocSubject + "</p>");
sb.Append("<p>" + document.DocDate + "</p>");
sb.Append("</div>");
sb.Append("</div>");
sb.Append("</a>");
}


foreach (var film in context.tblFilms.ToList())
{
string hashID = Helper.Encrypt(film.Id);
sb.Append("<a href=Detail.aspx?ID=" + hashID + " style ='text-decoration: none; color: #090b06;'>");
sb.Append("<div class='column-box'>");
sb.Append("<img class='archive-image' src='data:image/jpg;base64," + Convert.ToBase64String(film.ArchiveImage) + "'/>");
sb.Append("<div class='photo-desc'>");
sb.Append("<p>" + film.FilmTitle + "</p>");
sb.Append("<p>" + film.FilmSubject + "</p>");
sb.Append("<p>" + film.FilmDate + "</p>");
sb.Append("</div>");
sb.Append("</div>");
sb.Append("</a>");
}


foreach (var magazine in context.tblMagazines.ToList())
{
string hashID = Helper.Encrypt(magazine.Id);
sb.Append("<a href=Detail.aspx?ID=" + hashID + " style ='text-decoration: none; color: #090b06;'>");
sb.Append("<div class='column-box'>");
sb.Append("<img class='archive-image' src='data:image/jpg;base64," + Convert.ToBase64String(magazine.ArchiveImage) + "'/>");
sb.Append("<div class='photo-desc'>");
sb.Append("<p>" + magazine.MagazineTitle + "</p>");
sb.Append("<p>" + magazine.MagazineSubject + "</p>");
sb.Append("<p>" + magazine.Publisher + "</p>");
sb.Append("</div>");
sb.Append("</div>");
sb.Append("</a>");
}


foreach (var painting in context.tblPaintings.ToList())
{
string hashID = Helper.Encrypt(painting.Id);
sb.Append("<a href=Detail.aspx?ID=" + hashID + " style ='text-decoration: none; color: #090b06;'>");
sb.Append("<div class='column-box'>");
sb.Append("<img class='archive-image' src='data:image/jpg;base64," + Convert.ToBase64String(painting.ArchiveImage) + "'/>");
sb.Append("<div class='photo-desc'>");
sb.Append("<p>" + painting.PaintingTitle + "</p>");
sb.Append("<p>" + painting.PaintingSubject + "</p>");
sb.Append("<p>" + painting.PaintingDate + "</p>");
sb.Append("</div>");
sb.Append("</div>");
sb.Append("</a>");
}


foreach (var photo in context.tblPhotoes.ToList())
{
string hashID = Helper.Encrypt(photo.Id);
sb.Append("<a href=Detail.aspx?ID=" + hashID + " style ='text-decoration: none; color: #090b06;'>");
sb.Append("<div class='column-box'>");
sb.Append("<img class='archive-image' src='data:image/jpg;base64," + Convert.ToBase64String(photo.ArchiveImage) + "'/>");
sb.Append("<div class='photo-desc'>");
sb.Append("<p>" + photo.PhotoTitle + "</p>");
sb.Append("<p>" + photo.PhotoSubject + "</p>");
sb.Append("<p>" + photo.PhotoDate + "</p>");
sb.Append("</div>");
sb.Append("</div>");
sb.Append("</a>");
}


foreach (var postalCard in context.tblPostalCards.ToList())
{
string hashID = Helper.Encrypt(postalCard.Id);
sb.Append("<a href=Detail.aspx?ID=" + hashID + " style ='text-decoration: none; color: #090b06;'>");
sb.Append("<div class='column-box'>");
sb.Append("<img class='archive-image' src='data:image/jpg;base64," + Convert.ToBase64String(postalCard.ArchiveImage) + "'/>");
sb.Append("<div class='photo-desc'>");
sb.Append("<p>" + postalCard.PostaCardTitle + "</p>");
sb.Append("<p>" + postalCard.PostaCardSubject + "</p>");
sb.Append("<p>" + postalCard.PostalCardDate + "</p>");
sb.Append("</div>");
sb.Append("</div>");
sb.Append("</a>");
}


foreach (var poster in context.tblPosters.ToList())
{
string hashID = Helper.Encrypt(poster.Id);
sb.Append("<a href=Detail.aspx?ID=" + hashID + " style ='text-decoration: none; color: #090b06;'>");
sb.Append("<div class='column-box'>");
sb.Append("<img class='archive-image' src='data:image/jpg;base64," + Convert.ToBase64String(poster.ArchiveImage) + "'/>");
sb.Append("<div class='photo-desc'>");
sb.Append("<p>" + poster.PosterTitle + "</p>");
sb.Append("<p>" + poster.PosterSubject + "</p>");
sb.Append("<p>" + poster.PosterDate + "</p>");
sb.Append("</div>");
sb.Append("</div>");
sb.Append("</a>");
}


foreach (var print in context.tblPrints.ToList())
{
string hashID = Helper.Encrypt(print.Id);
sb.Append("<a href=Detail.aspx?ID=" + hashID + " style ='text-decoration: none; color: #090b06;'>");
sb.Append("<div class='column-box'>");
sb.Append("<img class='archive-image' src='data:image/jpg;base64," + Convert.ToBase64String(print.ArchiveImage) + "'/>");
sb.Append("<div class='photo-desc'>");
sb.Append("<p>" + print.PrintTitle + "</p>");
sb.Append("<p>" + print.PrintSubject + "</p>");
sb.Append("<p>" + print.PrintDate + "</p>");
sb.Append("</div>");
sb.Append("</div>");
sb.Append("</a>");
}


foreach (var voice in context.tblVoices.ToList())
{
string hashID = Helper.Encrypt(voice.Id);
sb.Append("<a href=Detail.aspx?ID=" + hashID + " style ='text-decoration: none; color: #090b06;'>");
sb.Append("<div class='column-box'>");
sb.Append("<img class='archive-image' src='data:image/jpg;base64," + Convert.ToBase64String(voice.ArchiveImage) + "'/>");
sb.Append("<div class='photo-desc'>");
sb.Append("<p>" + voice.VoiceTitle + "</p>");
sb.Append("<p>" + voice.VoiceSubject + "</p>");
sb.Append("<p>" + voice.RecordDate + "</p>");
sb.Append("</div>");
sb.Append("</div>");
sb.Append("</a>");
}
sb.Append("</div>");
sb.Append("</div>");
outer.InnerHtml = sb.ToString();
}
}


کد aspx:
<div class="wrapper"> <a href="Home.aspx">
<img src="files/logo.png" class="logo" />
</a>
<div class="section section--menu" id="Viola">
<nav class="menu menu--viola">
<ul class="menu__list">
<li class="menu__item menu__item--current"><a href="Project.aspx" class="menu__link">پروژه</a></li>
<li class="menu__item"><a href="Magazine.aspx" class="menu__link">مجله</a></li>
<li class="menu__item"><a href="Book.aspx" class="menu__link">کتاب</a></li>
<li class="menu__item"><a href="Link.aspx" class="menu__link">پیوند</a></li>
<li class="menu__item"><a href="Archive.aspx" class="menu__link">آرشیو</a></li>
</ul>
</nav>
</div>
<div class="input-center">
<asp:TextBox runat="server" CssClass="search-box" ID="txtSearch" OnTextChanged="txtSearch_TextChanged" placeholder="جستجو..." AutoPostBack="true"></asp:TextBox>
</div>
<div class="checkbox-wrapper">
<label>کتاب</label>
<input type="checkbox" runat="server" id="chkBook" onserverchange="chkBook_ServerChange" />
<br />
<br />
<label>مجله</label>
<input type="checkbox" runat="server" id="chkMagazine" onserverchange="chkMagazine_ServerChange" />
<br />
<br />
<label>کاتالوگ</label>
<input type="checkbox" runat="server" id="chkCatalog" onserverchange="chkCatalog_ServerChange" />
<br />
<br />
<label>سند</label>
<input type="checkbox" runat="server" id="chkDocument" onserverchange="chkDocument_ServerChange" />
<br />
<br />
<label>طراحی</label>
<input type="checkbox" runat="server" id="chkDesign" onserverchange="chkDesign_ServerChange" />
<br />
<br />
<label>نقاشی</label>
<input type="checkbox" runat="server" id="chkPainting" onserverchange="chkPainting_ServerChange" />
<br />
<br />
<label>پوستر</label>
<input type="checkbox" runat="server" id="chkPoster" onserverchange="chkPoster_ServerChange" />
<br />
<br />
<label>چاپ</label>
<input type="checkbox" runat="server" id="chkPrint" onserverchange="chkPrint_ServerChange" />
<br />
<br />
<label>کارت پستال</label>
<input type="checkbox" runat="server" id="chkPostalCard" onserverchange="chkPostalCard_ServerChange" />
<br />
<br />
<label>عکس</label>
<input type="checkbox" runat="server" id="chkPhoto" onserverchange="chkPhoto_ServerChange" />
<br />
<br />
<label>فیلم</label>
<input type="checkbox" runat="server" id="chkFilm" onserverchange="chkFilm_ServerChange" />
<br />
<br />
<label>صدا</label>
<input type="checkbox" runat="server" id="chkVoice" onserverchange="chkVoice_ServerChange" />
<br />
<br />
<div class="seperator"></div>
<br />
<label>عنوان</label>
<input type="checkbox" runat="server" id="chkTitle" onserverchange="chkTitle_ServerChange" />
<br />
<br />
<label>موضوع</label>
<input type="checkbox" runat="server" id="chkSubject" onserverchange="chkSubject_ServerChange" />
<br />
<br />
<label>پدیدآور / هنرمند</label>
<input type="checkbox" runat="server" id="chkPublisher" onserverchange="chkPublisher_ServerChange" />
<br />
<br />
<label>تاریخ نشر / اثر</label>
<input type="checkbox" runat="server" id="chkPublishDate" onserverchange="chkPublishDate_ServerChange" />
<br />
<br />
<label>محل نشر</label>
<input type="checkbox" runat="server" id="chkPublishPlace" onserverchange="chkPublishPlace_ServerChange" />
<br />
<br />
<div class="seperator"></div>
<br />
<label>فارسی</label>
<input type="checkbox" runat="server" value="فارسی" id="chkPersian" onserverchange="chkPersian_ServerChange" />
<br />
<br />
<label>انگلیسی</label>
<input type="checkbox" runat="server" value="انگلیسی" id="chkEnglish" onserverchange="chkEnglish_ServerChange" />
<br />
<br />
<label>فرانسوی</label>
<input type="checkbox" runat="server" value="فرانسوی" id="chkFrench" onserverchange="chkFrench_ServerChange" />
<br />
<br />
<label>روسی</label>
<input type="checkbox" runat="server" value="روسی" id="chkRussia" onserverchange="chkRussia_ServerChange" />
<br />
<br />
<label>عربی</label>
<input type="checkbox" runat="server" value="عربی" id="chkArabic" onserverchange="chkArabic_ServerChange" />
<br />
<br />
</div>
<div id="outer" runat="server">
</div>
<span id="more"></span>
<button onclick="readMore()" id="myBtn">نمایش بیشتر</button>
<div class="footer">
<p>«پژوهش‌ های فرهنگی تهران» در دو بخش «پروژه ‌های پژوهشی» و «گردآوری اسناد » فرهنگ و هنر ایران فعال است. تمرکزش بر گردآوری موضوعی مستندات پراکنده‌ی گنجینه‌های دولتی و خصوصی‌، همچنین تعریف یا همکاری در پروژه های پژوهشی در این زمینه است، تا علاوه بر امکان دسترسی آسان تر هنرپژوهان به این مجموعه ها، با انتشارشان،ثبت و همگانی سازی بخش هایی از اسناد فرهنگ و هنر ایران را تسهیل نماید.</p>
<br />
<p>برای دست یابی به فایل با کیفیت تصاویر لطفا از طریق ایمیل با ما در تماس باشید:</p>
<div class="icons">
<a href="mailto:tehranculturalresearch@gmail.com" class="email">
<img src="fonts/gmail.svg" />
</a>
<a href="https://instagram.com/tehran_cultural_research?igshid=1is6g76qg8a8i" class="instagram">
<img src="fonts/instagram.svg" />
</a>
</div>
</div>
</div>


کد CSS:
#more { display: none;
}


#myBtn {
margin-bottom: 250px;
width: 884px;
height: 50px;
background-color: red;
margin-right: 250px;
text-align: center;
color: white;
}

کد جاوا اسکریپت:
function readMore() { var dots = document.getElementById("dots");
var moreText = document.getElementById("more");
var btnText = document.getElementById("myBtn");


if (dots.style.display === "none") {
dots.style.display = "inline";
btnText.innerHTML = "نمایش بیشتر";
moreText.style.display = "none";
} else {
dots.style.display = "none";
btnText.innerHTML = "نمایش کمتر";
moreText.style.display = "inline";
}
}

[manit44]

دوستان خواهشا جواب بدید

[moslem.hady]

دوست عزیز این کدی که نوشتی، از فحش بدتره!!!
حالا اگه فرض بگیریم درست باشه، اینا رو چک کنید:
https://codepen.io/pbakaus/pen/gOYrwNp/
https://stackoverflow.com/questions/38679896/show-show-more-button-instead-of-a-vertical-scrollbar-in-a-div

[dexterato]

سلام کدهایی که نوشتید اصلا اصولی نیست بهتره در واکشی اطلاعات تجدید نظر کنی و روش دیگه ای رو به کار ببری

نمونه های زیادی برای این کار وجود داره مثلا با استفاده از jquery به صورت pagination

لینک زیر رو ببین:
https://www.c-sharpcorner.com/article/asp-net-webform-datatables-jquery-plugin-server-side-integration/

[علیرضا5]

درباره WEBMETHOD تحقیق کن