Charpter13-How to display BODY Column in Review Table using DetailsView Control

G.H.Wu · September 10th, 2012, 02:49 PM

Hi Imar,

I post my question again as following:

My question is that I try to use GridView Control to display the TITLE column from Review Table as hyperlinks and then use DetailsView Control to show the content of BODY column from Review Table in a separate web page. That's to say when I click each title as a hyperlink in one page, then another page will show the BODY column in a separate page. Every thing is going well, except that there are no paragraphs. Is there any method to convert the data to show paragraphs and CSS ? How can I do if I just want to show the BODY column in a page at least having paragraphs?

My Behind code as follows:

1. the webform shows the TITLE as Hyperlinks:
<<%@ Page Title="Show Review Title as a Hyperlink in a web page" Language="C#" MasterPageFile="~/MasterPages/Frontend.master" AutoEventWireup="true" CodeFile="ShowReviewTitleAsHyperLink.aspx.cs" Inherits="ShowReviewTitleAsHyperLink" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="cpMainContent" Runat="Server">
<asp:GridView ID="GridView1" runat="server" AllowPaging="True"
AutoGenerateColumns="False" DataKeyNames="Id"
DataSourceID="SqlDataSource1" GridLines="None" Height="300px"
ShowHeader="False" Width="500px">
<Columns>
<asp:HyperLinkField DataNavigateUrlFormatString="TestPageDetailView.as px?Id={0}"
HeaderText="Title" ShowHeader="False" Target="_blank" DataTextField="Title"
DataNavigateUrlFields="Id" />
</Columns>
</asp:GridView>
<asp:SqlDataSource ID="SqlDataSource1" runat="server"
ConnectionString="<%$ ConnectionStrings:PlanetWroxConnectionString1 %>"
SelectCommand="SELECT [Id], [Title] FROM [Review]">
</asp:SqlDataSource>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="cpClientScript" Runat="Server">
</asp:Content>>

2. The Webform shows the BODY of the Review Table when clicking the title as hyperlinks:

<%@ Page Title="A Test Page to show Review.Body in details using Detail View Control" Language="C#" MasterPageFile="~/MasterPages/Frontend.master" AutoEventWireup="true" CodeFile="TestPageDetailView.aspx.cs" Inherits="TestPageDetailView" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="cpMainContent" Runat="Server">
<asp:DetailsView ID="DetailsView1" runat="server" AutoGenerateRows="False"
DataSourceID="SqlDataSource1" Height="300px" Width="400px"
GridLines="None">
<Fields>
<asp:BoundField DataField="Body" HeaderText="Body" SortExpression="Body"
ShowHeader="False" >
<ItemStyle VerticalAlign="Top" />
</asp:BoundField>
</Fields>
</asp:DetailsView>
<asp:SqlDataSource ID="SqlDataSource1" runat="server"
ConnectionString="<%$ ConnectionStrings:PlanetWroxConnectionString1 %>"
SelectCommand="SELECT [Body] FROM [Review] WHERE ([Id] = @Id)">
<SelectParameters>
<asp:QueryStringParameter Name="Id" QueryStringField="Id" Type="Int32" />
</SelectParameters>
</asp:SqlDataSource>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="cpClientScript" Runat="Server">
</asp:Content>

