What am I doing wrong in this ASPxPageControl? (dev express) - c#

Here is what I have. I am trying to use Developer Express ASPxPageControl. I want to only load the first TabPage (and WebUserControl it contains) when the page is loaded and then when I click on subsequent tabs, load those WebUserControls. I have found documentation here and other places telling me to
set the ASPxPageControl.AutoPostBack property to false, and ASPxPageControl.EnableCallBacks set to true
However, this is not working for me. I have verified with the debugger that when the main page is loaded, each of my WebUserControls are also loading. Am I misunderstanding the idea of the ASPxPageControl??
<dxtc:ASPxPageControl ID="ASPxPageControl1" runat="server" ActiveTabIndex="0"
EnableCallBacks="True"
AutoPostBack="false" >
<TabPages>
<dxtc:TabPage Text="Detail" Name="tabDetail">
<ContentCollection>
<dxw:ContentControl ID="ContentControl3" runat="server">
<uc13:WUCDetail ID="WUCDetail" runat="server" />
</dxw:ContentControl>
</ContentCollection>
</dxtc:TabPage>
<dxtc:TabPage Text="Room" Name="tabRoom">
<ContentCollection>
<dxw:ContentControl ID="ContentControl4" runat="server">
<uc11:WUCRoom ID="WUCRoom" runat="server" />
</dxw:ContentControl>
</ContentCollection>
</dxtc:TabPage>
<dxtc:TabPage Text="Mailers" Name="tabMailers">
<ContentCollection>
<dxw:ContentControl ID="ContentControl5" runat="server">
<uc10:WUCMailers ID="WUCMailers" runat="server" />
</dxw:ContentControl>
</ContentCollection>
</dxtc:TabPage>
</TabPages>
</dxtc:ASPxPageControl>

However, this is not working for me. I have verified with the debugger
that when the main page is loaded, each of my WebUserControls are also
loading. Am I misunderstanding the idea of the ASPxPageControl??
I'm afraid you are misunderstanding the idea of the example "How to create and load an active tab's content on a callback". The main idea of this example is to create and load an active tab's content on a callback.
But you've specified content for all pages directly in markup. Thus these controls will be created and loaded in any cases. Please, create an empty tabpages and then use the approach demonstrated in this example to create and load page's content only when active tab changed.

Related

Unblock controls if !Page.IsValid

I have ASP.NET WebForms application. One of it's pages is dynamically created table with RegularExpressionValidator. Above of table there are several LinkButtons, which manages navigation of application. But if I put invalid value to textbox in table, Page.IsValid is set to false and all controls on page are blocked.
So, how can I unblock buttons even if validator set Page.IsValid to false? Thnak you.
You could use ValidatorGroups to separate the validations.
Assuming you want to "unblock" the link buttons used for navigation, you can use:
CausesValidation="False"
in the ASPX markup for the link button.
Example:
<asp:LinkButton ID="btnBack" runat="server" data-transition="fade" CausesValidation="false"
data-theme="b" data-icon="" Text="Back" onclick="btnBack_Click" />

Render asp:menuitems as links

I have a asp:menu define like so:
<div id="MenuContainer" runat="server" class="menuContainer">
<asp:Menu ID="DefaultMenu" runat="server" DataSourceID="SiteMapDataSource" SkinID="TopMenu" OnMenuItemDataBound="DefaultMenu_MenuItemDataBound" OnMenuItemClick="DefaultMenu_MenuItemClick" DynamicPopOutImageTextFormatString="" >
<DataBindings>
<asp:MenuItemBinding DataMember="SiteMapNode" NavigateUrlField="Url" TextField="Title" ToolTipField="Description" />
</DataBindings>
</asp:Menu>
<asp:SiteMapDataSource ID="SiteMapDataSource" runat="server" EnableViewState="False" ShowStartingNode="False" SiteMapProvider="WebserviceSiteMapProvider" />
</div>
The menu items are generated from a SiteMapDataSource as seen above. When rendered all the menu links are postbacks which then redirect to the relevant page:
protected void DefaultMenu_MenuItemClick(object sender, MenuEventArgs e)
{
Response.Redirect(e.Item.DataPath);
}
Anyone know any easy way to render the menu items as hyper links rather than postbacks?
I ask as this is adding an unnecessary round-trip to my application which on a specific customer set-up is causing performance issues. I've been searching around on the internet all morning for this and can't really see any obvious.
Note: This is .Net 3.5 that is being used.
If I'm missing something please just say.
Nevermind, one of my colleagues showed me the issue, the sitemapdatasource was not returning a url therefore the links where being rendered as postbacks rather than hyperlinks.
Is it necessary to use:
OnMenuItemClick="DefaultMenu_MenuItemClick"
that will create a postback, you need to build a control without it.
Here is a link to an answer with a simpler usage of menu for a sitemap, it might be worth a look.
https://stackoverflow.com/a/1030609/2366880

