Context popup hiding after Ajax postback - c#

I am using this jQuery context popup menu extension:
http://www.trendskitchens.co.nz/jquery/contextmenu/
This context menu is bound against an ASP.NET treeview adding a context menu to all items.
All contained within an update panel.
In order to select the item when right clicking, I am using JQuery to parse the postback from HREF that would normally fire when the tree item is being clicked, and using eval() against this HREF. This results in a post-back to IIS. Immediately after is my JQuery code for displaying the context menu. The context menu appears briefly however goes as soon as IIS returns the updated page data.
Just after some general advice on how people think is best to approach this. I can avoid this by making users LEFT click the tree node prior to right clicking it, but that just seems unintuitive.

Hey Sam, as far as I see it the whole idea is kind of wrong from the start, I am a .Net developer but I've always avoided introducing an update panel in my applications, if you look behind the curtains you will see that update panels insert a form tag within the application which kind'a runs at server, try to insert two forms with runat server attribute one within the other in a VS see what they say :). To be honest it's fairly easy to build a contextual menu with templates as layout; it's about 3 hour work and several others for testing.
Getting back to your issue. I see that you have two options here: either learn how to open the menu from javascript and retain the position inside a hidden field before postback(on click/open) and after the postback occurs reopen the menu at the desired position/components, either search for the code which actually does the post back and prevent it in your case. Could be a click and if so all you need is an ev.preventDefault(), could be a submit and then you would need to set up a variable and on submit return false or something like that. Can't really give you the actual code solution without seeing the page which has this "bad" behaviour, anyhow left clicking is, as you said, not intuitive and frankly not an option in this case.

Related

Display busy cursor while processing queries

I've been searching for this and couldn't find something that works as I'd want it to. I have a classic asp.net webpage which makes a lot of SQL queries, some longer than others. I am not very familiar with terms to use, but the page doesn't load on each commands. So let's say the user fills some fields, then presses "Submit", it looks like nothing is happening even though SQL is processing a query.
I am looking for a way to let the user know a process is going on (busy/wait/hourglass cursor is enough for me). I tried some JavaScript calls on onbeforeunload and onunload events but as I said, page doesn't "reload" once the user did an action on it. I tried to look for the same for postbacks, but I couldn't find much and I'm not even sure postback is what is happening.
Any help with what to look for would be appreciated. As it is right now and with my limited understanding of how things work in a asp.net webpage, I'm not sure what to search for anymore.
Thanks.
You could do this if your using classic ASP.NET
Create a JS function
function doHourglass()
{
document.body.style.cursor = 'wait';
}
Add these two events on your Body Tag. If your using an update panel add them to the update panel tag instead
<body onbeforeunload="doHourglass();" onunload="doHourglass();">
http://www.codeproject.com/Articles/8243/Hourglass-cursor-for-Web-ASP-NET-pages

Using popup windows in Visual Studio C# and ASP.NET - quick learning

