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 have an asp:ListView control containing a bunch of images set up like this:
<asp:ListView ID="lvSliderPhotos" runat="server">
<ItemTemplate>
<asp:Image ID="imgSliderPhoto" runat="server"
ImageUrl='<%# Eval("ThumbnailPath") %>' />
</ItemTemplate>
</asp:ListView>
For my DB table containing these I have a field called IsPublic which stores a boolean. How can I apply a style to the asp:Image control if the value is false?
I basically want something like this:
<asp:Image ID="imgSliderPhoto" runat="server"
ImageUrl='<%# Eval("ThumbnailPath") %>'
Style='<if (!Eval("IsPublic") { set a style property }>' />
Any idea how this can be accomplished?
You can check the value of IsPublic inside the CssClass property of the image control and set it to the desired style rule:
CssClass='<%# Convert.ToBoolean(Eval("IsPublic")) ? "public" : "private" %>'
Complete example:
<head runat="server">
<title></title>
<style type="text/css">
.public {
border: 6px solid red;
}
.private {
border: 6px solid black;
}
</style>
</head>
<body>
<asp:Image ID="Image1" runat="server" />
<form id="form1" runat="server">
<asp:ListView ID="lvSliderPhotos" runat="server">
<ItemTemplate>
<asp:Image ID="imgSliderPhoto" runat="server"
ImageUrl='<%# Eval("ThumbnailPath") %>' CssClass='<%# Convert.ToBoolean(Eval("IsPublic")) ? "public" : "private" %>' />
</ItemTemplate>
</asp:ListView>
</form>
</body>
I have a listview that repeats horizontally, and it displays 20 images. With my screen resolution, there's space for 5 images/row, so I should see 4 rows.
Unfortunately, it is currently showing one long row with all 20 images. It's also displaying the horizontal scrollbar.
My question: how can I limit the space to my screen resolution so that I see the 4 rows with images and no horizontal scrollbar? Everything should be displayed within the screen. If anything, there should be a vertical scrollbar to scroll down.
I added some CSS to limit the size of the body to 100%, but nothing changed. I also set the div within <body> to 100%, but didn't do anything either.
Here's the code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
body, html
{
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div style="width:100%">
<asp:DataList id="DataListImages" RepeatDirection="Horizontal" RepeatLayout="Table"
RepeatColumns="0" runat="server">
<HeaderStyle BackColor="#aaaadd">
</HeaderStyle>
<AlternatingItemStyle BackColor="Gainsboro">
</AlternatingItemStyle>
<HeaderTemplate>
</HeaderTemplate>
<ItemTemplate>
<div style="width: 192px; height: 162px"></div>
<asp:Image runat="server" id="ProductImage"
AlternatingText='<%# DataBinder.Eval(Container.DataItem, "Name") %>'
ImageUrl='<%# Eval("image_path","~/Styles/Images/{0}") %>' />
</ItemTemplate>
</asp:DataList>
</div>
</form>
</body>
</html>
First off, this is a DataList - you need to fix that.
You need to take a look at the ListView GroupTemplate:
Using GroupTemplate in ASP.Net ListView Control(Tiled Display)
You may want to pay attention to the dimensions of the images and the file sizes from a performance point of view.
Here's a sample of using ListView GroupPlaceHolder to achieve a certain layout:
<asp:ListView ID="galleryView" runat="server" OnPagePropertiesChanging="ChangePage"
GroupPlaceholderID="groupPlaceHolder" ItemPlaceholderID="itemPlaceholder"
GroupItemCount="5">
<LayoutTemplate>
<div ID="groupPlaceHolder" runat="server"></div>
</LayoutTemplate>
<GroupTemplate>
<div ID="itemPlaceholder" runat="server"></div>
</GroupTemplate>
<ItemTemplate>
<asp:Image runat="server" id="ProductImage"
AlternatingText='<%# DataBinder.Eval(Container.DataItem, "Name") %>'
ImageUrl='<%# Eval("image_path","~/Styles/Images/{0}") %>' />
</ItemTemplate>
<GroupSeparatorTemplate>
<div id="Div1" runat="server">
<div style="clear:both"><br /></div>
</div>
</GroupSeparatorTemplate>
</asp:ListView>
<div style="clear:both; padding-top:8px; padding-left:8px;">
<asp:DataPager ID="DataPager1" runat="server" PagedControlID="galleryView" PageSize="40">
<Fields>
<asp:NumericPagerField ButtonCount="20" />
</Fields>
</asp:DataPager>
</div>
I am working on asp.net and ajax using c#. I am trying to create a new user registration where i am poping a updatepanel with loading image when an user clicks on submit button. and also i need to insert the data into database at the same time. I use the following code,
<asp:UpdatePanel ID="updatepanel1" runat="server">
<ContentTemplate>
<asp:TextBox runat="server" ID="txtMI" Width="80px" Height="20px" CssClass="s1"> </asp:TextBox>
<asp:TextBox runat="server" ID="txtMI" Width="80px" Height="20px" CssClass="s1"></asp:TextBox>
<asp:TextBox runat="server" ID="txtMI" Width="80px" Height="20px" CssClass="s1"></asp:TextBox>
<asp:Dropdownlist ID="drpCountries" runat="server" Font-Bold="True" ForeColor="#FF3300"></asp:Dropdownlist>
<br />
<asp:Button ID="btnLoad" runat="server" onclick="btnLoad_Click" Text="submit" />
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdateProgress id="updateProgress" runat="server">
<ProgressTemplate>
<div style="position: fixed; text-align: center; height: 100%; width: 100%; top: 0; right: 0; left: 0; z-index: 9999999; background-color: #000000; opacity: 0.7;">
<asp:Image ID="imgUpdateProgress" runat="server" ImageUrl="~/avatarloading.gif" AlternateText="Loading ..." ToolTip="Loading ..." style="padding: 10px;position:fixed;top:25%;left:35%;" /><center><span style="color:White;font-weight:bolder;font-size:x-large;"><b>Loading...</b></span></center>
</div>
</ProgressTemplate>
</asp:UpdateProgress>
and in my code behind file like,
protected void btnLoad_Click(object sender,EventArgs e)
{
//INsert the records into database
}
At first when user clicks on submit i am able to pop loading panel with loading gif image. after successful insertion i need to show some message like registration success in place of image on loading panel. please guide me.
You can bind endRequest event of asp.net ajax to get control after ajax request completed.
<script language="javascript" type="text/javascript">
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(endRequest);
function endRequest(sender, args) {
alert("After ajax request");
}
</script>
I'd create a panel which looks identical to the UpdateProgress markup (css classes) with a label in it. And on a successful operation you set the label text and switch the panels Visible property to true.
It doesnt appear on the screen when I run it..but it does appear in visual studio 2010 in the design view. Also i want to set the tabs from left to right to right to left:
<asp:TabContainer ID="TabContainer1" runat="server" ActiveTabIndex="2"
Height="584px" Width="739px" AutoPostBack="True" BackColor="#666699"
BorderColor="#666699">
<asp:TabPanel ID="Questions" runat="server" HeaderText="שאלות">
<ContentTemplate>
<asp:GridView runat="server" Height="547px"
style="margin-left: 2px; margin-top: 15px" Width="667px">
</asp:GridView>
</ContentTemplate>
</asp:TabPanel>
<asp:TabPanel ID="Answers" runat="server" HeaderText="תשובות">
<ContentTemplate>
<asp:GridView ID="GridView1" runat="server" Height="547px"
style="margin-top: 17px" Width="666px">
</asp:GridView>
</ContentTemplate>
</asp:TabPanel>
<asp:TabPanel ID="Responses" runat="server" HeaderText="תגובות">
<ContentTemplate>
<asp:GridView ID="GridView2" runat="server" Height="547px"
style="margin-top: 21px" Width="666px">
</asp:GridView>
</ContentTemplate>
</asp:TabPanel>
</asp:TabContainer>
For set tabs right to left add the following style onto the page:
.ajax__tab_header
{
text-align: right;
}
But for resolving visibility issue it is not enough information. Do you play with visibility property in code-behind?
Or even better:
.ajax__tab_header
{
direction: rtl;
}
that will switch the order of the tabs too. (for rtl languages)