We Keep Coding

Multiview refreshes page and losing data in ASP.NET Webform

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;
}

pass client id from within the gridview to javascript function

I have a gridview that get binds dynamically. i have a linkbutton attached with every row that opens a modal popup window which I need to show some text which is in a hidden field in gridview.
I need to call a javascript function that sets the value of the label in the popup panel with the text of the hidden field. The problem is that the value is always blank when the popup is displayed.
Java script code is -
function SetNotesonModal(note)
{
//debugger;
var notes = document.getElementById(note.id).innerHTML;
document.getElementById('ctl00_ContentPlaceHolder1_popupLblNote').value = notes;
}
Code for calling the function is -
lnkViewNotes.Attributes.Add("OnClick", "return SetNotesonModal(" + e.Row.FindControl("lblNote").ClientID + ");");
The controls in gridview are as -
<ItemTemplate>
<asp:Label ID="lblNote" runat="server" Text='<%# Bind("notes") %>'></asp:Label>
<asp:LinkButton ID="lnkViewNotes" runat="server">View</asp:LinkButton>
<asp:ModalPopupExtender ID="ModalPopupExtender1" runat="server" TargetControlID="lnkViewNotes" PopupControlID="Panel2" CancelControlID="popupBtnClose">
</asp:ModalPopupExtender>
</ItemTemplate>
And the panel for popup is -
<asp:Panel ID="Panel2" runat="server" ScrollBars="Auto" align="center" Style="display: none"
CssClass="modalPopup">
<table class="border" style="text-align: left; height: 100%" width="100%">
<tr align="left" style="background-color: #5D7B9D; color: White">
<th>
Notes
</th>
</tr>
<tr>
<td>
<asp:Label ID="popupLblNote" runat="server"></asp:Label>
</td>
</tr>
<tr>
<td>
<asp:Button ID="popupBtnClose" runat="server" Text="Close" />
</td>
</tr>
</table>
</asp:Panel>
The javascript function is being called perfectly and its is also setting value of the label in popup panel correctly but not sure why the popup comes blank every time.
Any kind of help is welcome.
Thanks

For every linkbutton or button that should not trigger post back You should try adding:
OnClientClick="return false;"
Also take a look at postback with jquery

Is it possible to show headers while scrolling the gridview

I am using Gridview in my application. Grid view is binded with the data from the database with some header text. Now what i would like to have is when i scroll the grid view i would like to show the headers while moving the gridview how can i do this
This is what i wrote McArthey
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="StyleSheet2.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Panel ID="pnlWrapper" runat="server" Height="300px" ScrollBars="Vertical" BorderWidth="1px">
<asp:GridView ID="gvTheGrid" runat="server" GridLines="Both" CellPadding="3" CssClass="gvTable" AutoGenerateColumns="false" AllowSorting="true">
<columns>
<asp:BoundField DataField="id" HeaderText="id" HeaderStyle-Width="60" ItemStyle-Width="60" />
</columns>
</asp:GridView>
</asp:Panel>
</div>
</form>
</body>
</html>
stylesheet is as follows
TABLE.gvTable
{
table-layout:fixed;
}
TABLE.gvTable TH
{
position:relative;
border-top-width:0px;
border-bottom-color:Black;
background-color:#F5DEB3;
}
This is my sample source when i run and click on view source
<div id="pnlWrapper" style="border-width:1px;border-style:solid;height:300px;overflow-y:scroll;">
<div>
<table class="gvTable" cellspacing="0" cellpadding="3" rules="all" border="1" id="gvTheGrid" style="border-collapse:collapse;">
<tr>
<th scope="col" style="width:60px;">id</th>
</tr><tr>
<td style="width:60px;">10</td>
</tr><tr>
<td style="width:60px;">10</td>
</tr><tr>
<td style="width:60px;">10</td>
</tr><tr>
Header shown when page loads
No header when scrolls down

There is an example here that works on IE8.
This was very useful to me since we are moving to IE8 here at work and I needed to get this working.
There are a few tricks with using this solution. It expects to use the <thead> and <tbody> tags which are not rendered by default in the GridView. In order to render them, you'll need to add something along the lines of the following which was suggested earlier by another.
// will add <thead> and <tbody>
gvTheGrid.HeaderRow.TableSection = TableRowSection.TableHeader;
I have an example solution working here based upon that link that I sent via email.

The simple solution is to wrap the content of ItemTemplate (You can use Template Column) using .
<ItemTemplate>
<div style="height:100px; overflow:scroll">
.....
</div>
</ItemTemplate>
Take a look at CodeProject article : Scrollable GridView.

Here's how we've done it.
create an asp panel with a given height and specify vertical scrollbars
put the gridview inside the panel and give it a class of
myGridView
in CSS create the following styles
TABLE.myGridView
{
table-layout:fixed;
}
TABLE.myGridView TH
{ position:relative; }
Specify the widths of each asp:BoundField like this:
HeaderStyle-Width="85" ItemStyle-Width="85"
Here is an example of the code behind:
<asp:Panel ID="pnlWrapper" runat="server" Height="300px" ScrollBars="Vertical" BorderWidth="1px">
<asp:GridView ID="gvTheGrid" runat="server" GridLines="Both" CellPadding="3" CssClass="gvTable" AutoGenerateColumns="false" AllowSorting="true">
<columns>
<asp:BoundField DataField="C" HeaderText="C" HeaderStyle-Width="60" ItemStyle-Width="60" />
</columns>
</asp:GridView>
</asp:Panel>
Here is the CSS:
TABLE.gvTable
{
table-layout:fixed;
}
TABLE.gvTable TH
{
position:relative;
border-top-width:0px;
border-bottom-color:Black;
background-color:#F5DEB3;
}
Here is the generated HTML:
<div id="ctl00_MainContent_pnlWrapper" style="border-width:1px;border-style:solid;height:300px;overflow-y:scroll;">
<div>
<table class="gvTable" cellspacing="0" cellpadding="3" rules="all" border="1" id="ctl00_MainContent_gvTheGrid" style="background-color:WhiteSmoke;border-collapse:collapse;">
<tr style="font-size:Medium;">
<th scope="col" style="width:60px;">Select One</th>
<th scope="col" style="width:60px;">Number</a></th>
<th scope="col" style="width:60px;">Address</a></th>
<th scope="col" style="width:200px;">Phone</a></th>
</tr>
</table>
</div>
</div>
You can see the classes for the CSS match between the code/generated source.
HTH