Whenever the "Reserve" button is clicked in my web application (ASP.NET with C#, Visual Studio), a small window should pop up containing detailed options to choose from (drop down lists with values, comboboxes, etc), with a "Next" link, and "Finish", in the end. Changing the values in these controls should update tables I have in the database (Microsoft Sql Server).
Could you point me towards a detailed and useful resource/example of this? I am already using a book for inspiration (Cristian Darie) written in the form of steps / explanations, but scenarios as just described are not included. What should I be looking for? "Using Pop up windows with Visual Studio"? Is what I described known as a popup window?
I don't know JavaScript, is that needed here? Been practising lately a lot with classes, methods, stored procedures, masters, user control type files, handling db tables through Visual Studio classes and methods, etc but still new to these (a month old basically). Thanks a lot!
it's not necessary to use JavaScript, but if you want anything a bit more fancy than just a regular popup window, javascript will be a good friend to you. As I see it it's basically four main ways of doing it:
1
Create a new ASPX file with the "details", send a querystring to the url of the details view in order to connect the popup with the data from the main window. a key to this is the "target" property of the html "a" tag. For example:
Details
2
Create a popup window with some custom properties (i.e toolbars window size of popup etc) using regular javascript. Look for window.open in javascript.
Example:
Details
3
Using jQuery to open the popup in a modal dialog fashion using a lightbox. For this alternative I don't have any example, but google jQuery lightbox, there are heaps of them. Use that with an AJAX-call and achieve your goals.
4
And at last, use ASP.NET AJAX Control Toolkit (look here:
http://www.asp.net/ajaxlibrary/act.ashx) Download and install, use the ModalPopupExtender (tutorial here: http://www.asp.net/ajaxlibrary/act_ModalPopup.ashx) from the toolkit, in which case you design your "details" view in a <asp:Panel> control and then using CSS and the ModalPopupExtender to display and hide the details, the looks will be like the lightbox but you don't have to create a separate ASPX page for this option, but you can use the same ASPX.
I've worked alot with all four options, and i tend to like the 4th alternative the best, but we all have our own taste.
Good luck, and feel free to ask away for more detailed information. :)
let's take this step by step. In order to send that information, I think the
easiest way would be to store the parameters as session variables and then reload them
when the popup is closed, you can reload the parent window using the "onunload" event in
Javascript, for example
<body onunload="window.opener.location.reload(true);">
This would in
itself reload the parent window whenever the user closes the popup. IF you want it to close
when the user saves changes (and your session variables are set), use this code in order to reload
the parent window and close the popup. Put this code in the code behind, just before the
end of your method that saves the data:
Page.ClientScript.RegisterStartUpScript(this.GetType(),"close","<script language=javascript>window.opener.location.reload(true);self.close();</script>");
To learn javascript, have a look at codeproject.com, they have a lot of articles regarding
javascript (among other things), often with example code. :)
I made a quick example here: http://www.4shared.com/zip/LPtR1gbx/pop.html
I would recomment using a <div> element rather than an actual new browser window.
It eliminates the need to pass the contextual information from the pop-up window back to the original window along with all the complexities involved with it (including things like the user inadvertently clicking off the pop-up window, clicking multiple times and thus bringing up multiple copies of the pop-up window, and so forth).
By using a <div> that "pops up", via controlled visibility through CSS or JavaScript, the entire context is kept to the same web page, making life so much easier overall.

Can you force a Page Render after it's loaded

Problem:
I am loading one of several user controls based on a selected tab within RadTabstrip Control which is on the parent page. I've captured the Selected Tab and assigned it to a Session variable within the OnTabClick event to use in each User Control to determine if that particular control needs to be rendered.
The reason for this is because each User Control queries a database to render different charts and I don't want unneccesary processing occuring on every post back to the server. I'd like to add that each User Control has several Labels in their Markup that only gets the Text values assigned during runtime based on the content retrieved from the database.
When I load the main page, the selected tab variable is checked by each User Control and everything works fine from that scope. (The first tab at index 0 has no Charts)
Problem is when I select a Tab which has a User Control, the appropriate code to acquire the data from the database and build the chart works fine but the TEXT value of the Label controls in the Markup don't show up on the Page, although the TEXT values are being set in the Code-Behind at the same time the data is being retreived.
If I perform a Post Back of the same page, the TEXT values of the Label controls appear.
I believe this is because the 1st stages of the Page Life Cycle which include the rendering of the Markup aren't firing on the initial loading of the User Control, but get fired on subsequent Reloads or Refreshes of the Page.
Is there a way to work around this? I am figuring a call to the Render event after hitting the database would work but I may be way off base on my thoughts.
Can anybody provide some advice or a potential solution???
Thanks
I was never able to resolve the late binding issue which prevented the text of the labels from appearing until after a manual refresh of my page so I approached the issue from a different angle. I still retained the logic that only allowed the data of each User Control to get populated if their corresponding Tabs were selected by the user, but I moved the in-line code which was embedded in my Markup to my Code-Behind file.
I was not 100% certain as to the order that the mark-up vs. the code-behind got processed, so I researched and found that anything done declaratively in the aspx page is processed first, and the objects are created before being accessed or updated in the code behind.
So with this information I totally separated the two and was able to get the Text to render on the labels without any issue.
I still would haved liked to have known the appropriate way to force a page to call the Render event to simulate or mimick a manual Postback after the initial Page_Load, but going with the flow of the Page Cycle is the much easier and probably a more preferable way to do things.
One way to approach your problem is to consider use of the "Update Panel". It will allow you to render the entire page and then on an event only refresh the area of the update panel.
Generally I would love this feature for performance reasons but there is a catch. Some browsers (e.g. versions of Safari and Opera) do not render these correctly. Is your application a web application intended for general use by consumers? If so you may need to consider a full page refresh on the same page and pass the user data (unless Opera / other browsers have fixed this shortcoming - I have not tested in in 4 months).

