Making Long Forms Easier [.NET]
If you have an unwieldy form, like I do, it can be a pain when you click an action button near the bottom of the page and have it scroll all the way up on PostBack.
There's an easy way around this and it works wonders for usability. In your LinkButton or Button controls, just modify the PostBackUrl property to point to an anchor in your form.
For example, let's assume this is a really long form with multiple ListViews, nested stuff, etc. My markup might look something like this:
<!-- Lots of other stuff -->
<asp:ListView id="foo" runat="server">
<LayoutTemplate>
<div>
<asp:placeholder id="itemPlaceholder" runat="server" />
</div>
</LayoutTemplate>
<ItemTemplate>
<p>
<%# Eval("Something") %>
<asp:button id="btnEditFoo" CommandName="Edit" runat="server" />
<p>
</ItemTemplate>
<EditItemTemplate>
<div>
<!-- textbox -->
<asp:button id="btnFooEdit" runat="server" />
</div>
</EditItemTemplate>
<InsertItemTemplate>
<div>
<!-- textbox -->
<asp:button id="btnFooInsert" runat="server" />
</div>
</InsertItemTemplate>
</asp:ListView>
Well, when the user clicks Edit or Insert, on PostBack they're going to be returned to the top of the page. How can we fix this to make the UX (user experience) better? Here's how:
<!-- Lots of other stuff -->
<asp:ListView id="foo" runat="server">
<LayoutTemplate>
<div id="foo-container">
<asp:placeholder id="itemPlaceholder" runat="server" />
</div>
</LayoutTemplate>
<ItemTemplate>
<p>
<%# Eval("Something") %>
<asp:button id="btnEditFoo" PostBackUrl="#foo-edit" CommandName="Edit" runat="server" />
<p>
</ItemTemplate>
<EditItemTemplate>
<div id="foo-edit">
<!-- textbox -->
<asp:button id="btnFooEdit" PostBackUrl="#foo-container" runat="server" />
</div>
</EditItemTemplate>
<InsertItemTemplate>
<div id="foo-insert">
<!-- textbox -->
<asp:button id="btnFooInsert" PostBackUrl="#foo-container" runat="server" />
</div>
</InsertItemTemplate>
</asp:ListView>
So what have I done? I've added IDs to the containers in the ListView and added PostBackUrl to my buttons and pointed them to the IDs (using regular HTML anchor syntax). Now when someone clicks Edit to edit something, it will PostBack to MyPage.aspx?q=whatever&moreq=foo#foo-edit. How nice! It even preserves your querystring.
Hope that helps you!