THE SOURCE CODE:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>
A Test Page to show Review.Body in details using Detail View Control
</title>
<link href="Styles/Styles.css" rel="stylesheet" type="text/css" /><link href="App_Themes/Monochrome/Monochrome.css" type="text/css" rel="stylesheet" /><style type="text/css">
/* <![CDATA[ */
#Menu1 img.icon { border-style:none;vertical-align:middle; }
#Menu1 img.separator { border-style:none;display:block; }
#Menu1 img.horizontal-separator { border-style:none;vertical-align:middle; }
#Menu1 ul { list-style:none;margin:0;padding:0;width:auto; }
#Menu1 ul.dynamic { z-index:1; }
#Menu1 a { text-decoration:none;white-space:nowrap;display:block; }
#Menu1 a.static { padding-left:0.15em;padding-right:0.15em; }
#Menu1 a.popout-dynamic { background:url("/WebResource.axd?d=Ce85O057aNrpiIzDjpin0M7dhP2Ue0iq VRoQS2Vy1AziHZWxpkRUdV2tqhlRzNjpRyMtLLDie-gULk2yn4pn43ZmdH7NAt1LxiCRqbojwLE1&t=6346734600778 76080") no-repeat right center;padding-right:14px; }
/* ]]> */
</style></head>
<body>
<form method="post" action="TestPageDetailView.aspx?Id=23" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__LASTFOCUS" id="__LASTFOCUS" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKLTMxNjk1Mzc1NA9kFgJmD2QWAgIDD2QWCgIFDzwrAA0 CAA8WAh4LXyFEYXRhQm91bmRnZAwUKwAHBRcwOjAsMDoxLDA6M iwwOjMsMDo0LDA6NRQrAAIWEB4EVGV4dAUESG9tZR4FVmFsdWU FBEhvbWUeC05hdmlnYXRlVXJsBQ0vRGVmYXVsdC5hc3B4HgdUb 29sVGlwBRJHbyB0byB0aGUgaG9tZXBhZ2UeB0VuYWJsZWRnHgp TZWxlY3RhYmxlZx4IRGF0YVBhdGgFDS9kZWZhdWx0LmFzcHgeC URhdGFCb3VuZGdkFCsAAhYQHwEFB1Jldmlld3MfAgUHUmV2aWV 3cx8DBRUvUmV2aWV3cy9EZWZhdWx0LmFzcHgfBAUeUmV2aWV3c yBwdWJsaXNoZWQgb24gdGhpcyBzaXRlHwVnHwZnHwcFFS9yZXZ pZXdzL2RlZmF1bHQuYXNweB8IZxQrAAMFBzA6MCwwOjEUKwACF hAfAQUIQnkgR2VucmUfAgUIQnkgR2VucmUfAwUYL1Jldmlld3M vQWxsQnlHZW5yZS5hc3B4HwQFHEFsbCBSZXZpZXdzIEdyb3VwZ WQgYnkgR2VucmUfBWcfBmcfBwUYL3Jldmlld3MvYWxsYnlnZW5 yZS5hc3B4HwhnZBQrAAIWEB8BBQtBbGwgUmV2aWV3cx8CBQtBb GwgUmV2aWV3cx8DBREvUmV2aWV3cy9BbGwuYXNweB8EBQtBbGw gUmV2aWV3cx8FZx8GZx8HBREvcmV2aWV3cy9hbGwuYXNweB8IZ 2QUKwACFhAfAQUHR2lnUGljcx8CBQdHaWdQaWNzHwMFDS9QaG9 0b0FsYnVtcy8fBAUMQWxsIEdpZyBQaWNzHwVnHwZnHwcFDS9wa G90b2FsYnVtcy8fCGcUKwADBQcwOjAsMDoxFCsAAhYQHwEFCEd pZyBQaWNzHwIFCEdpZyBQaWNzHwMFGS9QaG90b0FsYnVtcy9EZ WZhdWx0LmFzcHgfBAUMQWxsIEdpZyBQaWNzHwVnHwZnHwcFGS9 waG90b2FsYnVtcy9kZWZhdWx0LmFzcHgfCGdkFCsAAhYQHwEFC U5ldyBBbGJ1bR8CBQlOZXcgQWxidW0fAwUTL05ld1Bob3RvQWx idW0uYXNweB8EBSZDcmVhdGUgYSBuZXcgUGhvdG8gQWxidW0gd 2l0aCBHaWcgUGljcx8FZx8GZx8HBRMvbmV3cGhvdG9hbGJ1bS5 hc3B4HwhnZBQrAAIWEB8BBQVBYm91dB8CBQVBYm91dB8DBRMvQ WJvdXQvRGVmYXVsdC5hc3B4HwQFD0Fib3V0IHRoaXMgc2l0ZR8 FZx8GZx8HBRMvYWJvdXQvZGVmYXVsdC5hc3B4HwhnFCsAAwUHM DowLDA6MRQrAAIWEB8BBQpDb250YWN0IFVzHwIFCkNvbnRhY3Q gVXMfAwUTL0Fib3V0L0NvbnRhY3QuYXNweB8EBQpDb250YWN0I FVzHwVnHwZnHwcFEy9hYm91dC9jb250YWN0LmFzcHgfCGdkFCs AAhYQHwEFCEFib3V0IFVzHwIFCEFib3V0IFVzHwMFEy9BYm91d C9BYm91dFVzLmFzcHgfBAUIQWJvdXQgVXMfBWcfBmcfBwUTL2F ib3V0L2Fib3V0dXMuYXNweB8IZ2QUKwACFhAfAQUKTXkgUHJvZ mlsZR8CBQpNeSBQcm9maWxlHwMFDy9NeVByb2ZpbGUuYXNweB8 EBQpNeSBwcm9maWxlHwVnHwZnHwcFDy9teXByb2ZpbGUuYXNwe B8IZ2QUKwACFhAfAQUFTG9naW4fAgUFTG9naW4fAwULL0xvZ2l uLmFzcHgfBAUXTG9nIGluIHRvIHRoaXMgd2ViIHNpdGUfBWcfB mcfBwULL2xvZ2luLmFzcHgfCGdkZAIHDzwrAAkCAA8WBB4NTmV 2ZXJFeHBhbmRlZGceB1Zpc2libGVoZAcQFgAWAGRkAg0PZBYEA gEPPCsADwIADxYEHwBnHgtfIUl0ZW1Db3VudAIBZAoQFgAWABY AFgJmD2QWBmYPDxYCHwpoZGQCAQ9kFgJmDw8WAh8BBaAHTkVXI FlPUksgKEFQKSDigJQgRW1tYSBXYXRzb24gaXMgdGhlIGZhdm9 yaXRlIGNlbGVicml0eSBiYWl0IGZvciBjeWJlciBjcmltaW5hb HMgdHJ5aW5nIHRvIGx1cmUgSW50ZXJuZXQgdXNlcnMuDQoNCk1 jQWZlZSBzYWlkIE1vbmRheSB0aGF0IHRoZSAmcXVvdDtIYXJye SBQb3R0ZXImcXVvdDsgc3RhciBpcyB0aGUgJnF1b3Q7bW9zdCB kYW5nZXJvdXMmcXVvdDsgY2VsZWJyaXR5IHRvIHNlYXJjaCBmb 3Igb25saW5lLiBUaGF0JiMzOTtzIGJlY2F1c2UgbWFueSBzaXR lcyB1c2UgV2F0c29uIHRvIHRyaWNrIHVzZXJzIGludG8gZG93b mxvYWRpbmcgbWFsaWNpb3VzIHNvZnR3YXJlIG9yIHRvIHN0ZWF sIHBlcnNvbmFsIGluZm9ybWF0aW9uLg0KDQpXaGVuIHNlYXJja GluZyBmb3IgdGhlIDIyLXllYXItb2xkIFdhdHNvbiwgdGhlcmU mIzM5O3MgYSBvbmUtaW4tZWlnaHQgY2hhbmNlIG9mIGxhbmRpb mcgb24gYSBtYWxpY2lvdXMgc2l0ZS4NCg0KVGhpcyBpcyB0aGU gc2l4dGggdGltZSB0aGUgSW50ZWwtb3duZWQgc2VjdXJpdHkgd GVjaG5vbG9neSBjb21wYW55IGhhcyBjb25kdWN0ZWQgdGhlIHN 0dWR5LCB3aGljaCB3YXMgbGFzdCB5ZWFyIHRvcHBlZCBieSBIZ WlkaSBLbHVtLiBGZW1hbGUgY2VsZWJyaXRpZXMgYXJlIGZhciB tb3JlIGxpa2VseSB0byBiZSB1dGlsaXplZCBieSBjeWJlciBjc mltaW5hbHM6IGxhdGUtbmlnaHQgaG9zdCBKaW1teSBLaW1tZWw gd2FzIHRoZSBvbmx5IG1hbGUgaW4gdGhlIHRvcCAyMC4NCg0KT 3RoZXJzIGFtb25nIHRoZSByaXNraWVzdCBjZWxlYnJpdGllcyB 0byBzZWFyY2ggb25saW5lIGFyZSBKZXNzaWNhIEJpZWwsIEV2Y SBNZW5kZXMsIFNlbGVuYSBHb21leiBhbmQgSGFsbGUgQmVycnk uDQoNCnd3dy55YWhvby5jb20NCg0KUGxlYXNlIEVtYWlsIE1lO iB3dS5ndWFuZ2h1YUBob3RtYWlsLmNvbWRkAgIPDxYCHwpoZGQ CAw8PZA8QFgFmFgEWAh4OUGFyYW1ldGVyVmFsdWUFAjIzFgECB GRkAg8PEGRkFgFmZAIRD2QWBGYPDxYCHwpnZBYCAgEPFgIeBGh yZWYFE2h0dHA6Ly9wMnAud3JveC5jb21kAgIPDxYCHwpoZGQYA wUeX19Db250cm9sc1JlcXVpcmVQb3N0QmFja0tleV9fFgIFI2N 0bDAwJExvZ2luVmlldzEkTG9naW5TdGF0dXMyJGN0bDAxBSNjd GwwMCRMb2dpblZpZXcxJExvZ2luU3RhdHVzMiRjdGwwMwUQY3R sMDAkTG9naW5WaWV3MQ8PZAICZAUgY3RsMDAkY3BNYWluQ29ud GVudCREZXRhaWxzVmlldzEPFCsAB2RkZGRkFgACAWRyMQoHlou DXIkBW6QEUxgier7rissAX9BmuZGZfvwZjA==" />
</div>