C# force page load on browser back click

I'd like to know how I can detect that the back button is clicked from the browser.
I have the following situation. On my website I have a search form. When you perform two search actions and then click the back button, the values of my dropdownbox are not stored correctly.
Imagine you search the first time on keywords, after that you search by titles. Now, when you click the back button, you see the results of the keywords, but in the dropdown, titles is still visible. I want keyword to be visible in the dropdown.
In my session I store what the search type is. So that's why I want to know how to force a page_load on the browser back button.
When I disable the cache I get this error message (IE 7) "Webpage has expired"
PS: I've read this thread, but it didn't answer my question (Forcing page refresh on click of back button)
Perhaps you're looking for the wrong solution (an ASP.NET solution rather than a browser solution). I think the controls display that way because the browser is trying to be helpful:
You visit search page, select keywords, POST request
The page displays keywords results, you select titles and POST request
The page displays title results, you click back button
The browser either displays the page as it looked when you left, or it re-POSTs your previous request. With the former, you see "titles" in dropdown; with the latter, you see "keywords" in dropsdown.
If this really bothers you, you could just spit out a little JavaScript to change the selected value when the page loads. Of course, if you have auto-postback on change to that value, this could introduce another problem.
Another solution is to generate a unique JavaScript variable on the server side (for example, a GUID) and write it to the page through perhaps a registered script. Next, on each page load you will check to see if a cookie exist with that same variable set, if one does, you can be assured that you are viewing a cached page and you should force a reload. Otherwise, store the variable to the same cookie for the next load.

Good way to maintain ASP.NET Panel states?

I'm creating a multi-part web form in ASP.NET that uses Panels for the different steps, making only the Panel for the current step visible. On Step 1, I have a drop-down list that uses a Javascript function to reconfigure some of the fields in the same Panel via "onchange". Obviously, since the client-side script is only affecting the DOM, when I go to Step 2 and then back up to Step 1, the fields in Step 1 are back to their orignal configuration even though the same drop-down choice is selected.
What is a good method for storing the visual state of the Panels between steps? I considered calling the drop-down's onchange function on page load, but that seemed clunky. Thanks!
--
Thanks for the quick answers - I think I'll try out the Wizard, but the AJAX solution also sounds like fun.
You might consider an ASP.Net Wizard control for this- it will automate a lot of what you're trying to do.
I suggest you to use the MultiView control, which is let's say semantically more appropiate. And then store this data in ViewState. I have written something similar and it rocks.
I think your best bet is to maintain all of your state in one place, or don't maintain any state at all. The main problem you're having is synchronizing your client-side state with your server-side state.
Try showing/hiding your panels with javascript instead of posting back, if possible. If not, use some ajax to update values on the server-side as soon as they are selected, rather than when you click the next/previous button.
Otherwise, you could use something like ASP.Net Ajax Toolkit Tabs to help with transitions.
Hope that helps!

Categories

Resources