Handling the submit action of two TextBoxes

I have an ASP.net page.
That has an Ajax Toolkit Tab Control.
That has tabs.
That have custom ascx controls I wrote.
I have a text box that perform a search action. It is declared like this:
<asp:TextBox ID="txtPrereqSearch" runat="server"
ontextchanged="txtPrereqSearch_TextChanged"></asp:TextBox>
Nothing fancy. This format has been working for months. There's no submit button. It just posts back when I hit enter. The problem appeared when I added a second custom control using the same type of feature. Now browsers don't postback when I type something in either of these textboxes and press enter.
It seems that browsers have a default way of handling one textbox in one form, but that behavior changes when the number reaches two.
Is there an easy way around this? I guess I can create a hidden submit button but it seems like there is probably a better way to deal with this when the functionality is in two separate custom controls.
Your feedback is appreciated!
Check this out: http://www.allasp.net/enterkey.aspx
The default behavior with no submit button seems to depend on the browser, and the behavior can indeed depend on the number of input controls.
I would add hidden "submit" button (e.g. style="display:none;") which should ensure that it always gets submitted.
The answer was a little different than I expected, but philosophically like my original idea that #jamietre reinforced.
I had to surround the controls with an <asp:Panel> tag with a DefaultButton attribute. A-like-a so:
<asp:Panel ID="ButtonPanel" runat="server" DefaultButton="btnSubmit">
<asp:Label ID="Label1" runat="server" Text="Course:"></asp:Label>
<asp:TextBox ID="txtPrereqSearch" runat="server"
ontextchanged="txtPrereqSearch_TextChanged"></asp:TextBox>
<asp:TextBoxWatermarkExtender ID="txtPrereq_TextBoxWatermarkExtender"
runat="server" Enabled="True" TargetControlID="txtPrereqSearch"
WatermarkCssClass="Watermark" WatermarkText="e.g., MATH201"></asp:TextBoxWatermarkExtender>
<asp:Button ID="btnSubmit" CssClass="InvisibleSubmit" runat="server" Text="Submit" OnClick="txtPrereqSearch_TextChanged"/>
</asp:Panel>

Changing a control's style based on validation (ASP.NET)

I've got a very simple form with the following troubled snippet:
<asp:Panel class="normal" ID="Panel1" runat="server">
<strong><asp:Label ID="Panel1Error" class="error" Visible="false" runat="server"/></strong>
<label for="TextBox1"><em>*</em> Don't leave this blank</label>
<asp:TextBox ID="TextBox1" runat="server" />
<asp:RequiredFieldValidator ID="TextBox1RFV" runat="server"
ControlToValidate="TextBox1" ErrorMessage="This field cannot be blank."
Display="None" />
<--- other validators --->
</asp:Panel>
There are two things I want to do when the page fails validation:
Change the style of Panel1 (to one which shows different colors to indicate an error). I was able to do this by calling Page.Validate in Page_Load, then iterating over Page.Validators, getting each validator's parent control, casting it to a Panel, then setting .CssClass Doesn't seem like a superb solution, but it got the job done - is there a better way?
I want to take whatever validation error(s) are thrown and put them in the Panel1Error label, as well as set it to visible. This is where I am a bit baffled. I thought at first I could possibly specify the Label in which a validator writes its ErrorMessage, but I had no such luck. If I just toss the validator inside the Label, its formatting messes up the entire layout of the page, regardless of whether I directly assign it the 'error' CSS class or just leave it in the Label.
Just to clarify, in production, I would be doing this process for multiple Panels on a page, each with one form element, preventing me from calling the Panels explicitly and just saying Panel1.CssClass, etc.
I would recommend a javascript solution. ASP.NET injects a global js variable called Page_Validators, which is an array of all of the validator spans on the page. I wrote about this on my blog. It's a different solution, but it should give you enough insight to get started.
Use ValidationSummary controls with a ValidationGroup for each panel.
Seems fine if it worked.
Use a ValidationSummary control. Or you can inherit from the controls and override the render event.

