Chapter 14 ListView

MarshallN · August 26th, 2012, 11:40 AM

Dear fellow programmers,
47 readers have read my 8/18/2012 posting, "Chapter 14 ListView", but I have not received any suggestions.

In the Try It Out, step 16, p510, when I get to the point on ManagePhotoAlbum.aspx and click on the Insert button, I get an error message instead of seeing the ListView showing my psuedo picture.

So, on 8/22, I decided to create a new website, a database with only the two tables PhotoAlbum and Pictures, and go through every step from there. I still get the same error message:
The INSERT statement conflicted with the FOREIGN KEY constraint "FK_Picture_PhotoAlbum".

PLEASE help.

Here are the steps I took:
Create New WebSite2012-08-22:
> in VWD, File > New File > see New Web Site dialog
> VB, ASP.NET Empty Web Site, Web Location = C:\PKB\TheTeachingEngine\WebDevelopmentLearningASP .Net\WebSite2012-08-22
> OK

Create DB and Tables:
> in VWD, WebSite2012-08-22, Sol Expl > right click WebSite2012-08-22
> Add ASP.NET Folder > App_Data > in Sol Expl, right click App_Data folder
> Add New item
> VB, SQL Server Database, Db2012-08-22.mdf, click Add
> in DbExpl, right click Tables > Add New Table
> in properties, Name = PhotoAlbum (changed from Table1)
> in main window, Column Name = Id, Data Type = int, uncheck Allow Nulls
> click left arrow to select Id column
> click gold key to set as Primary Key
> in Column Properties, expand Identity Specification
> set IsIdentity = Yes
> automatically, Identity Seed = 1 and Identity Increment = 1
> add second column: Column Name = Name, Data Type = nvarchar(100), uncheck Allow Nulls
> save and repeat for Picture table with these columns:
Id, int, uncheck Allow Nulls, primary key, IsIdentity = Yes;
Description, nvarchar(300), uncheck Allow Nulls;
ToolTip, nvarchar(50), uncheck Allow Nulls;
ImageUrl, nvarchar(200), uncheck Allow Nulls;
PhotoAlbumId, int, uncheck Allow Nulls (to be foreign key).
> save and close.

Foreign Key:
Now, to make PhotoAlbumID a foreign key:
> in Db Expl, expand Db2012-08-22.mdf
> right click Database Diagrams > Add New Diagram
> see: "Server does not have objects for diagramming. Create them?"
> Yes
> see Add Table dialog
> with PhotoAlbum selected, click Add
> Picture table is selected > Add > Close
> see: Database Diagram has the PhotoAlbum and Picture tables
> drag PhotoAlbum.Id to Picture.PhotoAlbumId
> see: Tables and Columns dialog
with Relationship name = FK_Picture_PhotoAlbum,
Primary = PhotoAlbum.Id, and Foreign Key = Picture.PhotoAlbumId:
> OK
> see: Foreign Key Relationship dialog > OK
> see: Database Diagram has Foreign Key Relationship drawn
with gold key pointing to PhotoAlbum and infinity pointing Picture
> save
> see: Choose Name dialog with Diagram Name = PhotoAlbum_Picture:
> OK
> see: Save dialog with tables = PhotoAlbum and Picture
and Warn About Tables Affected checked
> Yes
> see: Database Diagram again
> Save and Close.

Entity Framework Model:
> right click WebSite2012-08-22 > Add ASP.NET folder > App_Code
> right click App_Code folder > Add New Item
> VB, ADO.NET Entity Data Model, Name = WebSite2012-08-22.edmx >Add
> see Entity Data Model Wizard > click Generate From Database > Next
> see: Choose Your Data Connection dialog
with Connection = Db2012-08-22.mdf, Save in Web.Config checked,
As = WebSite20120822Entities
Note: apparently, dashes are not allowed in Entity connection string name.
> Next > after hesitation, see: Choose Your Database Objects dialog
> check Tables, check Pluralize Singularize Names,
check Include Foreign Keys, Model Namespace = WebSite20120822Model
Note: apparently, dashes are not allowed in Model Namespace.
> Finish
> see: Entity Framework diagram App_Code/WebSite2012-08-22.edmx
with PhotoAlbum and Picture tables
and the line connecting them showing the tooltip
"Source: PhotoAlbum(1), Target: Picture(*)".
> Note: Entity Set Names automatcially set to Pictures and PhotoAlbums.

