I have problem with Multiview in ASP.NET webform. I am building a form, where on the same page a user should upload his avatar in the first form and on the second form user should enter profile info and upload a document. The problem is when I switch between the forms in Multiview, it refreshes my pages and I lose all my data. For example if user uploads his avatar and goes to the profile to enter info, and suddenly decides that he wants to change his avatar and switches back to the username tab, his already uploaded avatar is lost. I have tried to solve it with jQuery tabs, but I did not have the wanted result. Also I have tried to add an Update Panel to the Multiview and Script Manager, also id did not work for me. If anybody has a clue how to solve this, I would be very grateful!
Here is Designer.cs
<asp:MultiView ID="MultiView1" runat="server">
<asp:View ID="ViewForm1" runat="server">
<div class="multiviewButtons">
<asp:Button ID="Button1" runat="server" Text="Username" OnClick="Button1_Click"/>
<asp:Button ID="Button2" runat="server" Text="Profile" OnClick="Button2_Click"/>
</div>
<asp:TextBox ID="txtUsername" runat="server" AutoPostBack="true" placeholder="Enter your username"></asp:TextBox>
<asp:Label ID="Avatar" runat="server" Text="Insert Avatar"></asp:Label>
<asp:FileUpload ID="uploadAvatar" runat="server"/>
</asp:View>
<asp:View ID="ViewForm2" runat="server">
<div class="multiviewButtons">
<asp:Button ID="Button3" runat="server" Text="Username" OnClick="Button1_Click"/>
<asp:Button ID="Button4" runat="server" Text="Profile" OnClick="Button2_Click"/>
</div>
<asp:TextBox ID="txtProfile" runat="server" AutoPostBack="true" placeholder="Enter your profile info" TextMode="Multiline"></asp:TextBox>
<asp:Label ID="Profile" runat="server" Text="Insert your pdf document"></asp:Label>
<asp:FileUpload ID="uploadDocument" runat="server"/>
</asp:View>
</asp:MultiView>
And in my CodeBehind.cs file
protected void Button1_Click(object sender, EventArgs e)
{
MultiView1.ActiveViewIndex = 0;
}
protected void Button2_Click(object sender, EventArgs e)
{
MultiView1.ActiveViewIndex = 1;
}
Actually, this is one of those cases in which is better to roll your own!!
And it turns out in most cases its less work.
So, move the two buttons outside of the two "panels".
And in fact, lets dump the whole multi-view, and use simple markup.
In this case, it turns out its probably less work.
So, this markup:
<asp:Button ID="Button1" runat="server" Text="Username" CssClass="btn"
OnClientClick="myshow(1);return false;"/>
<asp:Button ID="Button2" runat="server"
Text="Profile" CssClass="btn"
Style="margin-left:15px"
OnClientClick="myshow(2);return false"/>
<script>
function myshow(iMyShow) {
if (iMyShow == 1) {
$('#View1').show()
$('#View2').hide()
}
if (iMyShow == 2) {
$('#View1').hide()
$('#View2').show()
}
}
</script>
<br />
<br />
<div id="View1" style="display:normal">
<asp:TextBox ID="txtUsername" runat="server" AutoPostBack="true" placeholder="Enter your username"></asp:TextBox>
<asp:Label ID="Avatar" runat="server" Text="Insert Avatar"></asp:Label>
<asp:FileUpload ID="uploadAvatar" runat="server"/>
</div>
<div id="View2" style="display:none">
<asp:TextBox ID="txtProfile" runat="server" AutoPostBack="true" placeholder="Enter your profile info" TextMode="Multiline"></asp:TextBox>
<asp:Label ID="Profile2" runat="server" Text="Insert your pdf document"></asp:Label>
<asp:FileUpload ID="uploadDocument" runat="server"/>
</div>
<br />
<asp:Button ID="cmdDone" runat="server" Text="Submit" CssClas="btn" />
So, two REALLY simple divs, and two simple buttons. they have NO server side code.
So, you now get this:
Since we hide/show the div with some simple js code (jQuery), then the above has no post-back and is really simple.
I fact, a nice touch I used for years?
Well, when you click on one of the two buttons to select/show the simple "div"?
You often can't tell which "fake tab" we are on.
So, in place of the two buttons?
Drop in a Radio Button list. Once again, we don't need a post-back, but REALLY nice is a radio button list SHOWS which button is selected!!!
So, drop in radio button list, enter the two button text values (all wizards). Set the layout to be horizonal (not vertical).
So, now we have this:
(edit/add items with wizard, and enter your two "fake" tab control names
So, we now have this:
<asp:RadioButtonList ID="RadioButtonList1" runat="server"
RepeatDirection="Horizontal" CssClass="rMyChoice">
<asp:ListItem onclick="myshow(1)" Value="1" Selected="True">UserName</asp:ListItem>
<asp:ListItem onclick="myshow(2)" Value="2">Profile</asp:ListItem>
</asp:RadioButtonList>
Now, I SHOULD be able to add the onclick event to the rb list, but a rendering issue causes the rb to trigger 2 times, so, we have to add the onclick (this is client side) to each selection.
With the above, then the Radio button shows which selected - which is rather nice for the user.
eg this:
Like anything, the default rblist and even spacing looks "horrible".
but, we can style the rb list. So, say this:
<asp:RadioButtonList ID="RadioButtonList1" runat="server"
RepeatDirection="Horizontal" CssClass="rMyChoice" >
<asp:ListItem onclick="myshow(1)" Value="1" Selected="True">UserName</asp:ListItem>
<asp:ListItem onclick="myshow(2)" Value="2">Profile</asp:ListItem>
</asp:RadioButtonList>
So, now we get this:
So, a few simple divs tend to be less work. you can as noted drop in two buttons.
So a rb list is nice since it shows/gives feedback as to which option in the rb list is selected. Toss in a style sheet (which even with your original buttons etc. you probably required)?
Then all in all, I think we wound up with LESS markup, no server post-back, and in fact I use the above trick for MOST of my pages - (very much like a menu in a given page). So, this works if you have 3 or 5 choices.
As for that style sheet for the rb list. Have to dig it up and open it!!! - not looked at it for years.
Oooo - more then expected, but the css file was this:
.rMyChoice h1 {
color: hsla(215, 5%, 10%, 1);
margin-bottom: 2rem;
}
.rMyChoice section {
display: flex;
flex-flow: row wrap;
}
section > div {
flex: 1;
padding: 0.5rem;
}
.rMyChoice input[type=radio], input[type=checkbox] {
display: none;
cursor: pointer;
}
.rMyChoice label {
display: block;
background: white;
border: 2px solid hsla(150, 5%, 75%, 1);
border-radius: 25px;
padding-left: 8px;
padding-right: 8px;
text-align: center;
box-shadow: 0px 3px 10px -2px hsla(150, 5%, 65%, 0.5);
position: relative;
margin-right: 9px;
}
.rMyChoice input[type="radio"]:checked + label, input[type="checkbox"]:checked + label {
background: hsla(150, 5%, 75%, 1);
color: hsla(215, 0%, 100%, 1);
box-shadow: 0px 0px 20px hsla(150,5%, 75%, 0.75);
}
.rMyChoice input[type="radio"]#control_05:checked + label {
background: red;
border-color: red;
}
.rMyChoice p {
font-weight: 900;
}
I'm trying to wrap text in asp:textbox control. This is code of my textbox:
<asp:textbox
runat="server"
ReadOnly ="true"
BackColor="Transparent"
BorderStyle="None"
TextMode="MultiLine"
Wrap="true"
style=" text-align: center;font-size: medium;"
Text='<%# Eval("Description") %>'>>
</asp:textbox>
And this is the effect:
I got horizontal scrollbar, and text is not wrapping. I want to achieve word wrapping without scrollbar (control should exceed its height).
I tried adding CSS wrapping tags, but effect is the same.
Try to add white-space: pre-wrap; to your CSS, then it works just fine:
style="white-space: pre-wrap; text-align: center; font-size: medium;"
I have problem getting my text from the validation under my textbox. It show up behind my textbox, just like in picture.
In my code for the type of assignment and assignment start textbox i have a css-class setting saying that display = block. That put the validation text under the textbox. If i put that on this element my second textbox end up under the first one (for example, the big empty textbox after the textbox saying AC- end up under the textbox saying AC-). I tried all different solutions but maybe I'm staring myself blind on the problem. I will pust my current code and i hope anyone out there can help me fix this problem.
first my aspx...
<div class="floatLeftPaddTop15PaddLeft40">
<asp:Label id="costCodesLabel2" runat="server" >Cost code 2:</asp:Label><br />
<asp:TextBox id="costCodeTextBox2Prefix" runat="server" CssClass="textBoxPrefix" Visible="false" ></asp:TextBox>
<div class="costCodeDiv" >
<asp:TextBox id="costCodeTextBox2" runat="server" CssClass="textBoxSuffix" ></asp:TextBox>
<asp:RequiredFieldValidator ID="costCodeValidator2" runat="server" ControlToValidate="costCodeTextBox2" ErrorMessage="Cost code is required."
ForeColor="Red" Display="Dynamic" Enabled="false" />
</div>
</div>
then my css...
.textBoxSuffix {
width: 120px;
height: 22px;
border: 1px solid #999;
}.
.textBoxPrefix {
width: 35px;
height: 22px;
border: 1px solid #999;
}
Or you can build the page with a html table ...
I want to have space between checkbox and the text.
<asp:CheckBox ID="chkPublic" runat="server" Text="Public" Font-Bold="true" />
How to get space between checkbox and text. Thanks.
EDIT: I need some css format. Thanks.
<asp:CheckBox ID="chkPublic" runat="server" Text="Public" Font-Bold="true" CssClass="mycheckbox" />
In stylesheet.css
.mycheckbox input[type="checkbox"]
{
margin-right: 5px;
}
A late reply, but hopefully helpful to someone else looking for a solution. You can "quick-and-dirty" add space by embedding non-breaking spaces in the text property value. The advantage is that you can do this for controls that are exceptions to the styles applied elsewhere without having to create a new style sheet for just one control. For example:
<asp:CheckBox runat="server" ID="myCheckBox" Text=" Check this to subscribe" />
I created a style for the label:
label {
font-size: 1em;
color: black;
text-transform: uppercase;
margin-left: 5px;
}
However it will affect the header labels so I also created a style as well:
.lheader {
font-size: 1.5em;
color: #1ca795;
text-transform: uppercase;
}
It worked perfectly on all devices.
Just add   before the text
in case for example text is generated like this:
Text='<%# Eval("SubCatName")%>'
do it like this:
Text='<%#" "+Eval("SubCatName")%>'
You could write it like this:
<asp:CheckBox ID="chkPublic" runat="server" Text="" Font-Bold="true" /> MyText
Or maybe just like that:
<asp:CheckBox ID="chkPublic" runat="server" Text=" Public" Font-Bold="true" />
is a single space in html
I am applying an image to a text box as follows
<asp:TextBox ID="TextBox1" runat="server" Style="background-image: url('Popup(Images)/Solved.png');"
BorderStyle="None" />
This is giving the following result
I tried it applying no-repeat but the image is not getting displayed. can any one help me. Why I am using Text box is the only control which gray out when its property set to disabled or if any one having any idea how to gray out image button with displaying image give me that solution
input.textbox
{
background-image: url('Popup(Images)/Solved.png');
background-repeat:no-repeat;
}
<asp:TextBox ID="TextBox1" runat="server" CssClass="textbox" BorderStyle="None" />
You can do it like this
<asp:TextBox ID="TextBox1" runat="server" Style="background: #ffffff url('Popup(Images)/Solved.png') no-repeat center center;" BorderStyle="None" />
When using the shorthand property the order of the property values are:
background-color
background-image
background-repeat
background-attachment
background-position
or if any one having any idea how to gray out image button with displaying image give me that solution
You can use a custom style to a disabled input type, as shown in this sample: http://jsfiddle.net/964dL/4/
give background-repeat property in style of your textbox
background-repeat:no-repeat;
style="background: #fff url(images/solved.png) no-repeat 0px 5px;"