弹出窗口中的Ajax评级控件

时间:2012-06-12 11:29:31

标签: asp.net ajax modalpopupextender

我正在开发一个页面,用asp .net fw3.5显示一些视频。该页面将显示带缩略图的视频列表。当用户点击视频拇指时,我将打开弹出窗口并在弹出窗口中显示视频。视频中将有一个评级控件。用户可以使用ajax评级控件对视频进行投票。单击评级控件后,弹出窗口应保持显示。

我已经做了一些编码,但问题是我无法获得评级控制的当前评级而不进行回发。我可以通过使用更新面板使弹出窗口始终可见,但如果我这样做,模态popupextender的关闭按钮不起作用,我无法关闭模式弹出窗口。这是我的相关代码部分:

<asp:Button ID="Button1" runat="server" Style="display: none" />      
<asp:ModalPopupExtender ID="ModalPopupExtender1" runat="server" OkControlID="btnOkay"
    TargetControlID="Button1" PopupControlID="Panel1" PopupDragHandleControlID="PopupHeader"
    Drag="true" BackgroundCssClass="ModalPopupBG">
</asp:ModalPopupExtender>
  <asp:Panel ID="Panel1" runat="server" CssClass="PopupCss">
    <table style="width: 100%; height: 100%;">
        <tr>
            <td>
                <div id="mediaplayer">
                    JW Player goes here</div>
                <script type="text/javascript">
                    jwplayer("mediaplayer").setup({
                        flashplayer: "jwplayer/player.swf",
                        file: "<%=videoName %>",
                        image: "<%=videoThumb %>",
                        width: "100%",
                        height: "100%"
                    });
                </script>
            </td>
            <td valign="top" align="left" style="text-align: left;">
                <div class="fb-like" data-send="true" data-layout="button_count" data-show-faces="true">
                </div> 
                <br />
                <div class="fb-comments" data-href="<%=videoLink%>"
                    data-num-posts="3" data-width="470">
                </div>
                <br />
                <br />
                <br />
                <!-- AddThis Button BEGIN -->
                <div class="addthis_toolbox addthis_default_style ">
                    <a class="addthis_button_preferred_1"></a><a class="addthis_button_preferred_2">
                    </a><a class="addthis_button_preferred_3"></a><a class="addthis_button_preferred_4">
                    </a><a class="addthis_button_compact"></a><a class="addthis_counter addthis_bubble_style">
                    </a>
                </div>
                <script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=ra-4f61d99d08697325"></script>
                <!-- AddThis Button END -->
                <br />
                <br />
                <asp:Rating ID="Rating1" runat="server" MaxRating="5" StarCssClass="ratingStar" FilledStarCssClass="ratingStarFilled"
                    AutoPostBack="true" OnChanged="VideoRatingChanged" EmptyStarCssClass="ratingStarEmpty"
                    WaitingStarCssClass="ratingStarEmpty">
                    <asp:HiddenField ID="HiddenField1" runat="server" Value='<%=videoId%>' />
                </asp:Rating>
                &nbsp (<%=voteCount%>)
                <br />
                Minder Score:
                <%=minderScore %>
                <br />
                <div class="Controls" style="text-align: left;">
                    <input id="btnOkay" type="button" value="Kapat" />
                </div>
            </td>
        </tr>
    </table>
</asp:Panel>

如何设法获得所需的功能。 任何帮助将不胜感激。 感谢

1 个答案:

答案 0 :(得分:1)

最简单的方法是使用UpdatePanel

对其进行扭曲
<br />
        <asp:UpdatePanel runat="server" ID="up1">
            <ContentTemplate>
                <asp:Rating ID="Rating1" runat="server" MaxRating="5" StarCssClass="ratingStar" FilledStarCssClass="ratingStarFilled"
                    AutoPostBack="true" OnChanged="VideoRatingChanged" EmptyStarCssClass="ratingStarEmpty"
                    WaitingStarCssClass="ratingStarEmpty">
                    <asp:HiddenField ID="HiddenField1" runat="server" Value='<%=videoId%>' />
                </asp:Rating>

            </ContentTemplate>
        </asp:UpdatePanel>

对于总投票数的部分,如果您想将其包含在UpdatePanel中,则需要使用asp:literal控件进行更改,并在此控件内部呈现结果。因此,如果您希望在UpdatePanel中包含此代码,以便自动更新它们,

&nbsp (<%=voteCount%>)
<br />
Minder Score:
<%=minderScore %>

你需要把它写成

&nbsp (<asp:Literal runat="server" id="txtVoteCount" />)
<br />
Minder Score: <asp:Literal runat="server" id="txtMinderScore" />

并在代码后面放置此值。

如果您看到此示例http://www.asp.net/ajaxLibrary/AjaxControlToolkitSampleSite/Rating/Rating.aspx

并从SDK获取源代码,这就是这样做的。