Click here to Skip to main content
15,895,740 members
Articles / Web Development / ASP.NET

Azure Blob and Entity Table Integration, Extending the Thumbnail Sample

Rate me:
Please Sign up or sign in to vote.
4.54/5 (5 votes)
19 May 2010CPOL7 min read 31.9K   330   11  
This article describes the concepts for doing CRUD (Create, Read, Update, Delete) operations on Windows Azure Tables and how table data can interact with blobs.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Thumbnails_WebRole._Default" %>

<!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 id="Head1" runat="server">
    <title>Photo Gallery</title>
    <style type="text/css">
        .style3
        {
            width: 61px;
        }
    </style>
</head>
<body style="background-color:#EEE8AA" >
<div id="TitleBar" style ="width:100%; background-color:#FFA500; height:200">
<h1>Azure ThumbNail_E1</h1>
    <h3>Version 1, 04/19/2010</h3>
</div>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="sm1" runat="server" />
    <table>
        <tr>
            <td>
            <div id="File_Load" style="background-color:#F0E68C; width:500px" >
                <table>
                    <tr>
                        <td class="style3">
                            Upload  
                        </td>
                        <td>
                            <asp:FileUpload ID="upload" runat="server"  Width="219px" /> 
                        </td>
                         
                    </tr>
                    
                 </table>
               <table>
               <tr>
                <td >
                Name
                </td>
                <td>
                <asp:TextBox ID ="TextBoxName" runat="server" Width="387px" ></asp:TextBox>
                </td>
                </tr>
                <tr>
                <td >
                Date
                </td>
                <td>
                <asp:TextBox ID ="TextBoxDate" runat="server" Width="384px"></asp:TextBox>
                </td>
                
                </tr>
               
                <tr> 
                <td>
                Comment
                </td>
                <td>
                <asp:TextBox ID ="TextBoxComment" 
                        runat="server" Width="386px"></asp:TextBox>
                </td>
                </tr>
               </table>
                <table>
                <tr> <td>
                <asp:Button ID="submitButton" runat="server" Text="Submit" OnClick="submitButton_Click" />
                 </td>
                 <td>
                 </td>
                 
                 </tr>
            </table>
            </div>
            </td>
           <td >
             <div id="Edit_Table" style="background-color:#E6E6FA">
        <asp:UpdatePanel ID="UpdateEditPanel1" runat="server" UpdateMode="Conditional" >
        <ContentTemplate>
         <table style="width: 601px">
           <tr>
                 <td>
                     Row Key (Read Only)</td>
                     <td>
                  <asp:TextBox ID="TextBoxRowKeyEdit" runat="server" ReadOnly="true" 
                         Width="443px" BackColor="#D4D0C8"></asp:TextBox>
                 </td>
           </tr>
           <tr>
                <td>
                    Name 
                    </td> 
                 <td>  
                    <asp:TextBox ID ="TextBoxNameEdit" runat="server" Width="347px"></asp:TextBox>
                </td>
           </tr> 
           <tr>
               <td>
                   Date
                   </td>
                   <td>
                   
                    <asp:TextBox ID="TextBoxDateEdit" runat="server" Width="351px"></asp:TextBox>
               </td>
           <tr>
                 <td>
                     Comment 
                     </td>
                     <td>
                     <asp:TextBox ID="TextBoxCommentEdit" runat="server" Width="351px"></asp:TextBox>
                 </td>
           </tr>
    
            <tr> 
                <td>
                <asp:Button ID="SubmitChanges" runat="server" Text="Submit Changes" OnClick="SubmitChangesButton_Click" />
                </td>
            </tr>
         </table>
        
        </ContentTemplate>
        </asp:UpdatePanel>
        </div>
           </td>
         </tr>
        </table>
    <div id="pictures">
    <table>
    <tr>
    <td>
       <asp:Button ID="DisplayData" runat="server" Text="Display Data" OnClick="DisplayData_Button_Click" />
     </td>
    </tr>
    <tr>
    <td>
    <div id= "Data_List" style="background-color:#F4A460">
       
        <asp:UpdatePanel ID="up1" runat="server" UpdateMode="Conditional">
            <ContentTemplate>
            <table border = "5px">
            <asp:ListView ID="thumbnails" runat="server"  >
            <LayoutTemplate>
                <asp:Image ID="itemPlaceholder" runat="server" />
            </LayoutTemplate>
            
                 <ItemTemplate>
                    <tr   style = "border:5px" >
                    <td>
                    <%# Eval("PhotoName") %><br />
                   
                    <%# DataBinder.Eval(Container.DataItem, "PhotoTakenDate", "{0:MM.dd.yyyy}")%>
                    
                    <br />
                    <%# Eval("PhotoComment") %>
                    </td>
                   
                    <td>
                    <asp:ImageButton ID="photoimagebutton" runat="server" ImageUrl='<%# Eval("Url") %>' 
                    OnCommand="Select_Image_Command" CommandName="Select_Image" 
                    CommandArgument='<%# Eval("rowKey") %>'   />
                    </td>
                    <td>
                    <asp:Button runat="server"   Text="Delete Data" ID="Delete_Data"  
                    OnCommand="Delete_Data_Command" CommandName="Delete_Data" 
                    CommandArgument='<%# Eval("rowKey") %>'   />
                    </td>
                    <td>
                    <asp:Button runat="server"   Text="Update Data" ID="Update_Data"  
                    OnCommand="Update_Data_Command" CommandName="Update_Data" 
                    CommandArgument='<%# Eval("rowKey") %>'   />
                    </td>
                   
                    </tr> 
                </ItemTemplate>
         

            </asp:ListView>
                
             </table>
            </ContentTemplate>
         </asp:UpdatePanel>
       
    </div>
    </td>
    <td  valign="top">
   
            <div id="BigPicture">
            <asp:UpdatePanel ID="UpdateSelectedImagePanel1" runat="server" UpdateMode="Conditional" >
            <ContentTemplate>
           
             <asp:Image ID="SelectedImage" ImageAlign= "Top" runat="server" Width="300" Height="200"  ImageUrl = "Images/Blank.jpg"/>
            <br /> Click on Thumbnail to see a larger image
            </ContentTemplate>
            </asp:UpdatePanel>
            </div>
            </td>
    
    </tr>
    </table>
   </div>
   
  
    </form>
</body>
</html>

By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.

If a file you wish to view isn't highlighted, and is a text file (not binary), please let us know and we'll add colourisation support for it.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Architect
United States United States
Vijay Kumar: Architect, Programmer with expertise and interest in Azure, .net, Silverlight, C#, WCF, MVC, databases and mobile development. Concentrating on Windows Phone 7 and Windows Azure development. Lived in California for many years and done many exciting projects in dotnet and Windows platforms. Moved to Raleigh (RTP), North Carolina recently and available for consulting.  Blog http://Silverazure.blogspot.com.

Comments and Discussions