We Keep Coding

ASP.NET Panels disappears

In my code behind I have the following:
public void btnDoSomething_Click(object sender, EventArgs e)
{
if (sku.Peso == 0)
{
ScriptManager.RegisterStartupScript(this.Page, this.Page.GetType(), "Validation",
"<script type='text/javascript'>alert('You can't do that!');</script>", false);
pnlSKU.Style.Remove("visibility");
pnlSKU.Style.Add("visibility", "visible");
}
else
//It does something...
pnlSKU.Style.Remove("visibility");
pnlSKU.Style.Add("visibility", "visible");
}
In my aspx I have the following inside the panel pnlSKU:
<asp:Panel ID="pnlSKU" runat="server" Style="visibility: hidden; overflow-x: auto overflow-y: scroll; border-right: black thin solid;
border-top: black thin solid; z-index: 200; left: 210px; border-left: black thin solid;
border-bottom: black thin solid; position: absolute; top: 28%; height: 500px;
background-color: white; width: 900px;">
The code in itself is very much longer but It doesn't matter at this point.
Everytime the condition is met the control panel dissapears completely even If I call the method add to the Style property and put "visible".
Any idea why is happening?

How to add half star to rating control

How to add half star to rating control
I tried this: HalfStarCssClass="HalfFilledStar"
and put the image in style "HalfFilledStar" as I did with filled star and waiting star and empty star and it didn't success:
cc1:Rating ID="AddRate" CurrentRating="0" AutoPostBack="true" OnChanged="AddRate_Changed" StarCssClass="Star" WaitingStarCssClass="WaitingStar" EmptyStarCssClass="Star"
HalfStarCssClass="HalfFilledStar" FilledStarCssClass="FilledStar" runat="server">
/cc1:Rating>
And this's the styles:
'.Star
{
background-image: url(images/Star.png);
height: 28px;
width: 29px;
}
.WaitingStar
{
background-image: url(images/WaitingStar.png);
height: 28px;
width: 29px;
}
.FilledStar
{
background-image: url(images/FilledStar.png);
height: 28px;
width: 29px;
}
.HalfFilledStar
{
background-image: url(images/HalfFilledStar.png);
height: 17px;
width: 17px;
}'

How to change button text in file upload control?

I try to change text of file upload control browse button. I made file upload control visible=false and I added another textbox and button:
.aspx file:
<asp:FileUpload ID="fuUploadPhoto" runat="server" visible="false"/>
<asp:TextBox ID="tbFilePath" runat="server" />
<asp:Button ID="btnChooseFile" runat="server" Text="Choose file from disk" />
next I try to add Attribute to btnChooseFile in PageLoad in .cs. Unfortunately it doesn't work and I don't know why. Where I made a mistake?
.cs file:
protected void Page_Load(object sender, EventArgs e)
{
btnChooseFile.Attributes.Add("onclick", "document.getElementById(" + fuUploadPhoto.ClientID + ").click()");
MultiViewAddPhoto.SetActiveView(viewAddPhotoStepOne);
}
protected void btnChooseFile_Click(object sender, EventArgs e)
{
if (fuUploadPhoto.HasFile)
{
tbFilePath.Text = fuUploadPhoto.PostedFile.FileName;
string filename = Path.GetFileName(fuUploadPhoto.FileName);
string ext = Path.GetExtension(filename);
imageGuid = Guid.NewGuid();
string contenttype = String.Empty;
switch (ext)
{
case ".jpg":
contenttype = "image/jpg";
break;
case ".jpeg":
contenttype = "image/jpg";
break;
case ".png":
contenttype = "image/png";
break;
}
if (string.IsNullOrEmpty(contenttype))
{
ltrErrorMessage.Text = "Nieprawidłowy format pliku!";
}
//prawidłowy format pliku
else
{
if (fuUploadPhoto.PostedFile.ContentLength > MyConsts.DAL.SizeOfPhoto)
{
ltrErrorMessage.Text = "Plik może mieć maksymalnie "+ MyConsts.DAL.SizeOfPhoto/1024 + " Mb! Zmniejsz plik i spróbuj ponownie.";
}
//jeśli prawidłowy format i rozmiar zdjęcia
else
{
try
{
filePath = ConfigurationManager.AppSettings["FilesPath"] + "\\" + Request.QueryString["konkurs"] + "\\" + imageGuid + ext;
path = "\\" + Request.QueryString["konkurs"] + "\\" + imageGuid + ext;
//zapisujemy plik na dysk
fuUploadPhoto.SaveAs(filePath);
if (File.Exists(filePath))
{
imgInspirationPhoto.ImageUrl = filePath;
imgInspirationPhoto.Visible = true;
}
else
{
imgInspirationPhoto.Visible = false;
}
}
catch (Exception ex)
{
Logger.Error(ex.Message, LogSource, ex);
}
}
}
}
}

