MaintainScrollPositionOnPostback not working on Chrome? - c#

I know there have been alot of similar questions (I've checked Google) as the one I'm asking now. I've tried all the options/suggestions I've read about on Google, but still does not work for me. I've tried adding "maintainScrollPositionOnPostBack=true" to the top of my page, tried adding it to my web.config file, also I've commented out all of the .Focus on my controls because I read somewhere that it will override the maintainScrollPositionOnPostback. Nothing works for me for some reason.
Just a little context:
I have a drop down list that has a corresponding textbox that appears when the list item is selected by the user. With maintainScrollPositionOnPostback=true; when I select that particular list item choice, the page scrolls to the top of the page then scrolls back to where the drop down list and textbox is located. It's a little annoying because I have a bunch of drop down lists on this one page and every time the users selects an item, it would behave the way it is now..

when I select that particular list item choice, the page scrolls to the top of the page then scrolls back to where the drop down list and textbox is located.
Then you back to the correct scoll position and it works - just not all that great.
You don't mention how many combo (drop down list (ddl)) boxes you have.
Two solutions.
Use client side JavaScript for the ddl to hide/show the text box. Had you posted some of your markup, I could have posted some simple JavaScript code that hides/shows the text box. But, without us here seeing the markup, it beyond hard to do so.
The next idea? Use a update panel.
So, drop in right after the form tag a scrip manager control.
Then where your 3-4 ddl''s are?
Do this, so right after form tab, add script manager.
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
Then down in the page where the 3-4 dll's are, do this:
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
----> your 3-4 ddl's and text boxes go here.
</ContentTemplate>
</asp:UpdatePanel>
So, try the above - a update panel will do what we call a "partial" page post-back - the screen will not jump. And in fact, you can remove the maintainScrollPositionOnPostback.

Related

How to submit ASP.NET form only when the submit button is pressed and not when the selected index is changed of a dropdownlist with autopostback?

My question is about autopostback in ASP.NET:
I made a dropdownlist with autopostback on true. Depending on which value the dropdownlist is selected, it will generate some HTML, that works perfectly fine.
But when i put the attribute action in the form tag, it will automatically submit the form if i change the index of the dropdown list.
So i need to submit the form only when i press the submit button and it still needs to generate the HTML when i change the dropdownlist, how can i fix this?
Thanks in advance for your help.
A good rule of thumb is to do things on the server side only when it requires data from the server. That means if you're simply displaying different HTML based on what is selected in a drop down list, then make a simple drop down using HTML/JavaScript instead of involving server side technologies. Fewer moving parts is better.
However, if this HTML is dependent on data from the server side, here's some techniques to handle that:
UpdatePanel is the solution which will asynchronously post back to the server without disturbing the rest of the page. The Page_Load function of the page will run with every asynchronous postback, so make sure you plan for that accordingly.
<asp:ScripManager runat="server" />
<asp:UpdatePanel runat="server" ChildrenAsTriggers="True" UpdateMode="Conditional">
<Content>
<asp:DropDownList runat="server" id="MyDDL" AutoPostBack="True" OnSelectedIndexChanged="MyDDL_SelectedIndexChanged" />
</Content>
</asp:UpdatePanel>
However, I find that UpdatePanels introduce more headaches than they're worth. So I personally tend to use jQuery AJAX instead, pulling down HTML from a simple web service. You can find plenty of examples for how to do that online. Here is an example of a changed event handler and here is jQuery AJAX example.
You can use an UpdatePanel with the button as the trigger. You could also just set the AutoPostBack to false as suggested in your comment.
It has been a while since I worked on ASP.NET WebForms...The world has moved on to ASP.NET MVC and Node.js and Ajax. Maybe use an UpdatePanel? From what I remember I think WebForms posts back to get data in two ways and you can check if it is from the submit by checking Page.IsPostBack
http://msdn.microsoft.com/en-us/library/system.web.ui.page.ispostback(v=vs.110).aspx
I think the other piece of this puzzle is to check the value of the submit button or add a button click handler on the server for the submit...
http://forums.asp.net/t/1795485.aspx

ASP.NET Ajax triggers validators

I have a form with two parts. The top part allows the user to select items they want to purchase. I installed the Ajax toolkit from Microsoft, then I put a update panel on the top part. It works fine. When a user clicks the "update" button, it will update the final price of all the items they have selected.
Here's my problem. The lower part of the form is where they can enter their personal information. When the user clicks the "update" button on the top part, the lower parts validate is triggered. My update panel is only on the top part. Why is it acting like the entire form is submitted when the user clicks the button located inside of my update panel? Shouldn't ajax only send information in the update panel to the server?
Thanks for any help.
Because whenever you click on update button, the page will do a postback (in case of update Panel also). So in case of postback, everything inside <form id="form1" runat="server"> will be posted to server.
You can use ValidationGroup and CausesValidation property for specific validations.

.Net form controls drop by one "line" after selection

Yes, I realize that's a bit of a vague title but I'm having a hard time stating the problem. I have a .Net .aspx page that has a Master page, some Ajax, and an updatepanel. My problem occurs on 2 different pages but in both cases I'm either selecting a radio button or a checkbox when the behavior occurs. Immediately after selection the entire page moves down. It does not scroll but instead it is like an extra tag was inserted into the source. I have done HTML source comparisons before and after this change and nothing is different. I can only assume it is related to the updatepanel but I cannot determine where this may be happening.
I'd be happy to provide more information if you can direct me towards a solution.
Thanks!
I am not entirely sure if this will do it and there is not enough detail here to be sure, but have you tried setting RenderMode to inline on the UpdatePanel? Maybe that will do the trick. Otherwise go take a look at Fiddler and see what is coming back from the server. Alternate recommendation (if none of the above work) is to just get your result in Json and change the markup yourself with jQuery or something like it.
Incredible. This was exactly the problem. I've modified my code as follows and form stays in place after selection. This was a simple case of selecting a radio button and having it auto-populate a dropdownlist.
[asp:UpdatePanel ID="panelValidation" runat="server" ChildrenAsTriggers="true" UpdateMode="Always" RenderMode="Inline"]
[ContentTemplate]
[asp:ValidationSummary ID="ValidationSummary1" runat="server"]
[ContentTemplate]
[asp:UpdatePanel]
Thanks!

How to manually post back when in a repeater?

I am fairly new to asp.net webforms so I am open to suggestions of any kind.
I am listing products with a repeater.
With every product the looks something like this:
<ItemTemplate>
<div class="actionbutton_normal actionbutton_cart" onmouseover="actnbut_hover($(this))" onmouseout="actnbut_out($(this))" onclick="actnbut_click($(this))">
<asp:CheckBox Checked="false" class="actnbox_hidden" ID="chkCart" runat="server" AutoPostBack="True" />
</div>
</ItemTemplate>
As you can see the checkbox itself is hidden and it is used to represent the state of the icon.
I modify the checkbox's Checked attribute in javascript in the actnbut_click function. The problem with this is that checking the box in javascript does not activate the autopostback, (and I think it does not even make it into the viewstate, but I'm not sure). I tried to post back manually but I'm not able to figure out how to do it properly as the checkbox's ID is generated by the repeater.
All in all I want this functionality: there are a few items, under them are buttons (favorite, add to cart, select for comparsion, etc) with nice hover and click animations on them. If I click them I want serverside logic to be executed (depending on which button I clicked under which item, for example add to cart should add the specific item to the cart panel, or clicking on fav should access the database and increment the item's fav value by one, and add the item to the users favorites), but preserving the state of the objects on the page, including the buttons' state (clicked or not).
Which would be the best way to do this?
call __doPostBack(controlName, options) from javascript.

Using UpdatePanels inside of a ListView

I'm wondering if anybody has run across something similar to this before. Some quick pseudo-code to get started:
<UpdatePanel>
<ContentTemplate>
<ListView>
<LayoutTemplate>
<UpdatePanel>
<ContentTemplate>
<ItemPlaceholder />
</ContentTemplate>
</UpdatePanel>
</LayoutTemplate>
<ItemTemplate>
Some stuff goes here
</ItemTemplate>
</ListView>
</ContentTemplate>
</UpdatePanel>
The main thing to take away from the above is that I have an update panel which contains a listview; and then each of the listview items is contained in its own update panel.
What I'm trying to do is when one of the ListView update panels triggers a postback, I'd want to also update one of the other ListView item update panels.
A practical implementation would be a quick survey, that has 3 questions. We'd only ask Question #3 if the user answered "Yes" to Question #1. When the page loads; it hides Q3 because it doesn't see "Yes" for Q1. When the user clicks "Yes" to Q1, I want to refresh the Q3 update panel so it now displays.
I've got it working now by refreshing the outer UpdatePanel on postback, but this seems inefficient because I don't need to re-evaluate every item; just the ones that would be affected by the prerequisite i detailed out above.
I've been grappling with setting up triggers, but i keep coming up empty mainly because I can't figure out a way to set up a trigger for the updatepanel for Q3 based off of the postback triggered by Q1.
Any suggestions out there? Am I barking up the wrong tree?
To be honest, this would probably be better done in pure javascript, hide the elements initially and show them when the question is answered. You might not be keen on that though. I've just found that the UpdatePanel is great for simple adding ajax effects, but once you start trying to do hard stuff, it gets too complex and clunky. Also, the update panel does a post back to the server each time, if you are simply turning stuff on and off in the DOM it may be better to just do javascript.
Sorry if this isn't the answer you were after, just thought I'd let you know based on my experiences (I've spent too much time fiddling with update panels when I could have just done things in Javascript)

Categories