CRUD with AjaxControlToolkit ModalPopup


	CRUD with AjaxControlToolkit ModalPopup
robertdondo
7-23-2009 2:24 AM
217 views
tags:
asp.net, c#, crud, modalpopup, control, ajaxcontroltoolkit, javascript, client side, server
robertdondo says:
How to create a master-detail effect using the ModalPopup control from the AjaxCoontrolToolkit in C#.
Add a Comment
Login to Comment. Not a member yet? Sign up
Today's Top Clips

visit the Top Clips page
View the Top Clips from July 23, 2009
Embed This Clip In Your Site...
<div style="margin: 12px 0px; font-family: arial; color: #333333; background: #ffffff; border: solid 4px #e5e5e5; width: 100%; clear: left;"><div class="CM_CTB_Content_Wrap" style="margin: 0px; padding: 0px;background-color: #ffffff;"><div style="border-bottom: solid 1px #dcdcdc; white-space: nowrap; margin-bottom: 8px; background-color: #eeeeee ;background-image: url(http://clipmarks.com/images/source-bg.gif); background-repeat: repeat-x; height: 24px; line-height: 24px; vertical-align: middle; padding-bottom: 4px; color: #666666; font-size: 10px;" ><a href="http://clipmarks.com/clip-to-blog/" title="see clips that are hot right now"><img src="http://content.clipmarks.com/blog_embed/d8c362f9-5189-4473-b83e-f6f223995cfa/8DE7DEBE-F2F9-4C2E-AF4A-9E203E0DDFC3/" alt="" width="19" height="19" border="0" style="vertical-align: middle; margin: 0px 4px; display: inline; border: none; float:none;" /></a>clipped from <a title="http://mattberseth.com/blog/2008/04/masterdetail_with_the_gridview.html" href="http://mattberseth.com/blog/2008/04/masterdetail_with_the_gridview.html" style="font-size: 11px;">mattberseth.com</a></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://mattberseth.com/blog/2008/04/masterdetail_with_the_gridview.html"><div align="center"><img src="http://content7.clipmarks.com/blog_cache/mattberseth.com/img/948D72BD-6E90-4FB7-950A-82385B2F3E0F" alt="image" /></div></blockquote><div style="height: 2px; font-size: 2px; background: #dcdcdc; border-bottom: solid 1px #f5f5f5; margin: 2px 4px;"></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://mattberseth.com/blog/2008/04/masterdetail_with_the_gridview.html"><P>I am sure everyone is pretty familiar with Master/Details style of editing data, but just in case - here is how my page works.  The grid shows 12 rows of customer data.  The far right column in the grid contains a hyperlink that when clicked brings the detail view of the row into focus so the corresponding row can be edited.  The detail view is a popup control and contains a Save and Close buttons.  When close is clicked, the detail popup is dismissed and the user goes back to viewing the main grid.  When they click Save, some simple validation checks are run (all are <A href="http://msdn2.microsoft.com/en-us/library/system.web.ui.webcontrols.requiredfieldvalidator.aspx">RequiredFieldValidators</A> for this sample) and the new data values are persisted, and finally the detail popup is dismissed and the main grid is refreshed so that it displays the changes.</P></blockquote><div style="height: 2px; font-size: 2px; background: #dcdcdc; border-bottom: solid 1px #f5f5f5; margin: 2px 4px;"></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://mattberseth.com/blog/2008/04/masterdetail_with_the_gridview.html"><P><A target="_blank" href="http://mattberseth2.com/master_details_II/">Live Demo</A> | <A target="_blank" href="http://mattberseth2.com/downloads/master_details_II.zip">Download</A></P></blockquote><div style="height: 2px; font-size: 2px; background: #dcdcdc; border-bottom: solid 1px #f5f5f5; margin: 2px 4px;"></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://mattberseth.com/blog/2008/04/masterdetail_with_the_gridview.html"><div align="center"><img src="http://content8.clipmarks.com/blog_cache/mattberseth.com/img/0109895E-5F6A-4F18-8BC7-7B8E22D0C8E8" alt="image" /></div></blockquote><div style="height: 2px; font-size: 2px; background: #dcdcdc; border-bottom: solid 1px #f5f5f5; margin: 2px 4px;"></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://mattberseth.com/blog/2008/04/masterdetail_with_the_gridview.html"><div align="center"><img src="http://content9.clipmarks.com/blog_cache/mattberseth.com/img/E8169133-3FD8-46D1-A57D-1377913967E9" alt="image" /></div></blockquote><div style="height: 2px; font-size: 2px; background: #dcdcdc; border-bottom: solid 1px #f5f5f5; margin: 2px 4px;"></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://mattberseth.com/blog/2008/04/masterdetail_with_the_gridview.html"><div align="center"><img src="http://content6.clipmarks.com/blog_cache/mattberseth.com/img/C7CAB995-2216-4B6C-9D3D-F645E4B2566E" alt="image" /></div></blockquote><div style="height: 2px; font-size: 2px; background: #dcdcdc; border-bottom: solid 1px #f5f5f5; margin: 2px 4px;"></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://mattberseth.com/blog/2008/04/masterdetail_with_the_gridview.html"><div align="center"><img src="http://content7.clipmarks.com/blog_cache/mattberseth.com/img/8E24FBCB-30E0-4DD0-8393-7ADA901022DD" alt="image" /></div></blockquote><div style="height: 2px; font-size: 2px; background: #dcdcdc; border-bottom: solid 1px #f5f5f5; margin: 2px 4px;"></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://mattberseth.com/blog/2008/04/masterdetail_with_the_gridview.html"><div align="center"><img src="http://content8.clipmarks.com/blog_cache/mattberseth.com/img/A9ECCC72-CB3D-4D9E-85FD-AAF8CCF47027" alt="image" /></div></blockquote><div style="height: 2px; font-size: 2px; background: #dcdcdc; border-bottom: solid 1px #f5f5f5; margin: 2px 4px;"></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://mattberseth.com/blog/2008/04/masterdetail_with_the_gridview.html"><div align="center"><img src="http://content9.clipmarks.com/blog_cache/mattberseth.com/img/5F768BA0-BAAF-4D41-80F6-F61A23C7C5E0" alt="image" /></div></blockquote><div style="height: 2px; font-size: 2px; background: #dcdcdc; border-bottom: solid 1px #f5f5f5; margin: 2px 4px;"></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://mattberseth.com/blog/2008/04/masterdetail_with_the_gridview.html"><div align="center"><img src="http://content6.clipmarks.com/blog_cache/mattberseth.com/img/2FDDB3F5-D243-410B-82A6-A0CB34F920A6" alt="image" /></div></blockquote><div style="height: 2px; font-size: 2px; background: #dcdcdc; border-bottom: solid 1px #f5f5f5; margin: 2px 4px;"></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://mattberseth.com/blog/2008/04/masterdetail_with_the_gridview.html"><div align="center"><img src="http://content7.clipmarks.com/blog_cache/mattberseth.com/img/55F5D2ED-050D-4075-AA2E-508DD507B75A" alt="image" /></div></blockquote><div style="height: 2px; font-size: 2px; background: #dcdcdc; border-bottom: solid 1px #f5f5f5; margin: 2px 4px;"></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://mattberseth.com/blog/2008/04/masterdetail_with_the_gridview.html"><div align="center"><img src="http://content8.clipmarks.com/blog_cache/mattberseth.com/img/CE922AA2-132F-4D67-8E6F-87FF33636EDF" alt="image" /></div></blockquote><div style="height: 2px; font-size: 2px; background: #dcdcdc; border-bottom: solid 1px #f5f5f5; margin: 2px 4px;"></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://mattberseth.com/blog/2008/04/masterdetail_with_the_gridview.html"><div align="center"><img src="http://content9.clipmarks.com/blog_cache/mattberseth.com/img/281A2D1E-983A-4D39-A45D-AA6A7E6474A8" alt="image" /></div></blockquote><div style="height: 2px; font-size: 2px; background: #dcdcdc; border-bottom: solid 1px #f5f5f5; margin: 2px 4px;"></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://mattberseth.com/blog/2008/04/masterdetail_with_the_gridview.html">A while back I wrote a <A href="http://mattberseth.com/blog/2007/07/modalpopupextender_example_for.html">post</A> describing how the <A href="http://msdn2.microsoft.com/en-us/library/system.web.ui.webcontrols.detailsview.aspx">DetailsView</A>, <A href="http://msdn2.microsoft.com/en-us/library/system.web.ui.webcontrols.gridview.aspx">GridView</A>, <A href="http://msdn2.microsoft.com/en-us/library/system.web.ui.updatepanel.aspx">UpdatePanel</A> and the <A href="http://www.asp.net/ajax/ajaxcontroltoolkit/samples/">AjaxControlToolkit's</A> <A href="http://www.asp.net/AJAX/AjaxControlToolkit/Samples/ModalPopup/ModalPopup.aspx">ModalPopup</A> controls could be used to implement the common Master/Details UI pattern.</blockquote></div><div style="margin: 0px 6px 6px 4px;"><table style="font-size: 11px;border-spacing: 0px;padding: 0px;" cellpadding="0" cellspacing="0" width="100%"><tr><td style="background:transparent;border-width:0px;padding:0px;">&nbsp;</td><td align="right" style="background:transparent;border-width:0px;padding:0px;width:107px" width="107"><a href="http://clipmarks.com/share/8DE7DEBE-F2F9-4C2E-AF4A-9E203E0DDFC3/blog/" title="blog or email this clip"><img src="http://content6.clipmarks.com/images/c2b-foot.png" border="0" alt="blog it" width="107" height="17" style="border-width:0px;padding:0px;margin:0px;" /></a></td></tr></table></div></div>