When you make the fileupload visible false it won't be rendered on the page i.e its not hidden but not present. hence make it display none rather than visible false.
Try this
protected void Page_Load(object sender, EventArgs e)
{
btnChooseFile.Attributes.Add("onclick", "jQuery('#" + fuUploadPhoto.ClientID + "').click();return false;");
//MultiViewAddPhoto.SetActiveView(viewAddPhotoStepOne);
}
in aspx file:
<div style="display:none;">
<asp:FileUpload ID="fuUploadPhoto" runat="server"/>
</div>
remember to add reference to jQuery library in the aspx page;
Update: Also the file is not available in the code behind until full postback This solution might help

using two js files http://the-echoplex.net/demos/upload-file/file-upload.js and http://the-echoplex.net/demos/upload-file/jelly/min.js .And add the file-upload.css file.Your sample
aspx file is,
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<script src="script/jelly.js" type="text/javascript"></script>
<style type="text/css">
/****************** Start page styles ********************************************/
body {
background: #DFA01B;
font-family: arial, sans-serif;
font-size: 11px;
}
#wrap {
max-width: 600px;
margin: 30px auto;
background: #fff;
border: 4px solid #FFD16F;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;
padding: 20px;
}
.field {
padding: 0 0 1em;
}
</style>
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div id="wrap">
<form enctype="multipart/form-data" action="#" method="post">
<div class="field">
<label class="file-upload">
<span><strong>Put YOUR TEXT</strong></span>
<%--<input type="file" name="uploadfile" onclintclick="test_load()" />--%>
<asp:FileUpload
ID="FileUpload1" name="uploadfile" runat="server"
ondatabinding="FileUpload1_DataBinding" />
</label>
</div>
</form>
</div><!--/ wrap -->
<script src="script/file-upload.js" type="text/javascript"></script>
</form>
</body>
</html>
and CSS file,
body {
}
/*
As this stylesheet is lazy loaded these styles only apply if JavaScript is enabled
*/
.file-upload {
overflow: hidden;
display: inline-block;
position: relative;
vertical-align: middle;
text-align: center;
/* Cosmetics */
color: #fff;
border: 2px solid #2FA2FF;
background: #6FBEFF;
/* Nice if your browser can do it */
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
text-shadow: #000 1px 1px 4px;
}
.file-upload:hover {
background: #2FA2FF;
}
.file-upload.focus {
outline: 2px solid yellow;
}
.file-upload input {
position: absolute;
top: 0;
left: 0;
margin: 0;
font-size: 70px;
/* Loses tab index in webkit if width is set to 0 */
opacity: 0;
filter: alpha(opacity=0);
}
.file-upload strong {
font: normal 1.75em arial,sans-serif;
}
.file-upload span {
position: absolute;
top: 0;
left: 0;
display: inline-block;
/* Adjust button text vertical alignment */
padding-top: .45em;
}
/* Adjust the button size */
.file-upload { height: 3em; }
.file-upload,
.file-upload span { width: 14em; }
.file-upload-status {
margin-left: 10px;
vertical-align: middle;
padding: 7px 11px;
font-weight: bold;
font-size: 16px;
color: #888;
background: #f8f8f8;
border: 3px solid #ddd;
}
you can download sample project at changedfileuploadbutton text

You can't using the standard asp file upload control.
You could create your own custom control which inherits from FileUpload, there you could add custom behaviour:
public class MyFileUpload : FileUpload
{
//do stuff
}

Speech bubble inside repeater

