update all styles for edit

These will be reused for insert

src/Web/Catalog.WebForms/Catalog.WebForms/Catalog.WebForms.csproj

@@ -56,6 +56,7 @@
     <Reference Include="System.Data" />
     <Reference Include="System.Core" />
     <Reference Include="System.Data.DataSetExtensions" />
+    <Reference Include="System.Data.Entity" />
     <Reference Include="System.Web.Extensions" />
     <Reference Include="System.Xml.Linq" />
     <Reference Include="System.Drawing" />

src/Web/Catalog.WebForms/Catalog.WebForms/Content/app.component.css

@@ -18,3 +18,7 @@
     text-align: right;
     width: 100%;
 }
+
+.table-full-width {
+    width: 100%;
+}

src/Web/Catalog.WebForms/Catalog.WebForms/Default.aspx

@@ -4,7 +4,7 @@
 <asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
     <asp:ListView ID="catalogList" runat="server"
         DataKeyNames="Id" GroupItemCount="3"
-        ItemType="eShopOnContainers.Core.Models.Catalog.CatalogItem" SelectMethod="catalogList_GetData" DeleteMethod="catalogList_DeleteItem">
+        ItemType="eShopOnContainers.Core.Models.Catalog.CatalogItem" SelectMethod="GetCatalogDataAsync" DeleteMethod="DeleteCatalogItemAsync">
         <EmptyDataTemplate>
             <div class="row">
                 <span class="col-md-10 col-md-offset-1">There's nothing in the catalog to display at this time.

src/Web/Catalog.WebForms/Catalog.WebForms/Default.aspx.cs

@@ -33,13 +33,13 @@ namespace eShopOnContainers.Catalog.WebForms
         //     int startRowIndex
         //     out int totalRowCount
         //     string sortByExpression
-        public async Task<IEnumerable<CatalogItem>> catalogList_GetData()
+        public async Task<IEnumerable<CatalogItem>> GetCatalogDataAsync()
         {
             return await catalog?.GetCatalogAsync();
         }
 
         // The id parameter name should match the DataKeyNames value set on the control
-        public async Task catalogList_DeleteItem(int id)
+        public async Task DeleteCatalogItemAsync(int id)
         {
             //TODO: Call the service.
         }

src/Web/Catalog.WebForms/Catalog.WebForms/EditCatalogItem.aspx

@@ -1,41 +1,61 @@
 <%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="EditCatalogItem.aspx.cs" Inherits="eShopOnContainers.Catalog.WebForms.EditCatalogItem" Async="true" %>
+
 <asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
-    <asp:FormView ID="EditCatalogItemForm" runat="server" DefaultMode="Edit" 
-        ItemType="eShopOnContainers.Core.Models.Catalog.CatalogItem" 
-        SelectMethod="EditCatalogItemForm_GetItem" 
-        UpdateMethod="EditCatalogItemForm_UpdateItem" 
-        InsertMethod="EditCatalogItemForm_InsertItem">
+    <asp:FormView ID="EditCatalogItemForm" runat="server" DefaultMode="Edit"
+        ItemType="eShopOnContainers.Core.Models.Catalog.CatalogItem" DataKeyNames="Id"
+        SelectMethod="GetCatalogItemAsync"
+        UpdateMethod="UpdateCatalogItemAsync"
+        InsertMethod="InsertCatalogItemAsync" 
+        CssClass="table-compact table-full-width">
         <EditItemTemplate>
-                <section>
-                    <div class="col-md-6">
-                        <form>
-                            <div class="form-group">
-                                <label class="control-label form-label" for="ItemName">Name</label>
-                                <input name="ItemName" class="form-control form-input form-input-center" value="<%#Item.Name%>" />
+            <div class="row form-inline">
+                <div class="col-md-6">
+                    <img class="esh-catalog-thumbnail" src="<%#:Item.PictureUri%>"
+                        style="border: solid" />
+                </div>
+                <div class="col-md-6">
+                    <div class="container">
+                        <div class="row">
+                            <div class="col-md-12 form-group">
+                                <label>Name</label>
+                                <asp:TextBox runat="server" ID="itemName" CssClass="form-control form-input form-input-center" Text='<%# Bind("Name")%>' />
                             </div>