<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['form1'];
if (!theForm) {
theForm = document.form1;
}
function __doPostBack(eventTarget, eventArgument) {
if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
theForm.__EVENTTARGET.value = eventTarget;
theForm.__EVENTARGUMENT.value = eventArgument;
theForm.submit();
}
}
//]]>
</script>

<script src="/WebResource.axd?d=etQK6JPd3PKOMyPOICnhB5Z_gI4OiDrk dr3wAq4K6HvJ8bIpV4-OG7LKlpy4DG_JLWq8DNqXDtW0CgpRxW6HsZ0X-1SO_weiVidfAV_tBSo1&t=634673460077876080" type="text/javascript"></script>

<script src="/ScriptResource.axd?d=Ln7jtfmqznIJ3f7Lft4qibYmuGaxA aHnBbFj3z6VVSoxPVCCMz7ZDxhRJL2JLit5CAzbyT_9tQ1Pyh1 TtHdtXxmAMp12q-kuuJT2tZOqv3lSQjLOcV9DfOBNDxBn-TZrDrguoZ3mObryRveQehHFmA2&t=150492e7" type="text/javascript"></script>
<script src="/ScriptResource.axd?d=bEdRuS2OTMmw_RREIoWAEdLdUW4EF ImO4Mo9_GNAfgI9pA9kvLHlC1TMV-C9C3KZYwZQdWrPY3UvKi91LYjGayYHaij7WoM51dNivTpZJVYH b1JBnUmFDDi51QTooIL9TbS5oi-xXHCw3gz6OhnaHBeW25Mz6Od5L_Oloy_OtHZQVojiArwr-EF8tdRIHR6K0&t=ffffffff940d030f" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
if (typeof(Sys) === 'undefined') throw new Error('ASP.NET Ajax client-side framework failed to load.');
//]]>
</script>

