Hidden controls, iframes or divs - asp.net

What happens to the controls or the iframe or the div, which are hidden?
Do they get transferred to the user side?
Disabled:
does it get transferred to the user side?
What I want is,
an aspx page will be having many iframes to display different pages.
There will be many div tags to display CSS formatted information.
To understand what I mean by many:-
I have to transfer a complete website with 30 aspx pages into one single page!
I have simply combined everything resulting in one extremely huge page.
My concern is that on local host it loads fast, but when on online server accessed by numerous people for education purposes, the site (ONE PAGE) WILL SLOW DOWN terribly.
To overcome this I thought of using hidden and disable options.
What is an improved way of achieving the above?
Yes, it sounds silly but this is the requirement.
Edit:
Yes, I know id and server tag must be set, but what I am asking will the div tag be sent to the user's browser? One answer is no.
So can I enable them using JavaScript?
Like
document.getElementById(id).style.visibility="visible"
What if I disable them, and from coding of JavaScript enable them? Will they be loaded at the time of enabling?

Yes, they will be transferred if you hide them with CSS styles only.
Turn your iframe and your div container into a server control by adding an ID and the runat=server attribute. Then you can programmatically set the .Visible property to false which prevents the containers to the rendered into the DOM and therefore to be sent to the client.

Use ASP.NET panels. They render out as divs when visible. If they are set to visible = false the HTML and .NET controls inside them are not rendered to the browser.

Related

HTML Change button state permanenty

I am completely new to web development. The question I have is rather simple (I guess), but after multiple hours of using google and experimenting I am still without any solution. The problem I have is probably not how to do it, but which keywords to use while searching.
I want to create a simple website. (For testing I use Caddy Server). For my website I use a simple index.html file. On my website I want to have 9 buttons, which will be disabled once clicked. After refreshing the page, every client should also see the changes, so the button-state has to be stored somewhere on the server.
Then there will be another button, which sets the web page to its initial state (all buttons enabled). The purpose of this web page is that 2 persons can click buttons successivley until only one button is left enabled (the web page reloads itself every second on every client). This will be used to select a certain map from a map-pool of 9 maps.
My main problem is, to store the button states, so after refreshing the page the buttons should be still disabled if they were clicked. All clients should see the buttons as diabled once they refresh their pages. Do I have to implement a database for this or store the button states in xml or json? Do I need javascript, jquery, php or ajax for this? I do not want to make it very complicated, so if I need for example a database for this, I will probably just give up.
What I'm asking for: Any point in the right direction on how to implement a simple button that keeps its state after reloading the page would be much appreciated. I found a solution for this using JQuery, but it does not work for me (button does not preserve state after refreshing See here).
Thank you so much for any help!
Your server will need a data store (database) to save the values desired for each button.
Client Side
Set disabled attribute on all relevant buttons in your HTML. On (client-side) page load, fetch the value(s) from your server (database) and depending on what the returned value(s) are, .clearAttribute("disabled") on all buttons accordingly.
Server Side
Have your server set the disabled attribute on the HTML <button> elements based on values in your database prior to serving the HTML to your client(s).

Get Client Value Back from ASP.Net Custom Control

I'm having issues getting a control to pass its value back to my server from the browser. Essentially, what I need is a LiteralControl that can be pushed onto the page, modified by some JavaScript, and then pass its entire contents back.
What I'm doing: I'm working with an SVG image. I need to send whatever pre-initialized value (display elements/content) to the browser. Then the user can interact with the image via JavaScript. Whenever they submit the form, I need to get the new/modified image back.
I made a custom control that outputs the SVG element, and allows you to set custom width, height, and viewbox attributes. It has a style element that you can provide content for, and a script element that you can also provide some content for. I've set up a ScriptDescriptor for all the properties that should be modified on the browser. I built an SvgImage.prototype and an SvgImage.descriptors JavaScript class, and registered my namespace and class in JavaScript. My JavaScript is all making it to the browser, but the control isn't added to the Request.Form elements coming back in.
Is there any way to get the control added to the Request.Form elements without creating a hidden field and dumping the content into it?
As I mention in my comment, I am unaware of any native ASP.NET control that would allow you to do this.
All form information posted back to the server has to be (to my knowledge) contained within an <input> control. (As I'm sure you're aware, ASP.NET can only work with standard form processing as supplied by your average browser.)
So I think you're looking at transfering the SVG information into a hidden control (an invisible <textarea> / <asp:TextBox TextMode="Multiline"/> makes most sense) before the post-back takes place.
Another option could be to use AJAX, although if you only want the the information at the point of post-back, you could run into trouble with the timing of it... so I can't see it being much use (but just mentioning it as an option).

