Popup in Listview - asp.net

Question

I have a Listview which consist of field called description(Which can be lengthy)
now i want to set read more and when user click on read more it should give full description in popup.
Code Designing :
<asp:ListView ID="listcourse" runat="server" >
<ItemTemplate>
<p >
<div>
<b>
<%# (Eval("Description").ToString().Length <=150)?Eval("Description").ToString(): Eval("Description").ToString().Substring(0, 150) + "...Readmore"%>
</b>
</div>
</p>
</ItemTemplate>
</asp:ListView>
C# Code :
public void bindList()
{
listcourse.DataSource = DB.Tbl_Categories_Master.Where(p => p.Deleted == true && p.Parent_Cat_id == 0);
listcourse.DataBind();
}
How can I ?

Answer 1

Since its MVC application and by default the template uses Bootstrap, I am giving you this solution.
Add this in your <script> tag.
$(function(){
$('div.popOverWrapper b').popover()
});
Also modify your HTMl div tag to have a class called popOverWrapper
<asp:ListView ID="listcourse" runat="server" >
<ItemTemplate>
<p>
<div class="popOverWrapper">
<b>
//....
</b>
</div>
</p>
</ItemTemplate>
</asp:ListView>
So technically what I am doing is to first mark my respective divs with a class name of my choice.. And later when the document is ready I will find this div and find the b tag within it and apply the bootstrap .popover() plugin

Answer 2

You can achieve this using Web service - Try this, It may help you.
---Web service code---
[WebMethod]
public string getFullDescription(int ID) {
string result = "";
using (SqlConnection con = new SqlConnection(#"Data Source=SANTOSH-PC\SQLEXPRESS;Initial Catalog=master;User ID=sa;Password=ssrana#317"))
{
SqlCommand com = new SqlCommand("select description from discriptionList where id="+ID+"", con);
con.Open();
SqlDataReader rdr = com.ExecuteReader();
if (rdr.Read())
{
result = Convert.ToString(rdr["description"]);
}
}
return result;
}
---.Aspx code---
<div>
<asp:ListView ID="lstView" runat="server" DataKeyNames="id" GroupItemCount="4" OnItemDataBound="lstView_ItemDataBound">
<EmptyDataTemplate>
<table>
<tr>
<td></td>
</tr>
</table>
</EmptyDataTemplate>
<GroupTemplate>
<tr id="ItemPlaceHolderContainer" runat="server">
<td id="ItemPlaceHolder" runat="server" style="text-align: center;"></td>
</tr>
</GroupTemplate>
<ItemTemplate>
<td id="Td1" runat="server" style="border: 2px solid #adbdc4; border-collapse: inherit; width: 20%">
<table style="width: 100%;">
<tr>
<td style="text-align: left; font-weight: bold; width: 100%; padding-left: 1px; height: 23px; vertical-align: top; font-size: 12px; color: black;">
<b style="text-decoration:underline">Title : <%#Eval("title") %></b>
<br />
<%#Eval("description") %>
<asp:LinkButton ID="lnkShowDescription" runat="server" Text="Read more.."></asp:LinkButton>
</td>
</tr>
</table>
</td>
</ItemTemplate>
<LayoutTemplate>
<table style="width: 100%; margin-left: 3px; background-color: #f2f2f2">
<tbody>
<tr>
<td>
<table id="GroupPlaceHolder" runat="server" style="width: 100%; height: 90%; text-align: center;">
<tr>
<td></td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
<tr>
<td></td>
<td colspan="5">
</td>
</tr>
</LayoutTemplate>
</asp:ListView>
</div>
---I am using Script Manager for calling webservice in my project---
<asp:ScriptManager ID="scripMngr" runat="server" >
<Services>
<asp:ServiceReference Path="~/MyServices.asmx" />
</Services>
</asp:ScriptManager>
----- This is the popup div ------
<div class="PopBackground" id="dvBackground" >
<div id="NewPopUp">
</div>
<br />
<div style="height:30px; text-align:right;">
<asp:Button ID="btnClose" runat="server" Text="Close" OnClientClick=" return hidePopup();" Style="background-color: #fb7b3a; border: 1px solid #fb7b3a" />
</div>
</div>
--- This is .cs code----
protected void Page_Load(object sender, EventArgs e)
{
bindView();
}
protected void bindView()
{
using (SqlDataAdapter da = new SqlDataAdapter("select id,title,SUBSTRING(description,1,40) as description from discriptionList", new SqlConnection(#"Data Source=SANTOSH-PC\SQLEXPRESS;Initial Catalog=master;User ID=sa;Password=ssrana#317")))
{
DataSet ds = new DataSet();
da.Fill(ds);
lstView.DataSource = ds;
lstView.DataBind();
}
}
protected void lstView_ItemDataBound(object sender, ListViewItemEventArgs e)
{
if (e.Item.ItemType == ListViewItemType.DataItem)
{
LinkButton lnkShowDescription = (LinkButton)(e.Item.FindControl("lnkShowDescription"));
int id=Convert.ToInt32(lstView.DataKeys[e.Item.DisplayIndex].Value);
lnkShowDescription.OnClientClick="return getFullDescription('"+id+"')";
}
}
--- This is popup style---
#NewPopUp {
position: fixed;
width: 300px;
height:auto;
max-height:650px;
top: 20%;
left: 50%;
margin-left: -255px;
margin-top: -150px;
border: 2px solid #adbdc4;
background-color: white;
text-align: left;
padding: 10px;
Z-index: 1000;
font-family: Verdana;
font-size: 10pt;
border-radius: 7px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
color: black;
filter: alpha(opacity=100);
opacity: 1;
-moz-opacity: 1;
display:none;
}
.PopBackground {
position: fixed;
vertical-align: middle;
text-align: center;
z-index: 999;
top: 0px;
left: 0px;
background-color: gray;
filter: alpha(opacity=70);
opacity: 0.95;
margin: 0px 0px 0px 0px;
width: 100%;
height: 100%;
min-height: 100%;
min-width: 100%;
display:none;
}
</style>
----- This is Script ------
<script type="text/javascript">
function getFullDescription(Id) {
MyServices.getFullDescription(Id, onSuccess, onError);
return false;
}
function onSuccess(result) {
document.getElementById('NewPopUp').style.display = 'block';
document.getElementById('dvBackground').style.display = 'block';
document.getElementById('NewPopUp').innerHTML = "Description : "+result;
}
function onError(error) {
document.getElementById('NewPopUp').style.display = 'block';
document.getElementById('dvBackground').style.display = 'block';
document.getElementById('NewPopUp').innerHTML = "Error : " + error;
}
function hidePopup() {
document.getElementById('NewPopUp').style.display = 'none';
document.getElementById('dvBackground').style.display = 'none';
return false;
}
</script>