How to edit CSS style of a div using C# in .NET

I'm trying to grab a div's ID in the code behind (C#) and set some css on it. Can I grab it from the DOM or do I have to use some kind of control?
<div id="formSpinner">
<img src="images/spinner.gif" />
<p>Saving...</p>
</div>
Add the runat="server" attribute to it so you have:
<div id="formSpinner" runat="server">
<img src="images/spinner.gif">
<p>Saving...</p>
</div>
That way you can access the class attribute by using:
formSpinner.Attributes["class"] = "classOfYourChoice";
It's also worth mentioning that the asp:Panel control is virtually synonymous (at least as far as rendered markup is concerned) with div, so you could also do:
<asp:Panel id="formSpinner" runat="server">
<img src="images/spinner.gif">
<p>Saving...</p>
</asp:Panel>
Which then enables you to write:
formSpinner.CssClass = "classOfYourChoice";
This gives you more defined access to the property and there are others that may, or may not, be of use to you.
Make sure that your div is set to runat="server", then simply reference it in the code-behind and set the "class" attribute.
<div runat="server" id="formSpinner">
...content...
</div>
Code-behind
formSpinner.Attributes["class"] = "class-name";
This question makes me nervous. It indicates that maybe you don't understand how using server-side code will impact you're page's DOM state.
Whenever you run server-side code the entire page is rebuilt from scratch. This has several implications:
A form is submitted from the client to the web server. This is about the slowest action that a web browser can take, especially in ASP.Net where the form might be padded with extra fields (ie: ViewState). Doing it too often for trivial activities will make your app appear to be sluggish, even if everything else is nice and snappy.
It adds load to your server, in terms of bandwidth (up and down stream) and CPU/memory. Everything involved in rebuilding your page will have to happen again. If there are dynamic controls on the page, don't forget to create them.
Anything you've done to the DOM since the last request is lost, unless you remember to do it again for this request. Your page's DOM is reset.
If you can get away with it, you might want to push this down to javascript and avoid the postback. Perhaps use an XmlHttpRequest() call to trigger any server-side action you need.
Add the runat="server" attribute to the tag, then you can reference it from the codebehind.
Add runat to the element in the markup
<div id="formSpinner" runat="server">
<img src="images/spinner.gif">
<p>Saving...</p>
</div
Then you can get to the control's class attributes by using
formSpinner.Attributes("class")
It will only be a string, but you should be able to edit it.
How do you do this without runat="server"? For example, if you have a
<body runat="server" id="body1">
...and try to update it from within an Updatepanel it will never get updated.
However, if you keep it as an ordinary non-server HTML control you can. Here's the Jquery to update it:
$("#body1").addClass('modalBackground');
How do you do this in codebehind though?
If you do not want to make your control runat server in case you need the ID or simply don't want to add it to the viewstate,
<div id="formSpinner" class="<%= _css %>">
</div>
in the back-end:
protected string _css = "modalBackground";
If all you want to do is conditionally show or hide a <div>, then you could declare it as an <asp:panel > (renders to html as a div tag) and set it's .Visible property.
To expand on Peri's post & why we may not want to use viewstate the following code:
style="<%= _myCSS %>"
Protected _myCSS As String = "display: none"
Is the approach to look at if you're using AJAX, it allows for manipulating the display via asp.net back end code rather than jquery/jscript.

Categories