<script src="/ScriptResource.axd?d=gZkx8s4WSp0e5kva0zZ1qqSJSiGsM 32CvOt9U6qSZZwWrVfMd9_K1Ud_aDSbYoSmryEJ_w3BTdyOpct VdQBksrPPOUKRZ7shFzjxHmaROvAoTPHjP0BAp8ZeeEj50MouE s_t5MgCqTMo8p6MxLnWww7jfbcJ6E0WBF1C1-95u8FuLpaTOI6k23yXcxyoQJGG0&t=ffffffff940d030f " type="text/javascript"></script>
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<div class="aspNetHidden">

<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWBQKf7JFEApTDyagEAoqp+KcOApDH3PgHArS35N8FqFazDTZ CG5uKxt24TlaqmPRr/bF1OnmUNb79TdOJ2Hk=" />
</div>
<script type="text/javascript">
//<![CDATA[
Sys.WebForms.PageRequestManager._initialize('ctl00 $ScriptManager1', 'form1', [], [], [], 90, 'ctl00');
//]]>
</script>

<div id="PageWrapper">
<div id="Header"><a href="./"></a></div>
<div id="MenuWrapper">
<a href="#Menu1_SkipLink"><img alt="Skip Navigation Links" src="/WebResource.axd?d=HhmPM961z28hqq2GVne-eGKPy8YphoR2G3woawb1JF4Tn4wul4pdZPkFBEu8dfTeRYjEO2 3_0r36Jsk_pFw1W-XSvLp_TEshb2tU45wfy8g1&t=634673460077876080" width="0" height="0" style="border-width:0px;" /></a><div class="MainMenu" id="Menu1">
<ul class="level1">
<li><a title="Go to the homepage" class="level1" href="/Default.aspx">Home</a></li><li><a title="Reviews published on this site" class="level1" href="/Reviews/Default.aspx">Reviews</a><ul class="level2">
<li><a title="All Reviews Grouped by Genre" class="level2" href="/Reviews/AllByGenre.aspx">By Genre</a></li><li><a title="All Reviews" class="level2" href="/Reviews/All.aspx">All Reviews</a></li>
</ul></li><li><a title="All Gig Pics" class="level1" href="/PhotoAlbums/">GigPics</a><ul class="level2">
<li><a title="All Gig Pics" class="level2" href="/PhotoAlbums/Default.aspx">Gig Pics</a></li><li><a title="Create a new Photo Album with Gig Pics" class="level2" href="/NewPhotoAlbum.aspx">New Album</a></li>
</ul></li><li><a title="About this site" class="level1" href="/About/Default.aspx">About</a><ul class="level2">
<li><a title="Contact Us" class="level2" href="/About/Contact.aspx">Contact Us</a></li><li><a title="About Us" class="level2" href="/About/AboutUs.aspx">About Us</a></li>
</ul></li><li><a title="My profile" class="level1" href="/MyProfile.aspx">My Profile</a></li><li><a title="Log in to this web site" class="level1" href="/Login.aspx">Login</a></li>
</ul>
</div><a id="Menu1_SkipLink"></a>

