Ajax Rating control in popup - asp.net

Question

I am developing a page to display some videos with asp .net fw3.5. The page will display a list of videos with thumbnails. When the user clicks a video thumb i will open a popup and show the video in the popup. There will be a rating control in the video.the user can vote for the video using the ajax rating control. the popup should remain shown after rating control is clicked.
I have done some of the coding but the problem is I cant get the current rating of the rating control without doing a postback. I can make the popup always visible by using an update panel but if i do so the close button of the modal popupextender doesnt work and i cannot close the modal popup. Here is my related code portion:
<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>
How can i manage to have the desired functionality.
Any help will be appreciated.
Thanks

Answer 1

The easiest way to do it is to warp it with an 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>
For the part of total vote count, if you like to include it inside the UpdatePanel you need to change it with asp:literal controls, and render inside this control the results. So if you like to include this code inside the UpdatePanel, for automatic update them,
&nbsp (<%=voteCount%>)
<br />
Minder Score:
<%=minderScore %>
you need to write it as
&nbsp (<asp:Literal runat="server" id="txtVoteCount" />)
<br />
Minder Score: <asp:Literal runat="server" id="txtMinderScore" />
and on code behind place this values.
If you see this sample http://www.asp.net/ajaxLibrary/AjaxControlToolkitSampleSite/Rating/Rating.aspx
and get the source code from the SDK, this is the way is doing it.