Architectural decisions about popups in web (.NET Vision)

I've always wanted to know what is, in a general way, the opinions about popups in web (I mean, those who are implemented via divs).
I've always liked not to load the user with the entire size of this popup in his navegation (when the popup is not visible). I assume that it's better load the content by demand (when the user clicks in the corresponding button). If you have five popups in one page, I always thought that the increase in 'bytes' can make a difference downloading the page.
Following the 'on demand' option I've always liked iframes because they let me change his URL via Javascript. So, I display a popup (div) which contains an iframe in wich I can change his contents downloading the page in this moment.
In my probably limited view, this method has another advantage. The validation logic (usually Asp.NET validators) are isolated in the popup page, so they don't enter in any kind of conflict with the validators located in the parent page (if applicable).
But it seems that iframes are not so well supported by some browsers and they are not too much appreciated by the community of designers (and it's a object with strong security implications).
So Basically I was wondering what are your experiences displaying these kind of UI. I know Jquery can load dynamically HTML in one div, but probably without isolating client validation scripting.
Opinions? THANKS a lot!
Firstly, you can create validation groups (http://msdn.microsoft.com/en-us/library/ms227424.aspx). That will help you with your validation problems.
You're right, you can use jQuery to dynamically load HTML as appropriate, but I'm not sure how well that works with aspx pages. There are problem a number of gotchas. Consider, you have page1.aspx and popup.aspx. If you load popup.aspx in an iFrame, you're fine, because it's a separate page. If you load it dynamically via JQuery.load() - the output of popup.aspx will load into your page1.aspx (this includes html tags, form tags, viewstate fields etc). That will likely cause some problems. (I haven't tried just guessing).
I have used .load in the past, but I tend to load standard html pages, not aspx pages. Then when the "submit" button is pressed, it calls a webservice with the relevent fields. This adds more javascript coding on my part - coding the "submit" button, coding a webservice to handle the ajax submit, coding the "wait screen" while an action is being done or data being submitted via ajax. I also have write the js to do client side validation and any code to handle server side validation and report that back to the user.
jQuery Validation plugins work well for this - or alternatively, you can instantiate .net validators if you don't want more plugins / frameworks (http://msdn.microsoft.com/en-us/library/yb52a4x0.aspx)

Tab Navigation - Frames or AJAX?

I have what I imagine to be a pretty standard web-interface.
There are 4 different ListViews (grid controls) which are accessed by a series of Tabs on the top.
I have implemented this as follows:
alt text http://img402.imageshack.us/img402/1530/pagedu8.jpg
Tab 1 will load Page 1 containing Grid 1 into Frame 2, Tab 2 will load Page 2 containing Grid 2 into Frame 2 etc.
However this then means that if you click on an item in the Grid, and I load DetailsPage1.aspx into Frame 2, then Frame 1 and the tabs are still visible and active.
I've been advised that I should just have one Frame, and load the Pages in dynamically based on the tab click, using HttpRequest (or WebRequest in asp.net).
Is this the correct approach to take? If you have any resources or tips at hand, it would be appreciated!
Thanks
Frames are an absolute no-no. There is no benefit to frames that can't be achieved using other techniques.
Does that mean you must use AJAX? Not necessarily. AJAX is a perfectly good solution if you feel the need to provide a rich, seamless interface, but it's not strictly necessary.
You could use server-side includes to separate your tabs into a another (common) sub-page, but since you mention ASP.NET, (assuming you are running on framework v2 or greater) you might want to use Master Pages, where your tabs are in one content section or in the Master itself, and your grids/details are in another content section.
The key difference between the two techniques is that using AJAX, the transition from tab to tab will be slick and seamless, but a) it takes a little extra work (particularly if you are unfamiliar with any give AJAX framework) and b) since you essentially have 4 pages rolled into one, the pages are 'heavier' and are more complex to maintain. If you opt for the non-AJAX route, the key difference is that there will be a small but distinct refresh effect when you click on each tab (since it loads a new page each time).
Of course, Master Pages are useful for maintaining a consistent site style and structure anyway, so there is no reason why you can't use AJAX with a Master Page system.
Frames are lame: you will get problems, if users want to set a bookmark and if users visit your site via google: Then your navigational frame is not visible. So you need a lot of dirty javascript. to check this. If you need javascript, do it right from the start and use AJAX
Ajax is the best pick. But keep in mind to make it browse-able via back/forward. The best pick is to change page hash. I used something like this:
domain.com/#tab1 for first tab
domain.com/#tab2 for second tab
and so on.
If you use jQuery, this can be a good start (i use that and i had NO problem with). I'm sure there is a solution for all popular framework though :)
Instead of using frames, you should just include your navigation page in all of your other pages. The browser will see that you're including the same document in all of your pages and cache it.
Have you tried the TabContainer or loading all 4 detail panes and just showing/hiding panels on tab selection change?
Depending on what screens your users will see, if you load the detail views dynamically (Ajax or postback) you may have trouble persisting any information that the user has entered, and you will incur a wait (users dont like to wait)
I would recommend using jQuery and jQuery UI plugin. No frames will be needed, just div containers.
Like StingyJack, I would suggest having a look at the TabContainer control, but you might want to take care that your ViewState doesn't get too large if you do.
So for example, don't load anything into a GridView until that Tab is being viewed and remove it contents if it is not (saving back to the database of course if required. Using the TabContainer's ActiveTabChanged event would be key to this strategy.You diable ViewState for the grids but leave it on for the container.
You're using ASP.NET, so just load all 4 controls into a mutliview and then on postback set the visible one to be which ever button has been clicked.
http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.multiview.aspx
DO NOT uses frames (or iframes for that matter) unless you absolutely must...
The only valid reasons I can think of to use (i)frames is file upload controls in fact, and I am not sure it's valid there either...

What is the best way to use links and anchors to toggle visibility in ASP.NET?

I have a page which is used to display numerous forms for the user to fill out and get reports generated. Each of these forms is inside it's own ASP:Panel control so that I can toggle the visibility of the form (so that only those with appropriate permissions get access to the reports they are allowed to).
The client has now requested a "table of contents" like area on the page with hyperlinks pointing to each of the forms (so that they don't have to spend time scrolling the page to find the particular report form they want). This is easy to accomplish using standard <a href="#Area"> and <a id="Area"> tags. What I am now looking for is a way that would allow me to hide the links of reports that the user does not have access to.
I was first thinking of using the ASP:LinkButton control, but I do not want any postbacks to occur from clicking the links (that would be very unnecessary). Are there any other methods I could use to accomplish the same goal? I am looking for something which would make it easy for me to toggle the visibility of the corresponding link at the same time I am toggling the visibility of the panels containing the report forms (done now from the code-behind).
Note: Using VB as the language
If you use link controls you can just show or hide the link bases on the visibility of its related panel.
Link1.Visible = Panel1.Visible
I was first thinking of using the ASP:LinkButton control, but I do not want any postbacks to occur from clicking the links (that would be very unnecessary)
I disagree. You're talking about redrawing most of the page each time a link is clicked, making a full postback appropriate from a technical standpoint. Additionally, users are conditioned to expect a round-trip to the server when they click on links. That's what a hyperlink normally does. So it's also appropriate from a user-experience standpoint.

Resources