{"id":128366,"date":"2023-05-04T17:01:22","date_gmt":"2023-05-04T11:31:22","guid":{"rendered":"https:\/\/www.vskills.in\/certification\/tutorial\/?page_id=128366"},"modified":"2024-04-12T14:15:25","modified_gmt":"2024-04-12T08:45:25","slug":"creating-a-master-detail-page","status":"publish","type":"page","link":"https:\/\/www.vskills.in\/certification\/tutorial\/creating-a-master-detail-page\/","title":{"rendered":"Creating a Master-Detail Page"},"content":{"rendered":"\n<h4 class=\"wp-block-heading\"><strong>Creating a Master-Detail Page<\/strong><\/h4>\n\n\n\n<p>In ASP.NET, you can create a master-detail page that displays data from two related tables in a hierarchical layout. Here are the steps:<\/p>\n\n\n\n<p>Create a new page, for example &#8220;MasterDetail.aspx&#8221;.<\/p>\n\n\n\n<p>Add a GridView control to the page to display the master table, for example &#8220;Categories&#8221;.<\/p>\n\n\n\n<p>&lt;asp:GridView ID=&#8221;GridView1&#8243; runat=&#8221;server&#8221; DataSourceID=&#8221;SqlDataSource1&#8243;&gt;<\/p>\n\n\n\n<p>&lt;\/asp:GridView&gt;<\/p>\n\n\n\n<p>Add a SqlDataSource control to the page that retrieves the data from the master table.<\/p>\n\n\n\n<p>&lt;asp:SqlDataSource ID=&#8221;SqlDataSource1&#8243; runat=&#8221;server&#8221; ConnectionString=&#8221;&lt;%$ ConnectionStrings:NorthwindConnectionString %&gt;&#8221;<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp; SelectCommand=&#8221;SELECT * FROM Categories&#8221;&gt;<\/p>\n\n\n\n<p>&lt;\/asp:SqlDataSource&gt;<\/p>\n\n\n\n<p>Add a DetailsView control to the page to display the detail table, for example &#8220;Products&#8221;.<\/p>\n\n\n\n<p>&lt;asp:DetailsView ID=&#8221;DetailsView1&#8243; runat=&#8221;server&#8221; DataSourceID=&#8221;SqlDataSource2&#8243;&gt;<\/p>\n\n\n\n<p>&lt;\/asp:DetailsView&gt;<\/p>\n\n\n\n<p>Add a SqlDataSource control to the page that retrieves the data from the detail table, with a parameter that filters the results based on the selected row in the GridView control.<\/p>\n\n\n\n<p>&lt;asp:SqlDataSource ID=&#8221;SqlDataSource2&#8243; runat=&#8221;server&#8221; ConnectionString=&#8221;&lt;%$ ConnectionStrings:NorthwindConnectionString %&gt;&#8221;<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp; SelectCommand=&#8221;SELECT * FROM Products WHERE CategoryID = @CategoryID&#8221;&gt;<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp; &lt;SelectParameters&gt;<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;asp:Parameter Name=&#8221;CategoryID&#8221; Type=&#8221;Int32&#8243; \/&gt;<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp; &lt;\/SelectParameters&gt;<\/p>\n\n\n\n<p>&lt;\/asp:SqlDataSource&gt;<\/p>\n\n\n\n<p>Note that the SelectCommand of the SqlDataSource2 control includes a WHERE clause that filters the results based on the &#8220;CategoryID&#8221; parameter.<\/p>\n\n\n\n<p>Add an event handler for the SelectedIndexChanged event of the GridView control.<\/p>\n\n\n\n<p>&lt;asp:GridView ID=&#8221;GridView1&#8243; runat=&#8221;server&#8221; DataSourceID=&#8221;SqlDataSource1&#8243; OnSelectedIndexChanged=&#8221;GridView1_SelectedIndexChanged&#8221;&gt;<\/p>\n\n\n\n<p>&lt;\/asp:GridView&gt;<\/p>\n\n\n\n<p>In the code behind, write the event handler that sets the value of the &#8220;CategoryID&#8221; parameter of the SqlDataSource2 control to the selected value of the GridView control.<\/p>\n\n\n\n<p>protected void GridView1_SelectedIndexChanged(object sender, EventArgs e)<\/p>\n\n\n\n<p>{<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp; int categoryId = (int)GridView1.SelectedValue;<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp; SqlDataSource2.SelectParameters[&#8220;CategoryID&#8221;].DefaultValue = categoryId.ToString();<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp; DetailsView1.DataBind();<\/p>\n\n\n\n<p>}<\/p>\n\n\n\n<p>This event handler retrieves the selected value of the GridView control, sets the value of the &#8220;CategoryID&#8221; parameter of the SqlDataSource2 control to the selected value, and calls the DataBind method of the DetailsView control to refresh the data.<\/p>\n\n\n\n<p>Run your application to see the results.<\/p>\n\n\n\n<p>Now, when you select a row in the GridView control, the DetailsView control will display the related data from the detail table. The data displayed in the DetailsView control will be filtered based on the selected row in the GridView control.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Apply for ASP.NET Certification Now!!<\/h3>\n\n\n\n<p><a href=\"https:\/\/www.vskills.in\/certification\/certified-aspnet-programmer\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/www.vskills.in\/certification\/certified-aspnet-programmer<\/a><\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong><a href=\"https:\/\/www.vskills.in\/certification\/tutorial\/asp-net\/\" target=\"_blank\" rel=\"noreferrer noopener\">Back to Tutorial<\/a><\/strong><\/h4>\n","protected":false},"excerpt":{"rendered":"<p>Creating a Master-Detail Page In ASP.NET, you can create a master-detail page that displays data from two related tables in a hierarchical layout. Here are the steps: Create a new page, for example &#8220;MasterDetail.aspx&#8221;. Add a GridView control to the page to display the master table, for example &#8220;Categories&#8221;. &lt;asp:GridView ID=&#8221;GridView1&#8243; runat=&#8221;server&#8221; DataSourceID=&#8221;SqlDataSource1&#8243;&gt; &lt;\/asp:GridView&gt; Add&#8230;<\/p>\n","protected":false},"author":22,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"categories":[3339],"tags":[],"class_list":["post-128366","page","type-page","status-publish","hentry","category-asp-net-2"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Creating a Master-Detail Page - Tutorial<\/title>\n<meta name=\"description\" content=\"Creating a Master-Detail Page\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.vskills.in\/certification\/tutorial\/creating-a-master-detail-page\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Creating a Master-Detail Page - Tutorial\" \/>\n<meta property=\"og:description\" content=\"Creating a Master-Detail Page\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.vskills.in\/certification\/tutorial\/creating-a-master-detail-page\/\" \/>\n<meta property=\"og:site_name\" content=\"Tutorial\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/vskills.in\/\" \/>\n<meta property=\"article:modified_time\" content=\"2024-04-12T08:45:25+00:00\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/creating-a-master-detail-page\/\",\"url\":\"https:\/\/www.vskills.in\/certification\/tutorial\/creating-a-master-detail-page\/\",\"name\":\"Creating a Master-Detail Page - Tutorial\",\"isPartOf\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#website\"},\"datePublished\":\"2023-05-04T11:31:22+00:00\",\"dateModified\":\"2024-04-12T08:45:25+00:00\",\"description\":\"Creating a Master-Detail Page\",\"breadcrumb\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/creating-a-master-detail-page\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.vskills.in\/certification\/tutorial\/creating-a-master-detail-page\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/creating-a-master-detail-page\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.vskills.in\/certification\/tutorial\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Creating a Master-Detail Page\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#website\",\"url\":\"https:\/\/www.vskills.in\/certification\/tutorial\/\",\"name\":\"Tutorial\",\"description\":\"Vskills - A initiative in elearning and certification\",\"publisher\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.vskills.in\/certification\/tutorial\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#organization\",\"name\":\"Vskills\",\"url\":\"https:\/\/www.vskills.in\/certification\/tutorial\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2017\/07\/vskills-min-logo.jpg\",\"contentUrl\":\"https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2017\/07\/vskills-min-logo.jpg\",\"width\":73,\"height\":55,\"caption\":\"Vskills\"},\"image\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/vskills.in\/\",\"https:\/\/x.com\/vskills_in\",\"https:\/\/www.linkedin.com\/company-beta\/1371554\/\",\"https:\/\/www.youtube.com\/channel\/UCMWnscxPwRF_PqXo9B7q_Tw\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Creating a Master-Detail Page - Tutorial","description":"Creating a Master-Detail Page","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.vskills.in\/certification\/tutorial\/creating-a-master-detail-page\/","og_locale":"en_US","og_type":"article","og_title":"Creating a Master-Detail Page - Tutorial","og_description":"Creating a Master-Detail Page","og_url":"https:\/\/www.vskills.in\/certification\/tutorial\/creating-a-master-detail-page\/","og_site_name":"Tutorial","article_publisher":"https:\/\/www.facebook.com\/vskills.in\/","article_modified_time":"2024-04-12T08:45:25+00:00","twitter_misc":{"Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/creating-a-master-detail-page\/","url":"https:\/\/www.vskills.in\/certification\/tutorial\/creating-a-master-detail-page\/","name":"Creating a Master-Detail Page - Tutorial","isPartOf":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#website"},"datePublished":"2023-05-04T11:31:22+00:00","dateModified":"2024-04-12T08:45:25+00:00","description":"Creating a Master-Detail Page","breadcrumb":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/creating-a-master-detail-page\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.vskills.in\/certification\/tutorial\/creating-a-master-detail-page\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/creating-a-master-detail-page\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.vskills.in\/certification\/tutorial\/"},{"@type":"ListItem","position":2,"name":"Creating a Master-Detail Page"}]},{"@type":"WebSite","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#website","url":"https:\/\/www.vskills.in\/certification\/tutorial\/","name":"Tutorial","description":"Vskills - A initiative in elearning and certification","publisher":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.vskills.in\/certification\/tutorial\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#organization","name":"Vskills","url":"https:\/\/www.vskills.in\/certification\/tutorial\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#\/schema\/logo\/image\/","url":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2017\/07\/vskills-min-logo.jpg","contentUrl":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2017\/07\/vskills-min-logo.jpg","width":73,"height":55,"caption":"Vskills"},"image":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/vskills.in\/","https:\/\/x.com\/vskills_in","https:\/\/www.linkedin.com\/company-beta\/1371554\/","https:\/\/www.youtube.com\/channel\/UCMWnscxPwRF_PqXo9B7q_Tw"]}]}},"_links":{"self":[{"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/pages\/128366","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/users\/22"}],"replies":[{"embeddable":true,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/comments?post=128366"}],"version-history":[{"count":2,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/pages\/128366\/revisions"}],"predecessor-version":[{"id":128373,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/pages\/128366\/revisions\/128373"}],"wp:attachment":[{"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/media?parent=128366"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/categories?post=128366"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/tags?post=128366"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}