web.config:

Code:

<?xml version="1.0" encoding="utf-8"?>
<!--
  For more information on how to configure your ASP.NET application, please visit
  http://go.microsoft.com/fwlink/?LinkId=169433
  -->
<configuration>
  <system.web>
    <compilation debug="false" strict="false" explicit="true" targetFramework="4.0">
      <assemblies>
        <add assembly="System.Security, Version=4.0.0.0, Culture=neutral, PublicKeyToken=B03F5F7F11D50A3A" />
        <add assembly="System.Data.Entity, Version=4.0.0.0, Culture=neutral, PublicKeyToken=B77A5C561934E089" />
        <add assembly="System.Data.Entity.Design, Version=4.0.0.0, Culture=neutral, PublicKeyToken=B77A5C561934E089" />
      </assemblies>
      <buildProviders>
        <add extension=".edmx" type="System.Data.Entity.Design.AspNet.EntityDesignerBuildProvider" />
      </buildProviders>
    </compilation>
  </system.web>
  <connectionStrings>
    <add name="WebSite20120822Entities" connectionString="metadata=res://*/App_Code.WebSite2012-08-22.csdl|res://*/App_Code.WebSite2012-08-22.ssdl|res://*/App_Code.WebSite2012-08-22.msl;provider=System.Data.SqlClient;provider connection string=&quot;Data Source=.\SQLEXPRESS;AttachDbFilename=|DataDirectory|\Db2012-08-22.mdf;Integrated Security=True;Connect Timeout=30;User Instance=True;MultipleActiveResultSets=True&quot;" providerName="System.Data.EntityClient" />
  </connectionStrings>
</configuration>

NewPhotoAlbum.aspx:
> right click WebSite2012-08-22 > Add New Item
> VB, WebForm, NewPhotoAlbum.aspx > Add
> in source, title = "Create New Photo Album"
> in design, drag Toolbox/Data/DetailsView to <div>
> Smart Tasks panel > Choose Data Source = <New Data Source>
> see Data Source Configuration wizard
> Entity, Specify an ID = EntityDataSource1 > OK
> see Configure ObjectContext dialog
> Named Connection dropdown list = WebSite20120822Entities
> Next
> see Configure Data Selection dialog > EntitySetName = PhotoAlbums
> check Enable Automatic Inserts (to add behavior)
> Finish
> see NewPhotoAlbum.aspx in design view
> in Smart Tasks panel, Refresh Schema
Note: the columns in DetailsView are now named by field.
> in Smart Tasks, check Enable Inserting
> in DetailsView1/properties grid, DefaultMode=Insert
> in source, add Id column property InsertVisible="False"
> in design, select EntityDataSource1 to open its property grid
> Events tab (gold lightning bolt) > double click Inserted event
> see EntityDataSource1_Inserted event
> at top of code file, Imports WebSite20120822Model
> in EntityDataSource1_Inserted, add this code to direct user to another page after inserting a PhotoAlbum:

Code:

Imports WebSite20120822Model

Partial Class NewPhotoAlbum
    Inherits System.Web.UI.Page

  Protected Sub EntityDataSource1_Inserted(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.EntityDataSourceChangedEventArgs) Handles EntityDataSource1.Inserted
    Dim myPhotoAlbum As PhotoAlbum = CType(e.Entity, PhotoAlbum)
    Response.Redirect(String.Format("ManagePhotoAlbum.aspx?PhotoAlbumId{0}",
                                     myPhotoAlbum.Id.ToString()))
  End Sub
