弹出窗口中的 Ajax 评级控制

Question

我正在开发一个页面来显示一些带有 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>

我如何才能拥有所需的功能。 任何帮助将不胜感激。 谢谢

Answer 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 中获取源代码，就是这样做的。