Above is an image of the rendered css when I changed the bg color of .speech_bubble_content to red. The bubble isn't displaying properly.
I am using the following code to retrieve data from a database and bind it to a repeater. I am also using css to display a speech bubble around what I want to display. I noticed that data is displayed when I place a label outisde of the div - and nothing is retrieved when the label is inside the div - in this case creation date is displayed, but story is omitted. Why is this happening? Thanks for your help. I believe this is caused by css.
<asp:Repeater ID="Repeater1" runat="server">
<ItemTemplate>
<div class="speech_bubble">
<b class="sb1"></b><b class="sb2"></b><b class="sb3"></b><b class="sb4"></b><b class="sb5"></b><b class="sb6"></b><b class="sb7"></b>
<div class="speech_bubble_content">
<p>
<asp:Label ID="story" runat="server" Text='<%#DataBinder.Eval(Container.DataItem, "Story") %>'></asp:Label>
</p>
</div>
<b class="sb7"></b><b class="sb6"></b><b class="sb5"></b><b class="sb4"></b><b class="sb3"></b><b class="sb2"></b><b class="sb1"></b>
<em></em><span></span>
</div>
<asp:Label ID="user" runat="server" Text='<%#DataBinder.Eval(Container.DataItem, "CompanyRole") %>'></asp:Label> <asp:Label ID="date" runat="server" Text='<%#DataBinder.Eval(Container.DataItem, "CreationDate") %>'></asp:Label>
</ItemTemplate>
</asp:Repeater>
Here's the CSS:
.speech_bubble{
background: transparent;
margin:10px 0;
}
.speech_bubble_content{
display:block;
background:#fff;
border:3px solid #ddd;
border-width:0 3px;
}
.speech_bubble p{
padding:0.5em 0;
color:#000;
margin:0 15px;
}
.sb1, .sb2, .sb3, .sb4, .sb5, .sb6, .sb7{
display:block;
overflow:hidden;
font-size:0;
}
.sb1, .sb2, .sb3, .sb4, .sb5, .sb6{
height:1px;
}
.sb4, .sb5, .sb6, .sb7{
background:#fff;
border-left:1px solid #ddd;
border-right:1px solid #ddd;
}
.sb1 {margin:0 8px; background:#ddd;}
.sb2 {margin:0 6px; background:#ddd;}
.sb3 {margin:0 4px; background:#ddd;}
.sb4 {margin:0 3px; background:#fff; border-width:0 5px;}
.sb5 {margin:0 2px; background:#fff; border-width:0 4px;}
.sb6 {margin:0 2px; background:#fff; border-width:0 3px;}
.sb7 {margin:0 1px; background:#fff; border-width:0 3px; height:2px;}
.speech_bubble em{
display:block;
width:0;
height:0;
overflow:hidden;
border-top:12px solid #ddd;
border-left:12px dotted transparent;
border-right:12px dotted transparent;
margin-left:50px;
}
.speech_bubble span{
display:block;
width:0;
height:0;
overflow:hidden;
border-top:10px solid #fff;
border-left:10px dotted transparent;
border-right:10px dotted transparent;
margin-left:52px;
margin-top:-15px;
}

Yes do as rene suggest. View the source, HTML copy it and the CSS and save it to http://jsbin.com/ and send the Link back here so we can see the REAL html that .NET generates.
You might also just want to have
<%#DataBinder.Eval(Container.DataItem, "Story") %>
instead of using a asp:label as it will add unwanted HTML tags.

Expanding gridview's row

One of gridview's column is a "Content" column that can have few lines of text (it can be literal, textbox or label ).
In "default" mode i want it to show only the first line and a link button: "(more)" or "(read)".
Clicking on this link should expand the column and display full content.
What is the best way to do this?

Selecting first 10 characters of content text and using it as your link's text is better aproach. This will reduce size of data that retrieved from database like that :
SELECT ContentId, SUBSTRING(Content, 0, 10) AS Content
FROM ContentTable;
Then you can use template column for this column that includes a label and a link. Lbel for the description text, link for the details.
<asp:TemplateColumn>
<ItemTemplate>
<asp:Label
Text='<%# Eval("Content") %>'
runat="server"/>
<a href='<%# Eval("ContentId", "contentdetails.aspx?id={0}") %>'>More</a>
</ItemTemplate>
</asp:TemplateColumn>

This will help you.
http://www.asp.net/community/control-gallery/Item.aspx?i=1465

try this. http://mosesofegypt.net/post/BuildingjQueryAndASPNetAJAXEnabledControlsjQueryCollapsiblePanelExtenderPart2.aspx

Use the power of CSS!
Place this inside your gridview row. It will naturally push out the row to the height of your content, or the amount of rows required.
<div class="toggle">
<div class="toggle-header">
Toggle!
</div>
<div class="toggle-height">
<div class="toggle-transform">
<p>2nd line of text</p>
<p>3rd line</p>
<p>4th line</p>
<p>etc</p>
</div>
</div>
</div>
And use this CSS...
body {
font-family: sans-serif;
}
.toggle {
position: relative;
border: 2px solid #333;
border-radius: 3px;
margin: 5px;
width: 200px;
}
.toggle-header {
margin: 0;
padding: 10px;
background-color: #333;
color: white;
text-align: center;
cursor: pointer;
}
.toggle-height {
background-color: tomato;
overflow: hidden;
transition: max-height .6s ease;
max-height: 0;
}
.toggle:hover .toggle-height {
max-height: 1000px;
}
.toggle-transform {
padding: 5px;
color: white;
transition: transform .4s ease;
transform: translateY(-100%);
}
.toggle:hover .toggle-transform {
transform: translateY(0);
}
You may want to disguise the "toggle" with a textbox of your "(more)" line to expand the rest.
Let us know if it worked.