Master Page
<div id="header" style="height: 150px; width: 750px;">
<asp:Label ID="Label3" runat="server" Text="LoggedInUser:"></asp:Label>
<asp:Label ID="lblLoggedInUser" runat="server" Text=""></asp:Label>
</div>
<div id="leftMenu" class="leftmenu">
<br />
<asp:DropDownList ID="ddlFamilyMembers" runat="server"
style="height: 25px; width: 125px" DataTextField="FullName"
DataValueField="MembershipGen"
onselectedindexchanged="ddlFamilyMembers_SelectedIndexChanged"
AutoPostBack="True" >
</asp:DropDownList>
<br /><br />
<asp:Image ID="imageMember" class="space" runat="server" Height="150px" Width="125px" />
<br /><br /><br />
<asp:Label ID="Label1" runat="server" class="space" Text="MembershipID:"></asp:Label>
<asp:Label ID="lblMembershipID" runat="server" Text=""></asp:Label>
<br />
<asp:Label ID="Label2" runat="server" class="space" Text="Name:"></asp:Label>
<asp:Label ID="lblMemberName" runat="server" Text=""></asp:Label>
<br /><br /><br />
<asp:LinkButton ID="lbInformation" class="space" runat="server" onclick="lbInformation_Click">Member Information</asp:LinkButton><br />
<asp:LinkButton ID="lbAddress" class="space" runat="server"
onclick="lbAddress_Click">Member Address</asp:LinkButton>
</div>
<div id="divRight" class="divright">
<asp:ContentPlaceHolder ID="CPHMain" runat="server">
</asp:ContentPlaceHolder>
</div>
I posted my masterpage code so you can better understand my issue. Since these controls are in my master page I needed to create public properties for all the controls in my masterpage to databind my content pages. Maybe I am approaching this wrong but this is how I was planning on achieving this.
ContentPage
Default.aspx page_load event would call my method to retrieve the data and set the dropdownlist, image, 2 label fields. On selected index change of dropdownlist it would grab the new values from another method and populate those controls accordingly.
To access these controls in my master page i read you can do it a couple of different ways one is to <%#MasterType VirtualPath="~/Member.Master" %> and then create a strongly typed connection. Or you could create a loosely type connection.
My problem with these ways as I am going to have over 15 content pages and I would hate to have to rebind the DropDownList every time one of the content pages is called. Also I would have to reinstantiate the controls in every method of my content pages which I assume I am doing this wrong.
Can someone give me some advice on what is the proper way to achieve this without so much repetitive code?
You've got the right idea, trying to decouple the parent from the child, but I think the way you want to do it may be clunky.
Assuming you can do this, what I'd do is as follows:
Make a public method BindFamilyMembers(string parameter) on the Master page's code-behind.
From the child page, pass necessary unique parameters to this BindFamilyMembers Master method.
This way you don't need to expose the controls themselves, you expose a method that modifies those controls based on parameters.
edit
You want to notify the child page that the DDL SelectedIndex has changed. This is a great case for custom events.
You can configure an event on the Master page that the child page listens for. When DDL.SelectedIndex changes, you can fire the custom event (and pass the selected information) via the custom event, and any child page that is listening can handle that event.
There are a lot of examples of custom events online. Here's one you can start with: http://www.marten-online.com/csharp/simple-custom-event-handling.html
Related
I have ASP.Net controls for search attributes with check box options and ASP.NET repeater. For Responsive Design, I have same bindings in two different places to match the design.
Here, CheckBoxList ID=Options1 & ID=Options2 both having same binding but the code will repeat. I have 400 lines to check the conditions for single binding. i have to duplicate all the codes again for the another view. Is there any way to optimize the code to single bind with both views handling. ( Avoid duplicate binding and checking)?
// Desktop View
<div class="hidden-sm hidden-xs narrowSearch">
//Content
<asp:Repeater ID="rptAttributes1" runat="server" EnableViewState="true" OnItemDataBound="rptAttributes_ItemDataBound">
<ItemTemplate>
<li>
<div class="form">
<asp:CheckBoxList ID="Options1" runat="server" AutoPostBack="false" Visible="false"
DataTextField="EnOptionName" DataValueField="SubCategoryAttributeOptionID" Font-Strikeout="False" />
</div>
</li>
</ItemTemplate>
</asp:Repeater>
</div>
// Mobile view
<div class="sec_left hidden-lg hidden-md">
<div class="moremenu narrowSearch">
//Content
<asp:Repeater ID="rptAttribute2" runat="server" EnableViewState="true" OnItemDataBound="rptAttributes_ItemDataBound">
<ItemTemplate>
<li>
<div class="form">
<asp:CheckBoxList ID="Options2" runat="server" AutoPostBack="false" Visible="false"
DataTextField="EnOptionName" DataValueField="SubCategoryAttributeOptionID" Font-Strikeout="False" />
</div>
</li>
</ItemTemplate>
</asp:Repeater>
</div>
</div>
Code Behind:
CheckBoxList chklOptions1 = item.FindControl("Options1") as CheckBoxList;
CheckBoxList chklOptions2 = item.FindControl("Options2") as CheckBoxList;
You can place your repeater (including the declarative code as well as what you have in the code-behind of your page) into a custom user control. Then you put the user control in each section (desktop and mobile) of your page. This is the simplest way to avoid repeated code. Having said this, since you've only provided part of the code that's in the code-behind class of your page, I can't speak to what changes might be required when you move the imperative code you have in your page's code-behind class to the user control.
Good luck!
I have two drop down lists where one is inside an update panel and the other is outside.When the Index is changed on ddlFaculty the whole page is posted back instead of a partial for the contents in the update panel.
I have read in the ASP docs that sometime validation controls bog down update panels but im not too sure if that's the problem here.
<div class="form-group">
<asp:Label runat="server" AssociatedControlID="ddlFaculty" CssClass="col-md-2 control-label">Faculty</asp:Label>
<div class="col-md-10">
<asp:DropDownList ID="ddlFaculty" EnableViewState="true" class="form-control" CausesValidation="false" runat="server" autopostback="true" aria-expanded="true" ValidationGroup="g4" OnSelectedIndexChanged="ddlFaculty_SelectedIndexChanged">
<asp:ListItem Value="null">Select Faculty</asp:ListItem>
<asp:ListItem Value="Arts">Faculty of Arts</asp:ListItem>
<asp:ListItem Value="Business">Faculty of Business</asp:ListItem>
<asp:ListItem Value="Health">Faculty of Health</asp:ListItem>
<asp:ListItem Value="Industries">Faculty of Service Industries</asp:ListItem>
<asp:ListItem Value="Trades">Faculty of Trades</asp:ListItem>
<asp:ListItem Value="Maori">Te Wananga Maori</asp:ListItem>
</asp:DropDownList>
<asp:RequiredFieldValidator runat="server" ControlToValidate="ddlFaculty" ValidationGroup="g4"
CssClass="text-danger" Display="Dynamic" ErrorMessage="The faculty field is required." />
</div>
</div>
<div class="form-group">
<asp:Label runat="server" AssociatedControlID="ddlCourse" CssClass="col-md-2 control-label">Course</asp:Label>
<div class="col-md-10">
<asp:UpdatePanel runat="server" id="UpdatePanel1" UpdateMode="Conditional">
<ContentTemplate>
<asp:Label runat="server" id="lblfaculty"></asp:Label>
<asp:DropDownList runat="server" CssClass="form-control" ID="ddlCourse" ValidationGroup="g7" />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="ddlFaculty" EventName="SelectedIndexChanged"/>
</Triggers>
</asp:UpdatePanel>
<asp:RequiredFieldValidator runat="server" ControlToValidate="ddlCourse" ValidationGroup="g7"
CssClass="text-danger" Display="Dynamic" ErrorMessage="The course field is required." />
</div>
</div>
Try using the AsyncPostBackTrigger property of the UpdatePanel.
See: How to stop UpdatePanel from causing whole page postback?
Did you try setting Button1 as an AsyncPostBackTrigger in the Triggers section, set the ChildrenAsTriggers property to true and the UpdateMode property to Conditional
Other solutions:
User control inside update panel causing full page postback
Full postback happens if your UpdatePanel cannot render its contents to a (e.g., when it is situated inside of ). So check you html inside of UpdatePanel, you might find the answer there (also, look for some incorrect xhtml, like incorrectly closed elements).
UpdatePanel causes full page postback
Unless you know of known issues that your site has when running in XHTML mode (and which you don't have time yet to fix), I'd always recommend removing the section from your web.config file (or you can explicitly set it to "Transitional" or "Strict").
This will make your HTML output standards compliant. Among other things, this will cause the HTML from your server controls to be "well formed" - meaning open and close tag elements always match. This is particularly important when you are using AJAX techniques to dynamically replace the contents of certain HTML elements on your page (otherwise the client-side JavaScript sometimes gets confused about container elements and can lead to errors). It will also ensure that ASP.NET AJAX works fine with your site.
It turns out that the page was infact sending a partial postback but I had mistaken the scroll to the top of the page when the postback had been recieved as a full page post back
I'm having surprisingly bad luck finding a decent resource for this. But What I'm doing is creating a list of tickets using a ListView. One of the controls in the item template is a link button that shows the header of the ticket. When the user clicks the link button, I want to open a modal window that shows the ticket in readable format. To get the ticket, I'll be passing that page a variable and it'll do the rest; nothing complicated. The page will have 3 buttons and the windows needs to close when you click one of them.
Now, I figured out how to use the ModalPopupExtender from the Ajax tookit more or less. You create the panel in it's own div which stays hidden. I created a click event that basically uses a webclient to download the html from the page and insert it into that div's innerHtml. This seems to work the first time. But as soon as you click a different link, the page pukes and says something about it being in an illegal state.
I'm not sure if I'm going about this wrong, and I can't find any decent examples of how to do this. Well there's one, but the english is hard to understand and it's in VB instead of C#. Any help?
<%# Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<form id="form1" runat="server">
<div>
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</asp:ToolkitScriptManager>
<br />
<asp:ModalPopupExtender
DropShadow="true"
OkControlID="btnOk"
CancelControlID="btnClose"
runat="server"
PopupControlID="Panel1"
id="ModalPopupExtender1"
TargetControlID="Button1" />
<asp:Panel ID="Panel1" runat="server" CssClass="modalPopup" style="display:none;">
This is basic modal popup.
<br /><br />
<asp:Button ID="btnOk" runat="server" Text="Ok" />
<asp:Button ID="btnClose" runat="server" Text="Close Me" />
<iframe src="http://www.google.com"></iframe>
</asp:Panel>
<asp:Button ID="Button1" runat="server" Text="First Modal Popup" />
</div>
</form>
Try this it should work.
I have several ImageButtons on the top of my page, then I have a textbox and button in the middle. If you type in the textbox then hit enter on the keyboard the browser follows the link of the first ImageButton instead of the submit button next to the textbox. I have ran into this in the pase and had to put the imagebuttons on the bottom of the page for it to work correctly, that is not an ok fix in this case. I tried setting UseSubmitBehavior="true" , but that does nothing. I tried putting the textbox and button in a separate DIV and a separate panel, didn't work either
TOP of the page
<div style="position:absolute; left: 70% ; top: 5%;">
<asp:ImageButton ID="imgFB" runat="server" ImageUrl="Images/facebook_icon.jpg" PostBackUrl="http://www.facebook.com/832586561" />
<asp:ImageButton ID="imgLI" runat="server" ImageUrl="Images/linkedin_logo.jpg" PostBackUrl="http://www.linkedin.com/pub/scott-selby/33/304/44a" />
<asp:ImageButton ID="imgCB" runat="server" ImageUrl="Images/careerbuilder_logo.jpg" PostBackUrl="http://www.careerbuilder.com" />
<asp:ImageButton ID="imgCP" runat="server" ImageUrl="Images/codeplex_logo.jpg" PostBackUrl="http://www.codeplex.com" />
</div>
Middle of Page
<div ID="formPanel" runat="server" style="position:absolute; top:235px;">
<asp:TextBox ID="txtNewCity" runat="server"></asp:TextBox>
<asp:Button ID="btnChangeCity" runat="server" Text="Change City" UseSubmitBehavior="true" />
</div>
You may set the default button via <form/> attribute.
<form defaultbutton="btnChangeCity" id="form1" runat="server">
...
</form>
Or use Panel control to set default button.
<asp:Panel ID="Panel1" runat="server" DefaultButton="btnChangeCity">
<asp:TextBox ID="txtNewCity" runat="server"></asp:TextBox>
<asp:Button ID="btnChangeCity" runat="server" Text="Change City" />
</asp:Panel>
You surround your controls with <div> which is a good idea, but to have it run at all you also need <form>. In case you just didn't include it, the submit button also has to have OnClick="sub" attribute.
Read more here.
Update:
There was actually a hidden panel with validator in the user control that was causing page not to be valid on the first postback. Consider this issue resolved.
This is first time I am using this control and it is behaving rather strange. I have to click on the "Next" button twice for it to move to the next step. I tried explicitly setting active index, using MoveTo etc. Nothing works. Here is the markup for the control. Anybody has any ideas why?
<asp:Wizard ID="UserWizard" runat="server" ActiveStepIndex="0"
StartNextButtonImageUrl = "~/App_Themes/Default/images/buttons/continue.gif" StartNextButtonType="Image"
StepNextButtonType="Image" StepNextButtonImageUrl="~/App_Themes/Default/images/buttons/continue.gif"
FinishPreviousButtonImageUrl="~/App_Themes/Default/images/buttons/back.gif"
FinishPreviousButtonType="Image" FinishCompleteButtonImageUrl="~/App_Themes/Default/images/buttons/save.gif"
FinishCompleteButtonType="Image" CancelButtonType="Image" CancelButtonImageUrl="~/App_Themes/Default/images/buttons/back.gif"
DisplaySideBar="false" >
<WizardSteps>
<asp:WizardStep Title="User Profile" ID="UserProfile" runat="server">
<uhc:ctlUserProfileEdit ID="ctlUserProfileEdit" runat="server">
</uhc:ctlUserProfileEdit>
<br clear="all" />
<div>
<asp:ImageButton ID="cmdResetPassword" runat="server" ImageUrl="~/App_Themes/Default/images/buttons/resetpassword.gif" />
</div>
<div>
<asp:UpdatePanel ID="upSchools" runat="server" ChildrenAsTriggers="true">
<ContentTemplate>
<uhc:ctlSchoolLocationSelector ID="ctlSchoolLocationSelector" runat="server" />
</ContentTemplate>
</asp:UpdatePanel>
</div>
</asp:WizardStep>
<asp:WizardStep Title="Roles" ID="Roles" runat="server">
<uhc:ctlPermissionInternal ID="ctlPermissionInternal1" runat="server"></uhc:ctlPermissionInternal>
<uhc:ctlPermissionExternal ID="ctlPermissionExternal1" runat="server"></uhc:ctlPermissionExternal>
</asp:WizardStep>
</WizardSteps>
</asp:Wizard>
I don't know for sure if this is what's causing it, but I find it strange that there is an UpdatePanel within the Wizard control, rather than the Wizard Control within the update panel. This may be causing some strange behavior.
Can you change this and see if the problem resolves itself?