-                            <div class="form-group">
-                                <label class="control-label form-label" for="ItemDescription">Description</label>
-                                <input name="ItemDescription" class="form-control form-input form-input-center" value="<%#Item.Description%>" />
+                        </div>
+                        <div class="row">
+                            <div class="col-md-12 form-group">
+                                <label for="ItemDescription">Description</label>
+                                <asp:TextBox runat="server" name="ItemDescription" Width="100%" ID="ItemDescription" CssClass="form-control form-input form-input-center" Text='<%# Bind("Description")%>' />
                             </div>
-                            <div class="form-group">
-                                <label class="control-label form-label" for="ItemPrice">Price</label>
-                                <input name="ItemPrice" class="form-control form-input form-input-center" value="<%#Item.Price%>" />
+                        </div>
+                        <div class="row">
+                            <div class="col-md-12 form-group">
+                                <label for="ItemPrice">Price</label>
+                                <asp:TextBox runat="server" TextMode="Number" Width="75%" name="ItemPrice" ID="ItemPrice" CssClass="form-control form-input form-input-center" Text='<%# Bind("Price")%>' />
                             </div>
-                            <div class="form-group">
+                        </div>
+                        <div class="row">
+                            <div class="col-md-12 form-group">
                                 <label class="control-label form-label" for="ItemBrand">Brand</label>
                                 <asp:DropDownList ID="ItemBrand" runat="server" DataTextField="Brand" />
                             </div>
-                            <div class="form-group">
+                        </div>
+                        <div class="row">
+                            <div class="col-md-12 form-group">
                                 <label class="control-label form-label" for="ItemType">Type</label>
                                 <asp:DropDownList ID="ItemType" runat="server" DataTextField="Type" />
                             </div>
-                            <div class="col-md-6">
-                                This is where the picture to edit goes
+                        </div>
+                        <div class="row">
+                            <div class="col-md-6 form-group">
+                                <asp:LinkButton runat="server" Text="Update" CommandName="Update" />
+                            </div>
+                            <div class="col-md-6 form-group">
+                                <asp:LinkButton runat="server" Text="Cancel" CommandName="Cancel" />
                             </div>
-                        </form>
+                        </div>
                     </div>
-                </section>
-
+                </div>
+            </div>
         </EditItemTemplate>
     </asp:FormView>
 </asp:Content>

src/Web/Catalog.WebForms/Catalog.WebForms/EditCatalogItem.aspx.cs

@@ -32,7 +32,7 @@ namespace eShopOnContainers.Catalog.WebForms
 
         // The id parameter should match the DataKeyNames value set on the control
         // or be decorated with a value provider attribute, e.g. [QueryString]int id
-        public async Task<CatalogItem> EditCatalogItemForm_GetItem([QueryString]int id)
+        public async Task<CatalogItem> GetCatalogItemAsync([QueryString]int id)
         {
             // TODO: If null, go into insert mode.
             var itemToEdit = await catalog?.GetCatalogItemAsync(id.ToString());
@@ -40,7 +40,7 @@ namespace eShopOnContainers.Catalog.WebForms
         }
 
         // The id parameter name should match the DataKeyNames value set on the control
-        public void EditCatalogItemForm_UpdateItem(int id)
+        public void UpdateCatalogItemAsync(int id)
         {
             eShopOnContainers.Core.Models.Catalog.CatalogItem item = null;
             // Load the item here, e.g. item = MyDataLayer.Find(id);
@@ -58,7 +58,7 @@ namespace eShopOnContainers.Catalog.WebForms
             }
         }
 
-        public void EditCatalogItemForm_InsertItem()
+        public void InsertCatalogItemAsync()
         {
             var item = new eShopOnContainers.Core.Models.Catalog.CatalogItem();
             TryUpdateModel(item);

src/Web/Catalog.WebForms/Catalog.WebForms/Web.config

@@ -72,7 +72,7 @@
       <remove name="ApplicationInsightsWebTracking" />
       <add name="ApplicationInsightsWebTracking" type="Microsoft.ApplicationInsights.Web.ApplicationInsightsHttpModule, Microsoft.AI.Web" preCondition="managedHandler" />
       <!-- Use this if you are on IIS 8 and later -->
-      <add name="InjectModule" type="eShopOnContainers.Catalog.WebForms.Modules.AutoFacHttpModule, eShopOnContainers.Catalog.WebForms"/>
+      <add name="InjectModule" type="eShopOnContainers.Catalog.WebForms.Modules.AutoFacHttpModule, eShopOnContainers.Catalog.WebForms" />
     </modules>
     <validation validateIntegratedModeConfiguration="false" />
   </system.webServer>