End Class

ManagePhotoAlbum.aspx:
> right click WebSite2012-08-22 > Add New Item
> VB, MyBasePage, ManagePhotoAlbum.aspx > Add
> set Title="Manage Photo Album"
> in design, drag Toolbox/Data/ListView to <div>
> in Smart Tasks, Choose Data Source = <New data source>
> see Data Source Configuration wizard > Entity, EntityDataSource1
> OK
> see Configure ObjectContext dialog
> Named Connection = WebSite20120822Entities
> Next
> see Configure Data Selection dialog
of Entity DataSource1's Configure Data Source wizard
> EntitySetName = Pictures
> check Automatic Inserts, check Automatic Deletes > Finish
> back in design, select (click) EntityDataSource1
> in properties grid, click Where > click elipses to open its Expression Editor
Recall: Picture.PhotoAlbumId is the foreign key pointing to PhotoAlbum.Id;
ManagePhotoAlbum.aspx receives the PhotoAlbum.Id through the querystring when it is called so it can filter the photos for the correct PhotoAlbum.
> click Add Parameter > enter PhotoAlbumID
> Parameter Source = QueryString > QueryStringField = PhotoAlbumId
> Where Expression (at top) = it.PhotoAlbum.Id = @photoAlbumId
> Show Advanced Properties > Type = Int32
> OK > see ManagePhotoAlbum.aspx again
> in design, select (click) ListView1 > Smart Tasks
> Refresh Schema â wait a moment â reopen the Smart Tasks panel
> see Configure ListView now an available option on Smart Tasks:
> click Configure ListView > see Configure ListView dialog
> Layout = BulletedList, enable Inserting and Deleting
> OK
> in source view, delete these templates:
AlternatingItemTemplate
EditItemTemplate
EmptyDataTemplate
ItemSeparatorTemplate
SelectedItemTemplate;
leaving
InsertItemTemplate
ItemTemplate
LayoutTemplate.
> in <LayoutTemplate>,
> in <ul> element, delete ID, runat, and style attributes
> remove empty Div below the </ul>
> add class="ItemContainer"
> in <ItemTemplate>,
> delete lines for Id, PhotoAlbumId, PhotoAlbum
> Repeat for <InsertItemTemplate>

> in design, select EntityDataSource1
> in properties grid, Events tab
> double click Inserting > see ManagePhotoAlbum.aspx.vb code
> insert Imports WebSite20120822Model and add this code:

Code:

Imports WebSite20120822Model

Partial Class ManagePhotoAlbum
    Inherits System.Web.UI.Page

  Protected Sub EntityDataSource1_Inserting(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.EntityDataSourceChangingEventArgs) Handles EntityDataSource1.Inserting
    Dim PhotoAlbumId As Integer =
      Convert.ToInt32(Request.QueryString.Get("PhotoAlbumID"))
    Dim myPicture As Picture = CType(e.Entity, Picture)
    myPicture.PhotoAlbumId = PhotoAlbumId
  End Sub
End Class

> save all

Styles.css:
> in Sol Expl, right click WebSite2012-08-22 > Add New Item
> VB, Text File, name = Styles.css > Add
> add these rule sets:

Code:

.ItemContainer
{
  width: 600px;
  list-style-type: none;
}
.ItemContainer li
{
  height: 300px;
  width: 200px;
  float: left;
}
.ItemContainer li img
{
  width: 180px;
  margin: 10px, 20px, 10px, 0;
}

> add this link to <head> section of each aspx:

Code:

    <link href="../Styles.css" rel="stylesheet" type="text/css" />

Result:
NewPhotoAlbum.aspx opens in IE correctly.
ManagePhotoAlbum.aspx opens in IE correctly.
However, Inserting a picture record results in same error message again!