I am using rating control which is present in ASP.NET AJAX control toolkit. I have following questions.
It doesn't show up anything if I drag the control unto the page
CSS doesn't help either
How do I save the rating value in database
Thank you very much.
CSS
.ratingStar
{
font-size: 0pt;
width: 12px;
height: 12px;
cursor:pointer;
background-repeat: no-repeat;
}
.filledRatingStar
{
background-image: url(images/Star_filled.gif);
}
.emptyRatingStar
{
background-image: url(images/Star_empty.gif);
}
ASPX:
<asp:Rating ID="Rating2" runat="server" CurrentRating="1" MaxRating="6" StarCssClass="ratingStar"
WaitingStarCssClass="savedRatingStar"
FilledStarCssClass="filledRatingStar"
EmptyStarCssClass="emptyRatingStar"
RatingAlign="Vertical">
</asp:Rating>
Rating is not showing up:
You're missing the style for savedRatingStar
More importantly, because you've set RatingAling="Vertical" you must specify display:block; for ratingStar
Change your code as follows and it will work:
CSS:
<style type="text/css">
.ratingStar
{
font-size: 0pt;
width: 12px;
height: 12px;
cursor: pointer;
background-repeat: no-repeat;
display: block;
}
.filledRatingStar
{
background-image: url(images/Star_filled.gif);
}
.emptyRatingStar
{
background-image: url(images/Star_empty.gif);
}
.savedRatingStar
{
/*change this to your image name*/
background-image: url(images/Saved_star.gif);
}
</style>
ASPX:
<form id="form1" runat="server">
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</asp:ToolkitScriptManager>
<asp:Rating ID="Rating2" runat="server" CurrentRating="1" MaxRating="6" StarCssClass="ratingStar"
WaitingStarCssClass="savedRatingStar" FilledStarCssClass="filledRatingStar" EmptyStarCssClass="emptyRatingStar"
RatingAlign="Vertical" />
<asp:Button ID="btnSubmit" runat="server" Text="Submit" OnClick="SubmitRating" />
</form>
Saving the rating to the database:
The rating is available via the CurrentRating property of the Rating control, simply access it in code and insert it into the db (there are literally hundreds of examples on the net how to do this, I trust you'll be able to find your way from here)
protected void SubmitRating(object sender, EventArgs e)
{
int rating = Rating2.CurrentRating;
//Submit to database...
}
Related
Hello, I've been trying to do a POSTS rating system for a few days, I see several tutorials talking about this, everyone uses ajaxtoolkit, I downloaded ajaxtoolkit, I installed, I did as I say, but the stars do not appear in the post, is a transparent space with clickable things, but without the stars!
CSS CODE:
.starempty {
background-image: url("https://i.imgur.com/Y6T8zFv.png");
width: 50px;
height: 50px;
}
.starfilled {
background-image: url("https://i.imgur.com/rqzO2MZ.png");
width: 50px;
height: 50px;
}
.starwaiting {
background-image: url("https://i.imgur.com/8uDtWlX.png");
width: 50px;
height: 50px;
}
ASPX CODE:
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<ajaxToolkit:Rating ID="Rating1" CurrentRating="1" MaxRating="5"
StarCssClass="starempty" FilledStarCssClass="starfilled"
WaitingStarCssClass="starwaiting" EmptyStarCssClass="starempty"
runat="server" AutoPostBack="true">
</ajaxToolkit:Rating>
</ContentTemplate>
</asp:UpdatePanel>
HOW IT APPEARS ON THE PAGE:
PAGE DONT APEAR STARS!
if they do not know how to solve it, is there any other framework something like this to do a rating system?
Try using local images and remember to put no-repeat:
.starEmpty{
background-image: url(images/starempty.gif);
width: 50px;
height: 50px;
background-position: 0px 0px;
background-repeat: no-repeat;
}
I am using the updateProgress control to display loader.gif while the iframe in my page loads.
The iframe takes much time to load but the loader.gif does not appear
This is my aspx page
<!DOCTYPE html>
<head>
<title></title>
<style type="text/css">
body {
margin: 0;
padding: 0;
font-family: Arial;
}
.MyModal {
position: fixed;
z-index: 999;
height: 100%;
width: 100%;
top: 0;
filter: alpha(opacity=60);
opacity: 0.6;
-moz-opacity: 0.8;
}
.center {
z-index: 1000;
margin: 300px 400px 300px 400px;
padding: 10px;
width: 130px;
background-color: White;
border-radius: 10px;
filter: alpha(opacity=100);
opacity: 1;
-moz-opacity: 1;
}
.center img {
height: 128px;
width: 128px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<h1>My Payment Page</h1>
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1">
<ProgressTemplate>
<div class="MyModal">
<div class="center">
<img alt="" src="images/my-loader.gif" />
</div>
</div>
</ProgressTemplate>
</asp:UpdateProgress>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<iframe id="frame1" runat="server" width="100%" height="600" scrolling="no" frameborder="0"></iframe>
</ContentTemplate>
</asp:UpdatePanel>
</form> </body> </html>
and in my code behind file i set the source for the iframe programmatically
protected void Page_Load(object sender, EventArgs e)
{
if(!IsPostBack)
{
frame1.Src = "http://example.com";
}
}
I don't know what i am missing.
UpdateProgress controls are for partial-page updates (AJAX requests); they do not respond to normal postbacks.
To see it work, put a button control inside the UpdatePanel (content template). Because it's inside the update panel it makes an AJAX request (basically) so the UpdateProgress control should work automatically.
If the response is really fast, you might not see the UpdateProgress control's image. For testing, add some time to the response so you can see the image.
protected void btn_Click(object sender, EventArgs e)
{
// add a fake delay for testing.
System.Threading.Thread.Sleep(3000);
}
I have a checkbox with long text (about 5 or 6 lines). I'm trying to get the text indented and nicely aligned when it is wrapped. My current code works currently in IE but in Chrome, Safari, FireFox, the text is on a different line than the checkbox is. Does anyone know what I can be doing wrong here or have any other ways to accomplish this? Thanks for any help in advance!
<%# Control Language="C#" AutoEventWireup="true" CodeBehind="Info.ascx.cs"
Inherits="Project.Info" %>
<style type="text/css">
.CkbxFormat input
{
float: left;
}
.CkbxFormat label
{
display: inline-block;
}
</style>
<div style="margin-top: 10px; margin-left: 50px;">
<asp:Table ID="Table1" runat="server" Width="700px" CellSpacing="2" CellPadding="5"
Style="border: Solid 1px green;">
<asp:TableRow>
<asp:TableCell>
<asp:Label ID="Label1" runat="server" Text="Information"></asp:Label>
</asp:TableCell></asp:TableRow>
<asp:TableRow>
<asp:TableCell>
<asp:CheckBox ID="CkBxInfo" runat="server" Text="The accessor of a property contains the executable statements associated with getting (reading or computing) or setting (writing) the property. The accessor declarations can contain a get accessor, a set accessor, or both. The body of the get accessor is similar to that of a method. It must return a value of the property type. The execution of the get accessor is equivalent to reading the value of the field. " CssClass="CkbxFormat"></asp:CheckBox>
</asp:TableCell></asp:TableRow>
</asp:Table>
</div>
Try this for the CSS:
.CkbxFormat label {
display: block;
padding-left: 15px;
text-indent: -15px;
}
.CkbxFormat input {
width: 13px;
height: 13px;
padding: 0;
margin:0;
vertical-align: bottom;
position: relative;
top: -1px;
*overflow: hidden;
}
I think that will get you very close to what you want.
I have a ModalPopup window in my asp.net application, that I want to display when a Listview control item is clicked.
<div id="ModalPopup" style="visibility:hidden" runat="server">
<div style="position: absolute; width: 100%; height: 100%; z-index: 10002; background-color: Gray; filter: alpha(opacity=70); opacity: 0.7;">
</div>
<table style="position: absolute; width: 100%; height: 100%; z-index: 10003;">
<tr>
<td align="center" valign="middle">
<div style="color: Black; font-weight: bolder; background-color: White; padding: 15px; width: 200px;">
<asp:Image ID="Image4" runat="server" ImageUrl="~/Images/ajax-loader.gif" />...Processing....
</div>
</td>
</tr>
</table>
</div>
However, in my RadListView1_SelectedIndexChanged event, my code is: ModalPopup.Attributes.Add("style", "visibility:visible"); but the modal popup does not display.
How can I display it when a ListView item is selected?
Since you've already defined your ModalPopup div as a server control (e.g. runat=server) and you're trying to decide if to show it or not in codebehind - just use the Visible property...
<div id="ModalPopup" Visible="false" runat="server">
....
</div>
And in your RadListView1_SelectedIndexChanged event in code behind just change Visible to true:
protected void RadListView1_SelectedIndexChanged()
{
ModalPopup.Visible = true;
}
and if you insist on changing the visibility attribute itself, you can use RegisterStartupScript like this:
protected void RadListView1_SelectedIndexChanged()
{
ClientScript.RegisterStartupScript(this.GetType(), "ShowPopup", "document.getElementById('" + ModalPopup.ClientID + "').style.visibility = 'visible';", true);
}
This is driving me mental!!!
Ok, I have the following scenario - ModalPopupExtender used to display an UpdateProgress panel when AJAX is running. So I have the following:
<asp:Panel ID="panelUpdateProgress" runat="server" CssClass="updateProgress" >
<asp:UpdateProgress ID="UpdateProg1" DisplayAfter="2" runat="server" ClientIDMode="Static">
<ProgressTemplate>
<div style="position: relative; top: 40%; text-align: center;">
<asp:Image ID="Image1" runat="server" Style="border: 0px; vertical-align: middle;
padding-bottom: 4px;" ImageUrl="~/Images/Refresh.gif" />
<asp:Label ID="Label2" runat="server" Style="border: 0px; vertical-align: middle;
margin-left: 7px" Text="Refreshing data, please wait..."></asp:Label>
</div>
</ProgressTemplate>
</asp:UpdateProgress>
</asp:Panel>
<ajaxToolkit:ModalPopupExtender ID="ModalProgress" runat="server" TargetControlID="panelUpdateProgress"
BackgroundCssClass="modalBackground" PopupControlID="panelUpdateProgress">
</ajaxToolkit:ModalPopupExtender>
Javascript to fire the thing when AJAX kicks ins:
<script type="text/javascript" language="javascript">
var ModalProgress = '<%= ModalProgress.ClientID %>';
Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(beginReq);
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endReq);
function beginReq(sender, args) {
// shows the Popup
$find(ModalProgress).show();
}
function endReq(sender, args) {
// Hides the Popup
$find(ModalProgress).hide();
}
</script>
With the styling of :
<style type="text/css">
.modalBackground
{
background-color: Gray;
filter: alpha(opacity=50);
opacity: 0.50;
}
.updateProgress
{
float: right;
border-width: 1px;
border-style: solid;
background-color: #FAFAD2;
width: 250px;
height: 100px;
}
</style>
However, I cannot for the life of me get the updateProgress to float right or adjust position (just as an example).
Using the developer tools, I can see that some sort of inline style overides the CSS style.
How on earth can I get, for example, my updateprogress to float right?
If you're fighting against inline styles that you have no control over, this is one of those rare cases where the use of !important is actually justified:
Give this a try:
.updateProgress
{
float: right !important;
/* etc. */
}
If this doesn't work, try adding a clear:right, or using a more specific selector like:
#someElement .updateProgress {}
EDIT: Specificity in CSS selectors won't help against inline styles, so ignore that as a possible solution.
well I've ditch the style sheet and run with this:
<asp:UpdateProgress ID="UpdateProg1" DisplayAfter="2" runat="server" ClientIDMode="Static">
<ProgressTemplate>
<div style="float: right; border-width: 1px; border-style: solid; background-color: #FAFAD2;
width: 250px; height: 100px;">
<div style="position: relative; top: 40%; text-align: center;">
<asp:Image ID="Image1" runat="server" Style="border: 0px; vertical-align: middle;
padding-bottom: 4px;" ImageUrl="~/Images/Refresh.gif" />
<asp:Label ID="Label2" runat="server" Style="border: 0px; vertical-align: middle;
margin-left: 7px" Text="Refreshing data, please wait..."></asp:Label>
</div>
</div>
</ProgressTemplate>
</asp:UpdateProgress>
It does the business so I'm happy for now :D