We Keep Coding

Strongly Typed Model Binding in multiple Web User Controls on a single Formview

I'm trying to use the ASP.NET 4.5 strongly typed model binding on multiple web user controls that are added to a single Formview inside the Edit and Item Templates so I can update the data.
i.e. I have an aspx page like this-ish
<asp:FormView ID="FormView1" runat="server"
ItemType="MyDataLayer.MyDataItem"
SelectMethod="FormView1_GetItem"
UpdateMethod="FormView1_UpdateItem"
DataKeyNames="MyDataItemID" >
<EditItemTemplate>
<asp:LinkButton Text="Update" runat="server" CommandName="Update"/>
<uc1:WebUserControl1 runat="server" id="WebUserControl1" />
<uc1:WebUserControl1 runat="server" id="WebUserControl2" />
</EditItemTemplate>
<ItemTemplate>
<asp:LinkButton Text="Edit" runat="server" CommandName="Edit" />
<uc1:WebUserControl1 runat="server" id="WebUserControl1" />
<uc1:WebUserControl1 runat="server" id="WebUserControl2" />
</ItemTemplate>
</asp:FormView>
With ascx user controls like this(simplified version)
<%# Control Language="C#" AutoEventWireup="false"
CodeBehind="WebUserControl1.ascx.cs"
Inherits="WebApplicationTests.WebUserControl1" %>
<asp:TextBox ID="TextBox1" runat="server" Text='<%# BindItem.Name%>'></asp:TextBox>
I'm able to get it to work if I move the guts of the user control to the page with the formview, but it will not work in the user control.
In other words, I want the user control fields bound to the parent page Formview data with the new "BindItem", and use the formview ItemType, so I will have a single item of data, bound to multiple controls that hold different pieces of the same item within the formview.
(The project is based on a monolithic table with everything, but we want to separate the data to the user for clarity)
If there are any idea's on how to get this to work, or anyone knows why it doesn't work that would be great!

how do I show a webpage in a modal popup?

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.

Is it normal for Page_Load to trigger upon clicking a page of a GridView inside an UpdatePanel?

I have this code in my aspx page:
<form id="form2" runat="server">
<asp:ScriptManager ID="ItemsScriptManager" runat="server" EnablePartialRendering="true" />
<asp:Button runat="server" ID="SearchButton" OnClick="ItemsSearch" Text="Search" />
<asp:UpdatePanel runat="server" ID="ItemsUpdatePanel">
<ContentTemplate>
<asp:ObjectDataSource runat="server" ID="ItemsDS"
TypeName="TemplateGridViewODSPagingSorting.ItemDAO" SelectMethod="GetItems" />
<asp:GridView runat="server" ID="ItemsGridView" DataSourceID="ItemsDS"
AllowPaging="true" AllowSorting="true" PageSize="4">
</asp:GridView>
</ContentTemplate>
</asp:UpdatePanel>
</form>
By pressing on another page of the GridView the Page_Load is triggered, is this normal behavior for a partial postback?

Partial rendering using UpdatePanel does not change or affect the whole Page life cycle in ASP.NET.
it's a small trick used to re-render only a certain region of the page in the browser (the UpdatePanel) but nothing else change, so yes, it's normal to see Page_Load and all other events to be triggered as usual; it has to be like that or it would not work :)

Yes, the during update panel update, the page_load will be called with every asynchronous postback to the server, to overcome this, you can use jquery ajax.

Telerik Grid Client-Side Row Selection

