I'm currently working on a web-based game using ASP.NET and C#. Previously, I've been just organizing the various game screens(start, hi-score, results, etc) into individual Panels nested within a main UpdatePanel and showing/hiding the appropriate Panels as the game progresses. However, I've severely underestimated the scale of the game and I'm gonna have to break it down to more manageable chunks.
My idea now is to have a Main.aspx with an empty UpdatePanel and I'll load the various screens as individual .aspx files into it. Kinda like with WinForms I think, when you create another new WinForm and add it to the current parent form.
I've been trying to find how to get about doing this in the code-behind, but I'm still at a lost. I could probably do this with Response.Redirect, but then there would be the usual flicker when the new page loads, which is something I want to avoid.
I did come across something interesting called a UFrame but that seems to work in the HTML instead of the code-behind.
I appreciate any help or suggestions in this matter, and apologize if this has been asked before. Thank you.
Edit: With regards to womp's answer, .ascx seem to be a step in the right direction for me. I successfully got my Startscreen control control up and running inside the Main.aspx. However, another problem has popped up, where the screen just goes blank when I try to add another usercontrol to a panel inside Main.aspx upon a button click.
The event handler I have for a button in the Startscreen control is:
protected void Btn_Arcade_Click(object sender, EventArgs e)
{
this.Parent.Controls.Add(LoadControl("Arcade.ascx"));
}
I'm not too sure if there's anything wrong with that, but the Parent in this case is basically what I called the GameContentPanel that resides within Main.aspx's UpdatePanel.
I don't think it's a problem with the HTML fudging up either, since I tested it by loading it first instead of the Startscreen, and everything showed up fine.
I've also tried loading both controls together at the start in Main.aspx, and both controls load correctly as well.
Can the "screens" be .ascx usercontrols? You can load a usercontrol into a panel using LoadControl("~/path/to/myControl.ascx"), and then those controls can take part in the lifecycle of the main page.
If they really have to be in separate .aspx pages, then you might need to look at using an iframe, or else maybe rethinking your approach. Webforms apps were designed to have lots of things happening inside the context of one page/form, and not transferring control back and forth to multiple pages.
Related
My goal
I am working on a project in C# using Visual Studio 2013. The project is one that I intend to contain a lot of pages. These pages are all linked together using buttons. My problem is that I cannot come up with an efficient and elegant solution for this.
My attempts
So far I have came up with two potenial solutions to my problem. First I added extra forms and then on button press I hid the current form and displayed the new form, like so:
Form2 frm = new Form2();
frm.Show();`
Form1.Hide();
While this does work, I have two problems with it.
My project will end up with hundreds of forms
The transition between forms looks sloppy. I am aiming for a browser like transition by where all navigation occurs on one window, without opening and closing others.
The second potential solution I tried incorporated the use of Panels. So I essentially created each page on a different Panel. Then the appropriate panel was shown upon a button press and the rest were hidden. Like this:
private void button1_Click(object sender, EventArgs e)
{
mainMenuPanel.Hide();
submenuPanel1.Show();
submenuPanel2.Hide();
submenuPanel3.Hide();
submenuPanel4.Hide();
}
This is exactly what I was looking for however my issue with it is that managing the vast amount of panels quickly became a nightmare. Editing the controls on a Panel that was hidden behind 9 other Panels and as the number of panels in my project was only going to grow - this does not seem like the ideal solution in its current form.
In my head I thought there maybe an option in Visual Studio 2013 that allows me to 'hide' the Panels I am not using on the form, or drag them off the form temporarily. Is that an option in Visual Studio.
If not do any of you know a more efficient and manageable way of achieving this?
Thanks in advance.
If you are stuck using WinForms, your best bet is probably using UserControls. you can actually extend the UserControl class out to be a "page" ie: UserControlPage. This makes the form much simpler in function, but you will need to do some finicky work with handling events /passing data if the controls need to talk to each other.
if you aren't nailed into using Winforms, WPF supports all of this natively, and has wonderful tools for building all the pages you would need, and storing/populating your data, and propagating events.
If you want to have single form with changing content, and you don't want to mess up with panels in one form, then solution is user controls. You will be able to create them dynamically and add to form controls. Also there is no mess, because your form will be very simple - you can have single 'placeholder' control which will be used to dock user control which is currently displayed (e.g. panel control):
private void ShowContent(Control content)
{
placeHolderPanel.Controls.Clear(); // clear current content
placeHolderPanel.Controls.Add(content); // add new
content.Dock = DockStyle.Fill; // fill placeholder area
}
Usage:
private void button1_Click(object sender, EventArgs e)
{
ShowContent(new FooUserControl());
}
You could subclass the Panel class and create as many of those custom panels as needed, then they would be inserted on your Main Form, and managed as you described.
The advantage is that you would be able to individually edit them as a separate user control.
The drawback is that you lose direct event handling of controls on those panels from the main form. You can still define your own events on those panels and delegate the individual control events.
There's always a trade-off somewhere.
Cheers
My project is essentially a web page with a menu and an updatepanel. The user selects a choice from the menu, and a usercontrol is loaded into the updatepanel. I would prefer not to use an update panel, but, there are multiple databound controls that contain information that will then change the contents of another databound control. Anyways, my project calls for a message box to appear on the screen, which I have no issue in getting to work:
string s= "<script>alert('HayGuise');</script>";
ScriptManager.RegisterClientScriptBlock(c.Page, c.Page.GetType(), GUID.NewGUID().ToString(),s,false);
Now, I've tried a number of different tactics, including replacing GUID with a static string; I've used RegisterStartupScript, etc. My issue is that the message box does not show on the first click of the call button AFTER the updatepanel has updated to show a new usercontrol. But, if I click the button again, everything is great. If this is done on the very first form loaded into the updatepanel (opening up the site and selecting from the menu), everything works fine; it is only when the updatepanel updates again with a new form, that this will occur, and again, only on the first click.
Additionally, the code is being fired, and all code that follows the ScriptManager code fires, but the message box will not show until the button is clicked again. As I am testing this behavior at the moment, I've added the popup code to each of the buttons on the form, and the behavior is the same with each of them. It sucks that its taken so long to implement a reliable piece of code (for the messagebox) only to have this slight issue, and this is after I just figured out why my button events were firing twice on a single click. I pretty sure that it's going to be something simple, some sort of property that I'm not familiar with that needs to be set correctly. Damn, I'd love to just be able to settle all these little issues so I can proceed with the rest of the project. Sooooo close. Thank you for any help.
Edit: Additionally, the buttons are located in another usercontrol that is added to the usercontrol form that is shown in the updatepanel.
Edit II:
Thanks for your input, I apologize for getting back to this so late, I moved on to other parts of the project and just came back to this. The issue is not the startupscript method, nor the clientscriptblck method; the issue resides in the loss of value/viewstate/clientid's on postback.
At the time I posted this question, this project was a single page application. I tested functionality by creating a multipage application, and just kept going from there, vowing to come back to this issue. Well, I'm back and the issue does not reside in the update panel, it has something to do with my code, as I clear out the update panel (tried with a regular panel as well) and then reload the new usercontrol. When cleared, something goes haywire, and nothing fires on the first postback. Its a weird issue, that I have yet to find much (a couple articles) information on that is specific to just the first postback causing this issue. I'll update with an answer if I ever find one; the only fix I've found is to add a line to the menu select code, Server.Transfer(thecurrentpage), essentially refreshing the page. This solves all of the issues, but it seems a bit in poor taste. Thanks again for your input.
If you are working with AJAX UpdatePanel, following code should work for you. In my case, I was using update panel and none of the about worked except this one.
ScriptManager.RegisterStartupScript(myUpdatePanelID, myUpdatePanelID.GetType(), "myFunction", "myFunction();", true);
If you are using update panel in your page then the following code should work for you. You should use the RegisterStartupScript in the whole page using "this".ScriptManager.RegisterStartupScript(this, this.GetType(), "myFunction", "myFunction();", true);
good sirs!
I've been messing around with the next scenario:
First, I have a webform structured as a WebForm containing a DevExpress ASPXPopUpControl and some other controls. Inside the PopUpControl there is a UserControl (lets call it ucA) containing some other controls and a UserControl (called ucB) that contains a cursed ASPxHtmlEditor (added because it's a new requirement).
When the user hits a button on main webform I show the PopUp (originally was a jQuery dialog but since HTMLEditor messes up with jQuery I've been forced to break the standard and use the popup) which contains the ucA. The user fills some fields in ucA and hit the save button. After user hits, I save some dataz and at this point I need to recover a textbox value placed in the webform.
I'm using Parent.FindControl["myTextBox"] but it considers the popupcontrol as parent. When I was using jQuery (before implementing the editor) it worked like a charm.
I feel it's something trivial but thrust me when I say that this stole many hours of research.
Thanks in advance.
EDIT I forgot to mention that I want to look for another UserControl at main webform. This uc its used to display core messages to the user so when he hits the save button, save happens, popup is closed and i look (Parent.FindControl("myUCMessageBoard")) from the ucA for the usercontrol to display a "Transaction complete" message.
I'm thinking you're going to have to do something a little hacky, by using ViewState. If I understand correctly, you are trying to get access to a TextBox's Text on the Web Form, from a UserControl nested within a PopupControl (so you can't traverse all the way up to Web Form Level).
So, what I'd do at some point in the process is store the text in a ViewState variable that you can access from the User Control. It's not optimal, but since you're already hacking to get it to work, what's a little more hacking?
You should expose all controls from ucA as properties, then look for the control inside the DevxPopup the same way you doing. Given that all the controls that you need at the ucA has properties to access them, you could do all the logic you need!
Example:
public ucA : UserControl
{
public string myTextBoxText
{
get
{
return ((TextBox)Controls.FindControl("myTextBox")).Text;
}
}
/*And lot of controls*/
}
Then you looking for the popup at the Form
var ucA = (UcA)Form.Controls.FindControl("myPopup").Controls.FindControl("myucA");
ucA.myTextBoxText = /*Do stuff here with the text*/
Hopes this help you!
I want to fill an updatepanel with new dynamic controls in response to a button click.
However, I also want to be able to access the values of these dynamic controls in response to an event in one of the controls.
Specifically, I want the button to bring up two dropdownmenus. One of the menus (or both if need be) is in another update panel. I want the first menu in the update panel to change its data in response to a value getting selected in the other menu.
I think my problem is that when I cause a postback with one dropdownmenu I lose the other dropdownmenu because I created it in the button_click handler.
I know I should create dynamic controls in the Page_Init method (or so ive heard) but I only want the controls to show up if the button is clicked. There are other buttons on the page which need to create a different set of dynamic controls.
Thanks.
There are a lot of ways you can handle this, and which approach to take really depends on your project's requirements and your available resources.
The smoothest way to do it that would generally provide the best user experience would be to use a Javascript technique to hide and show controls as the page required them. JQuery is the library I would recommend for this. On the most basic level, you simply wire the control's activation (such as a button_click event) and hide or show a div containing the dynamic content as necessary, like so:
$("#control").show();
// and
$("#control").hide();
Alternatively, you can do this in C# by using the Visible property on many of the normal web controls for ASP.NET. The usual code-behind approach would look something like this:
private void btnControl_Click(object sender, EventArgs e)
{
var dynamicControl1 = FindControl("dynamicControl1");
dynamicControl.Visible = false; // or true, as the case may be
}
This particular approach is mostly attached to code-behinds, though, which I would encourage you to avoid if possible. They are practically impossible to test and will make projects a pain to work in. You can use a similar approach in the MVC3 framework, of course, it will just be a little different how you send and receive the control you are setting to not be visible. The other benefit this has that is kind of nice is that if something is set to not be visible, it tends not to even be displayed in the HTML generated by the templating engine (YMMV depending on the engine, but I know this is true in Razor). So someone viewing the source of your webpage won't be able to see inactive controls, which may or may not be something that appeals to you.
EDIT: I see the problem is less to do with how to display these things, and more with how to create and read them back given on-the-fly input.
I'm sure there's a way to do this with Javascript (which would more than probably be the cleanest and best way to do this), but I'm not good enough with JS to know the answer to that one. The way you would handle this in ASP.NET is make the div you're going to add controls to server-side (by using runat='server', then add what you need there. Again, the trivial code-behind approach would be something like:
private void btnControl_Click(object sender, EventArgs e)
{
foreach(var checkBoxChecked in chkBoxes.Where(x => x.Checked))
{
div.Controls.Add(new WebControl()) // or whatever the heck else it is you need.
}
}
This presumes that you have an IEnumerable<CheckBox> to iterate over, of course. You may also want an IList<WebControl> to keep track of all the junk you're adding. You will also need to make sure the CSS is applied properly to the div for the controls you're adding. And again, code-behinds are pretty awful and I use the example only because it'd be easy to spin up in a project to test for yourself.
I have a page with multiple update panels, each containing dynamically created User Controls that contain a button control.
When The button in a control is clicked the control no longer exists in the page load event and so the click event of the button within the control cannot be raised.
To get round this I am currently recreating ALL the controls on the page in each page load event, but this is obviously causing a lot of unneccesary page updating. In any given partial postback, the only control(s) that need to be recreated are the ones in the update panel containing the control that has been clicked.
How then can I best identify which control has been clicked in page_load and then only recreate the controls in the relevant update panel to be able top then access the click event of that control?
I know I can do the following
if (ScriptManager1.IsInAsyncPostBack)
{
string clickedControlId = ScriptManager1.AsyncPostBackSourceElementID
}
But this isnt hugely useful as knowing the ID of the control doesnt neccesarily help me identify which Update Panel it belonged to. Is there a way of adding a command argument to the control when it is created at run time and reading that command argument in the page load event during the partial postback?
If not, any other suggestions?
Many thanks
Stewart
1) Stop using update panels they add an unnecessary level of complexity that creates more problems than is worth, especially when you have more than one in a page.
2) Stay away from mixing Ajax functionality with server-side logic. You will end up writing a lot of code to compensate one or the other.
What I suggest:
Don’t use update panels!
Keep the code that generates the initial page load. Instead of posting to the server with a .Net button, use a regular button and use the onClick=”foobar_ajax(id, ….Update UI)” to make an ajax call to update the data on the server. Include the ID of the item(the control) you are clicking on. When your ajax call is done you may not need to do anything or you could update the UI with some new data from the server (I recommend refreshing after saving).
Read: Calling the page method with jQuery instead.
http://encosia.com/using-jquery-to-directly-call-aspnet-ajax-page-methods/