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.
Related
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.
I have a web page with an update panel in it.
Inside the update panel I have a panel with a user control like this:
<asp:UpdatePanel ID="updatePanel" runat="server" ChildrenAsTriggers="true" UpdateMode="Conditional">
<ContentTemplate>
<asp:Panel ID="pnlFiles" runat="server" EnableViewState="true">
<files:FilesControl runat="server" ID="filesControl" />
</asp:Panel>
</ContentTemplate>
I have a list of checkboxes that whenever the user checks one of them I want to add another FilesControl to that panel
so I am doing it like this:
FilesControl files = (FilesControl)LoadControl("~/UserControls/FilesControl.ascx");
files.ID = XXX;
pnlFiles.Controls.Add(files);
But on every postback (every checkbox checked) the panel loses the last state and the controls added are wiped out, so the panel actually returns to its initial state every time and I can't ad more and more controls to it.
I enabled view state and it didn't help.
What am I missing out here ?
As requested, my comments as answer:
You need to add the control(s) to the page on every postback in Page_Init or Page_Load(at the latest) with the same ID as before.
The ID is unique, I generate it. I add the controls on the checkbox
checked change event chkCompare_CheckedChanged
While it is perfectly fine to add a control dynamically in an event, it is necessary to re-create this control on the subsequent postbacks. That must be done in Page_Load at the latest (better: Page_Init). So you need to store somewhere which controls you have already added to be able to re-create them. Maybe it is sufficient to store the control-count in the ViewState.
So I should store the controls I added in the ViewState object and
then re-add them to the panel on Page_Load ?
No, you shouldn't store the controls in the ViewState but the information that is necessary to re-create them. How do you know what you need to add? Of course you could also use a webdatabound control like Repeater, DataList or GridView where you only need to assign a DataSource and the persisting stuff is done automatically for you.
That is what is done with all controls even if you add them declaratively(on aspx). But those controls are re-created automatically by ASP.NET. All variables are disposed at the end of the page's life-cycle since the communication between the client and the server is stateless and disconnected.
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
I am working on a project in which on selecting a drop down list item the values from the database should appear in the respective two text boxes.
But, alongside I am placing an image which is actually getting created based on the two values. Now on selecting the next dropdownlist item there is a page refresh and the placed image dissapears.
How to I avoid the page refresh keeping in mind that the fields from the database must get displayed on the page in the two fields on select of drop down list.
Kindly help!
thanks...
In my case, there exists a table in which there are two halfs, the left has text boxes n a button n to the right side of the table the image appears.
If you are using ASP.NET WebForms, you could wrap the controls which you only wants to post back inside an UpdatePanel.
Alternatively, remove AutoPostBack="true" from your DropDownList, and use javascript/jQuery AJAX to perform your database request.
Disable autopostback.
<asp:DropDownList AutoPostBack="false" ... />
Without the slightest piece of code, this will be hard to answer.
To prevent default behavior in javascript, there is this method
e.preventDefault();
Where e is your event.
Your issue is to preserve the values fetched from DB.
The easiest and safest way is to store the values fetched from database into hidden fields. This way when your page postbacks the values persists and you can use them as you wish.
Happy Coding!!!
I am creating online booking page.
I got some example page you can see in this link
http://www.parkercorporate.co.uk/webbookercc/OneForm.asp
I need the same behaviour in my site whenever user selects value in pickup dropdown list in the right side I need to change the text values or view.
To do this behaviour how should I write code in ASP.NET and c#.
Thanks
Ranam
First, use an UpdatePanel so you don't see any visual postback.
Second, set the AutoPostBack property on your DropDownList to True.
Third, handle the DropDownList's SelectedIndexChanged event. This will now fire after every change in the DropDownList, because you enabled AutoPostBack.
In the event handler, you can now change the ActiveViewIndex of the MultiView, or show/hide controls, change textboxes, etc.
First, create different blocks (i.e divs) and give ID's to them.
Then, for each value in the dropbox, fill the divs w.r.t it.
Assign "OnChange" event to the dropdown, and in the handler, set visible or invisible to corresponding block.
On the other hand, If you want to do this on client side, I strongly suggest you to use JQuery, to prevent a lot of requests going to server.
Check this out with JQuery:
make visible div on dropdown select in jquery
If you won't fetch values from database, there is nothing complex about this page. Because it just writes hospital if you choose hospital etc. and changes control's visible state.
Even if you think you need db queries when dropdown's selected change event, actually at this page there is no need. Just store db values in hidden controls (like Hospital- for Hospital) and when dropdown selection changes, write hidden's value completely in javascript