我有一个Listview,它包含名为description的字段(可能很长) 现在我想设置更多阅读,当用户点击阅读更多时,它应该在弹出窗口中给出完整的描述。
代码设计:
<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#代码:
public void bindList()
{
listcourse.DataSource = DB.Tbl_Categories_Master.Where(p => p.Deleted == true && p.Parent_Cat_id == 0);
listcourse.DataBind();
}
我该怎么办?
答案 0 :(得分:0)
由于它的MVC应用程序,默认情况下模板使用Bootstrap,我给你这个解决方案。
在<script>
标记中添加此内容。
$(function(){
$('div.popOverWrapper b').popover()
});
同时修改您的HTMl div标签,使其成为名为popOverWrapper
<asp:ListView ID="listcourse" runat="server" >
<ItemTemplate>
<p>
<div class="popOverWrapper">
<b>
//....
</b>
</div>
</p>
</ItemTemplate>
</asp:ListView>
所以从技术上来说,我正在做的是首先使用我选择的类名标记我的各自的div。稍后当文档准备就绪时,我会找到这个div并在其中找到b
标签并应用引导程序 .popover() 插件
答案 1 :(得分:0)
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>