列表视图中的弹出窗口

时间:2016-12-08 10:18:24

标签: asp.net asp.net-mvc entity-framework asp.net-mvc-4

我有一个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(); 
} 

我该怎么办?

2 个答案:

答案 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>