</div>
<div id="MainContent">
<span id="SiteMapPath1"><a href="#SiteMapPath1_SkipLink"><img alt="Skip Navigation Links" height="0" width="0" src="/WebResource.axd?d=HhmPM961z28hqq2GVne-eGKPy8YphoR2G3woawb1JF4Tn4wul4pdZPkFBEu8dfTeRYjEO2 3_0r36Jsk_pFw1W-XSvLp_TEshb2tU45wfy8g1&t=634673460077876080" style="border-width:0px;" /></a><a id="SiteMapPath1_SkipLink"></a></span>

<div>
<table cellspacing="0" id="cpMainContent_DetailsView1" style="height:300px;width:400px;border-collapse:collapse;">
<tr>
<td valign="top" colspan="2">NEW YORK (AP) â Emma Watson is the favorite celebrity bait for cyber criminals trying to lure Internet users.

McAfee said Monday that the "Harry Potter" star is the "most dangerous" celebrity to search for online. That's because many sites use Watson to trick users into downloading malicious software or to steal personal information.

When searching for the 22-year-old Watson, there's a one-in-eight chance of landing on a malicious site.

This is the sixth time the Intel-owned security technology company has conducted the study, which was last year topped by Heidi Klum. Female celebrities are far more likely to be utilized by cyber criminals: late-night host Jimmy Kimmel was the only male in the top 20.

Others among the riskiest celebrities to search online are Jessica Biel, Eva Mendes, Selena Gomez and Halle Berry.

www.yahoo.com

Please Email Me: [email protected]</td>
</tr>
</table>
</div>

</div>
<div id="Sidebar">
<br />Select a Theme
<select name="ctl00$ThemeList" onchange="javascript:setTimeout('__doPostBack(\'ct l00$ThemeList\',\'\')', 0)" id="ThemeList">
<option selected="selected" value="Monochrome">Monochrome</option>
<option value="DarkGrey">DarkGrey</option>

</select>
<br />
<br />
<br />
<div id="Banner1_VerticalPanel">

<a href="http://p2p.wrox.com" id="Banner1_VerticalLink" target="_blank">
<img id="Banner1_Image1" src="Images/Banner120x240.gif" alt="This is a sample banner" />
</a>

</div>

</div>
<div id="Footer">
<span id="LoginName1">Logged in as BillWu</span>

<a id="LoginView1_HyperLink1" href="Management/Default.aspx">Manage Site</a> or
<a id="LoginView1_LoginStatus2" href="javascript:__doPostBack('ctl00$LoginView1$Lo ginStatus2$ctl00','')">Logout</a>

</div>
</div>

<script type='text/javascript'>new Sys.WebForms.Menu({ element: 'Menu1', disappearAfter: 500, orientation: 'horizontal', tabIndex: 0, disabled: false });</script></form>
</body>
</html>

FROM THE SOURCE CODE, YOU CAN SEE THAT EVERYTHING IS FINE, BUT WHEN I CLICK TO SEE IN BROWSER, IT LOOKS LIKE:

NEW YORK (AP) â Emma Watson is the favorite celebrity bait for cyber criminals trying to lure Internet users. McAfee said Monday that the "Harry Potter" star is the "most dangerous" celebrity to search for online. That's because many sites use Watson to trick users into downloading malicious software or to steal personal information. When searching for the 22-year-old Watson, there's a one-in-eight chance of landing on a malicious site. This is the sixth time the Intel-owned security technology company has conducted the study, which was last year topped by Heidi Klum. Female celebrities are far more likely to be utilized by cyber criminals: late-night host Jimmy Kimmel was the only male in the top 20. Others among the riskiest celebrities to search online are Jessica Biel, Eva Mendes, Selena Gomez and Halle Berry. www.yahoo.com Please Email Me: [email protected]

THERE ARE NO PARAGRAPHS, NO CSS, NO FORMAT.

WHAT CAN I DO TO SHOW THE CONTENT AT LEAST HAVING PARAGRAPHS.

I am looking forward to your news!

Thanks a lot!

Guanghua Wu

From Beijing, China