How To Position Table Inside The Panel C# Web App?

i am trying to vertically align the table present in the panel but i cant and when i apply style properties to the table it does not work ? means there would be no effect of style property on it as my code is given below,
<asp:Panel ID="Panel1" runat="server"
style="z-index:0;left:250px;position:absolute;top:160px; height: 160px; padding:10"
BackColor="Green" Width="300px">
<div style="width: 295px; height: 155px;" align= "center">
<table style="height: 48px; width: 187px; margin-left:0px; min-height:14px; min-width:55px; vertical-align:bottom" align="center" bgcolor="green" >
<tr>
<td>
<asp:Label ID="Label2" runat="server" Text="UserName" ForeColor="White"></asp:Label>
</td>
<td>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
<asp:Label ID="Label3" runat="server" Text="Password" ForeColor="White"></asp:Label>
</td>
<td>
<asp:TextBox ID="TextBox2" textmode="Password" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
<asp:Label ID="Label4" runat="server" ForeColor="White"></asp:Label>
</td>
<td>
<asp:Button ID="Button1" runat="server" Text="Login" onclick="Button1_Click" />
</td>
</tr>
</table>
</div>
</asp:Panel>
Hopes for your suggestions

Vertical alignment of some content within parent container is always tricky if you don't know the height of the content. Solution is to have a wrapper div in between parent & content elements. Then have outer container with "display:table" and wrapper div with "display:table-cell" aligned vertically in middle. See this fiddle for the illustration: http://jsfiddle.net/myXL3/3/
For complete information on this approach, see this excellent article: http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

The problem here is that you have the table within a div element. Adding vertical-align:middle to the div's style should work. This assumes that the div is always "higher" than the table (as in your code snippet).
(Also, you have margins in your table's style - they should be removed to make sure they are not interfering with the vertical alignment)

Allow Enter key to login in asp.net?

I have a standard asp:login control:
<asp:Login ID="mbLogin" runat="server" TitleText=""
DestinationPageUrl="~/Default.aspx"
PasswordRecoveryText="Forgot your password?"
PasswordRecoveryUrl="~/LostPassword.aspx"></asp:Login>
In Internet Explorer, pressing Enter does not submit the form, but IE beeps at me 10 times rapidly. In other browsers Enter works perfectly fine and submits the forum as you'd expect.
I've seen this question but that only works when you have actual form element with an actual button, not the login control as a whole.
Why is it being blocked in IE (and why 10 times for some reason)? Is there a workaround?

In the designer of your Login control: "Convert To Template". Then in the Page Load set the defaultButton of your form by finding the LoginButton.
ASPX:
<form id="form1" runat="server">
<div>
<asp:Login ID="Login1" runat="server" OnAuthenticate="Login1_Authenticate">
<LayoutTemplate>
<table border="0" cellpadding="1" cellspacing="0" style="border-collapse: collapse;">
<tr>
<td>
<table border="0" cellpadding="0">
.....
<tr>
<td align="right" colspan="2">
<asp:Button ID="LoginButton" runat="server" CommandName="Login" Text="Log In" ValidationGroup="Login1" />
</td>
</tr>
</table>
</td>
</tr>
</table>
</LayoutTemplate>
</asp:Login>
</div>
</form>
Code-Behind:
protected void Page_Load(object sender, EventArgs e)
{
Button lbButton = Login1.FindControl("LoginButton") as Button;
form1.DefaultButton = lbButton.UniqueID;
}

This is a hack, but it will provide a work around for your issue with Internet Explorer.
Add a text box to your page that is hidden from view.
<!-- Hack for Internet Explorer browsers to allow the page to post back when the enter key is pressed-->
<asp:TextBox ID="txtIEHackBox" runat="server" style="visibility: hidden; display: none;" />
This will cause Internet Explorer to send back the Button Web control's name/value pair upon hitting Enter.

Button lbButton = Login1.FindControl("LoginButton") as Button;
ContentPlaceHolder contentPlaceHolder = (ContentPlaceHolder)Master.FindControl("ContentPlaceHolder1");
contentPlaceHolder.Page.Form.DefaultButton = lbButton.UniqueID;

I know this is a super old post, but another way to do this is by using an asp:Panel with DefaultButton set to the ID of the button that the user would normally click on to log in:
<asp:Login ID="LoginUser" runat="server">
<LayoutTemplate>
<asp:Panel ID="LoginPanel" runat="server" DefaultButton="LoginButton">
<other stuff here like username and password textboxes>
<asp:Button ID="LoginButton" runat="server" CommandName="Login" Text="Log In"/>
</asp:Panel>
</LayoutTemplate>