I've researched these questions thoroughly on Stackoverflow and on Telerik but still have not figured out the solution to these questions. Here's what I am trying to do. I have a RadGrid control that is databound using Linq. Based on the user's row selection I'd like to query additional information from the database and drop it into another control (let's assume that other control is a Rad Listview for the moment). I'd like to do this all clientside without having to post the whole page back to the server. Separately I'm trying to put a button on the page to send the row selection back to the server to trigger some action in the code-behind.
I'd love it if someone could show me how to do the following:
Get the user row selection using Javascript and populate key values from that selection in another control (Using Telerik client-side row selection, not the usual asp.net select link)
Make an Ajax request using the key value(s) from the previous question to retrieve some additional information from the database. I'm assuming that I will be using Linq on the server side to handle this request. Refresh another control to display that info.
Put a button on the page to post the key value from the first question back to the server where it will be caught and stored in a variable.
I realize there's a fair amount of overlap in items 1-3 above but I hope that by breaking it out as I did I'll be better able to understand the mechanics of how client and server side code interacts in an asp.net + telerik environment.
Here are some related posts that I found helpful:
Getting cell values for selected
rows client side
Telerik button
/ client side events
//I'd post other links my my SO reputation score does not permit me to do so
Here's some code from my page. The relevant key value from my grid is the package tag.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
This is the Header
<!-- Begin Navigation -->
<div id="navigation">
This is the Navigation
</div>
<!-- End Navigation -->
<!-- Begin Faux Columns -->
<div id="faux">
<!-- Begin Left Column -->
<div id="leftcolumn">
This is the left column
<telerik:RadTreeView ID="RadTreeView1" Runat="server" Skin="Telerik">
<Nodes>
<telerik:RadTreeNode runat="server" Expanded="True" Text="My Account">
<Nodes>
<telerik:RadTreeNode runat="server" Text="Inventory">
</telerik:RadTreeNode>
<telerik:RadTreeNode runat="server" Text="Protection Plan">
</telerik:RadTreeNode>
<telerik:RadTreeNode runat="server" Text="Addresses">
</telerik:RadTreeNode>
<telerik:RadTreeNode runat="server" Text="Profile">
</telerik:RadTreeNode>
<telerik:RadTreeNode runat="server" Text="Alert Preferences">
</telerik:RadTreeNode>
</Nodes>
</telerik:RadTreeNode>
<telerik:RadTreeNode runat="server" Text="Supplies">
</telerik:RadTreeNode>
</Nodes>
</telerik:RadTreeView>
</div>
<!-- End Left Column -->
<!-- Begin Content Column -->
<div id="content">
This is the main body where the inventory stuff goes
<form id="form1" runat="server">
<telerik:RadScriptManager ID="RadScriptManager1" runat="server">
<Scripts>
<%--Needed for JavaScript IntelliSense in VS2010--%>
<%--For VS2008 replace RadScriptManager with ScriptManager--%>
<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
</Scripts>
</telerik:RadScriptManager>
<script type="text/javascript">
//Put your JavaScript code here.
</script>
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
</telerik:RadAjaxManager>
<div>
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
<telerik:RadTabStrip ID="RadTabStrip1" runat="server"
ontabclick="RadTabStrip1_TabClick" SelectedIndex="2" AutoPostBack="True"
Skin="Vista">
<Tabs>
<telerik:RadTab runat="server" Text="Pending">
</telerik:RadTab>
<telerik:RadTab runat="server" Text="In Storage">
</telerik:RadTab>
<telerik:RadTab runat="server" Text="Returned" Selected="True">
</telerik:RadTab>
</Tabs>
</telerik:RadTabStrip>
<telerik:RadGrid ID="RadGrid1" runat="server" AllowSorting="True"
CellSpacing="0" GridLines="None" AutoGenerateColumns="False"
Skin="Vista" Width="654px">
<ClientSettings>
<Selecting AllowRowSelect="True" />
<Scrolling AllowScroll="True" UseStaticHeaders="True" />
<ClientEvents OnGridCreated="GridCreated" OnRowSelected="RowSelected"></ClientEvents>
</ClientSettings>
<Columns>
<telerik:GridClientSelectColumn FilterControlAltText="Filter column column"
UniqueName="column0" CommandName="SelectRow">
</telerik:GridClientSelectColumn>
<telerik:GridBoundColumn DataField="Tag"
FilterControlAltText="Filter column2 column" HeaderText="Tag"
UniqueName="column1">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="Name"
FilterControlAltText="Filter column3 column" HeaderText="Name"
UniqueName="column3">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="Received" DataType="System.DateTime"
EmptyDataText="Not Received" FilterControlAltText="Filter column4 column"
HeaderText="Received" UniqueName="column4" DataFormatString="{0:MM/dd/yy}">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="Shipped" EmptyDataText="In Storage"
FilterControlAltText="Filter column5 column" HeaderText="Shipped"
UniqueName="column5" DataFormatString="{0:MM/dd/yy}">
</telerik:GridBoundColumn>
<telerik:GridRatingColumn FilterControlAltText="Filter column1 column"
HeaderText="Condition" ItemCount="3" UniqueName="column1">
</telerik:GridRatingColumn>
</Columns>
<SelectedItemStyle BackColor="White" />

If you are talking true client-side scripting, the grid should pass off the selection to a web service, and populate the next control via its client-side API (if the RadListView supports client-side binding, which I'm not sure that it does). It's definitely possible, but a lot more work than the solution below. However:
If you want to postback to the server anyway, why populate the listview on the client-side? Any client-side populated data is lost (because it isn't stored in viewstate), and so client-side binding doesn't help if you are posting back to the server to store a variable. The easiest way since you are doing telerik is to set the ClientSettings.EnablePostBackOnRowClick="true" on the grid, and the ClientSettings.Selecting.AllowRowSelect="true" in markup or code. Then, Wrap these two controls in a RadAjaxPanel, so that when the postback happens, you can handle it all through code.
When clicking on the row of the grid, it posts back, the events all work on the server side, the value is stored in your variable (as long as its stored in session, cache, viewstate), and then you can populate the listview.
HTH.

TabContainer Problems

Having a strange issue with the TabContainer in the AJAX Toolkit.
We have several views into a customer record system that we have built as ASP.net controls. These controls use UpdatePanels to load data asynchronously. We use jQuery and jquery.ui to place these controls in separate tabs on a single page.
Which all works swimmingly.
Lately, I've gotten a little tired of the jQuery tab hackish approach and decided to port everything to use the TabContainer. I want to be able to control the tabs as objects.
At first glance, everything works perfectly. I just slapped the controls into tabs in a TabContainer and everything looked great. However, for some reason, databound controls are losing their data.
For instance, grid views vanish when I switch pages. A drop down control with an OnTextChanged event, loses its databound list of values upon post back.
Something about the TabContainer -> Custom Control -> UpdatePanel -> Control that uses data binding heirarchy is throwing it out of whack and the debugger isn't shedding any light. It seems like control state isn't being stored.
I don't really know enough about control state to know what to look for.
Any ideas? Here is the markup for the TabContainer:
<asp:TabContainer ID="tcBanner" runat="server" ActiveTabIndex="0" Width="100%"
EnableViewState="False" ScrollBars="Vertical">
<asp:TabPanel runat="server" HeaderText="Comments" ID="tbComments">
<ContentTemplate>
<luBannerControl:Comments ID="commentsTabContent" runat="server" />
</ContentTemplate>
</asp:TabPanel>
<asp:TabPanel runat="server" HeaderText="General" ID="tbContact">
<ContentTemplate>
<luBannerControl:Contact ID="contactTabContent" runat="server" />
</ContentTemplate>
</asp:TabPanel>
</asp:TabContainer>
Here is the markup for one of the controls:
<asp:UpdatePanel ID="pnlComments" UpdateMode="Conditional" runat="server">
<ContentTemplate>
<asp:GridView ID="CommentsGridView" AllowPaging="true" PageSize="20" DataSourceID="BannerSqlDataSource" runat="server" AutoGenerateColumns="False" GridLines="None" CssClass="CommentGrid" HeaderStyle-CssClass="CommentGridHeader" RowStyle-CssClass="CommentRowsEven" AlternatingRowStyle-CssClass="CommentRowsOdd">
<Columns>
<asp:BoundField DataField="SPRCMNT_TEXT" HeaderText="Comment" SortExpression="SPRCMNT_TEXT" />
<asp:BoundField DataField="SPRCMNT_DATE" HeaderText="Created" SortExpression="SPRCMNT_DATE" DataFormatString="{0:M/dd/yyyy}" />
<asp:BoundField DataField="SPRCMNT_CMTT_CODE" HeaderText="Type" SortExpression="SPRCMNT_CMTT_CODE" />
<asp:BoundField DataField="SPRCMNT_CTYP_CODE" HeaderText="Source" SortExpression="SPRCMNT_CTYP_CODE" />
<asp:BoundField DataField="sprcmnt_user_id" HeaderText="User" SortExpression="sprcmnt_user_id" />
</Columns>
</asp:GridView>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="txtSearch" EventName="TextChanged" />
<asp:AsyncPostBackTrigger ControlID="btnClearFilter" EventName="Click" />
</Triggers>
</asp:UpdatePanel>

This ended up being completely unrelated to nested TabContainers.
I had unknowingly broken the controls in question before adding them to the TabContainer and surprisingly, this meant they did not function the way they used to.
Sorry for wasting your collective time.
Thanks,
Clif

Make sure your TabContainer's OnDemand Property is turned off. I know for a fact that this can cause your controls such as GridView to lose their data while retain their rows, especially if you dynamically generate your controls.
Via Markup:
<asp:TabContainer ID="tcBanner" runat="server" ActiveTabIndex="0" Width="100%"
EnableViewState="False" ScrollBars="Vertical" OnDemand="false" >
Via code:
tcBanner.OnDemand = false;