Category: C#

DetailsView Rich Data Control

Introduction:

In this article we are going to discuss about DetailsView data control.  In ASP.NET 2.0, DetailsView is a data-bound control that renders a single record at a time from its associated data source. It can optionally provide paging buttons to navigate between records, and a command bar to execute basic operations on the current record (Insert, Update, Delete). DetailsView generates a user interface similar to the Form View of a Microsoft Access database, and is typically used for updating/deleting any currently displayed record or for inserting new records.  The difference between the DetailsView and FormView is their support for templates. The DetailsView is build out of field objects, in the same way that the Grid View is build out of column objects.

You can configure the DetailsView control to display a Delete and an Insert button so that you can delete the corresponding data record from the data source or insert a new data record. Similar to the AutoGenerateInsertButton property, when the  AutoGenerateInsertButton property is set to true on the DetaillsView control, it renders a New button. When the New button is clicked, the DetaillsView control’s CurrentMode property changes to Insert. The DetaillsView control renders appropriate UI input controls for each bound field, unless the InsertVisible property of the bound field is set to false.

I am going to show use of all command bar in details.

NOTE I am using northwind database for this sample.

1

Figure 1: is showing one records at a time and paging is enabled.

2

Figure 2: when click on new command bar then should be look like this. Here you can insert record in database.

3

Figure 3: You can update existing record using update command bar.

So don’t you think it’s very useful control. I did not write one like code during insert, delete, update. For more information I am writing .aspx page code and attaching my sample application you need to only change connection string in web.config. And I am using SqlDataSource. You can use whatever you want according to your need.

. aspx code

DetailsView:

<asp:DetailsView ID=”DetailsView1″ runat=”server” Height=”50px”

Width=”532px” AllowPaging=”True” AutoGenerateRows=”False”

CellPadding=”4″ DataKeyNames=”EmployeeID” DataSourceID=”SqlDataSource1″

ForeColor=”#333333″ GridLines=”None” AutoGenerateDeleteButton=”True”

AutoGenerateEditButton=”True” AutoGenerateInsertButton=”True”>

<FooterStyle BackColor=”#990000″ Font-Bold=”True” ForeColor=”White” />

<CommandRowStyle BackColor=”#FFFFC0″ Font-Bold=”True” />

<RowStyle BackColor=”#FFFBD6″ ForeColor=”#333333″ />

<PagerStyle BackColor=”#FFCC66″ Font-Names=”Georgia” Font-Size=”Medium”ForeColor=”#333333″

HorizontalAlign=”Center” />

<Fields>

<asp:BoundField DataField=”EmployeeID” HeaderText=”EmployeeID”InsertVisible=”False” ReadOnly=”True” SortExpression=”EmployeeID” />

<asp:BoundField DataField=”LastName” HeaderText=”LastName”SortExpression=”LastName” />

<asp:BoundField DataField=”FirstName” HeaderText=”FirstName”SortExpression=”FirstName” />

<asp:BoundField DataField=”Title” HeaderText=”Title” SortExpression=”Title” />

<asp:BoundField DataField=”TitleOfCourtesy” HeaderText=”TitleOfCourtesy”SortExpression=”TitleOfCourtesy” />

<asp:BoundField DataField=”BirthDate” HeaderText=”BirthDate”SortExpression=”BirthDate” />

<asp:BoundField DataField=”HireDate” HeaderText=”HireDate” SortExpression=”HireDate”/>

<asp:BoundField DataField=”Address” HeaderText=”Address” SortExpression=”Address”/>

<asp:BoundField DataField=”City” HeaderText=”City” SortExpression=”City” />

<asp:BoundField DataField=”Region” HeaderText=”Region” SortExpression=”Region” />

<asp:BoundField DataField=”PostalCode” HeaderText=”PostalCode”SortExpression=”PostalCode” />

<asp:BoundField DataField=”Country” HeaderText=”Country” SortExpression=”Country” />

<asp:BoundField DataField=”HomePhone” HeaderText=”HomePhone”SortExpression=”HomePhone” />

<asp:BoundField DataField=”Extension” HeaderText=”Extension”SortExpression=”Extension” />

<asp:BoundField DataField=”Notes” HeaderText=”Notes” SortExpression=”Notes” />

</Fields>

<FieldHeaderStyle BackColor=”#FFFF99″ Font-Bold=”True” />

<HeaderStyle BackColor=”#990000″ Font-Bold=”True” Font-Names=”Georgia”ForeColor=”White” />

<AlternatingRowStyle BackColor=”White” />

<EditRowStyle Font-Names=”Georgia” Font-Size=”Small” />

</asp:DetailsView>

SqlDataSource:

<asp:SqlDataSource ID=”SqlDataSource1″ runat=”server” ConnectionString=”<%$ ConnectionStrings:NorthwindConnectionString %>”

SelectCommand=”SELECT * FROM [Employees] ORDER BY [EmployeeID]”

DeleteCommand=”DELETE FROM [Employees] WHERE EmployeeID = @EmployeeID”

InsertCommand = “INSERT INTO [Employees] ([LastName], [FirstName], [Title], [TitleOfCourtesy], [BirthDate], [HireDate], [Address], [City],[Region], [PostalCode], [Country], [HomePhone], [Extension], [Notes]) VALUES (@LastName, @FirstName, @Title, @TitleOfCourtesy, @BirthDate, @HireDate, @Address, @City, @Region, @PostalCode, @Country, @HomePhone, @Extension, @Notes)”

UpdateCommand = “UPDATE [Employees] SET [LastName] = @LastName, [FirstName] = @FirstName, [Title] = @Title, [TitleOfCourtesy] = @TitleOfCourtesy, [BirthDate] = @BirthDate, [HireDate] = @HireDate,[Address] = @Address, [City] = @City, [Region] = @Region, [PostalCode] = @PostalCode, [Country] = @Country, [HomePhone] = @HomePhone, [Extension] = @Extension, [Notes] = @Notes  WHERE [EmployeeID] = @EmployeeID”>

<DeleteParameters>

<asp:Parameter Name=”EmployeeID” Type=”int32″  />

</DeleteParameters>

<InsertParameters>

<asp:Parameter Name=”LastName” Type=”String”  />

<asp:Parameter Name=”FirstName” Type=”String”  />

<asp:Parameter Name=”Title” Type=”String”  />

<asp:Parameter Name=”TitleOfCourtesy” Type=”String”  />

<asp:Parameter Name=”BirthDate” Type=”datetime”  />

<asp:Parameter Name=”HireDate” Type=”datetime”  />

<asp:Parameter Name=”Address” Type=”String”  />

<asp:Parameter Name=”City” Type=”String”  />

<asp:Parameter Name=”Region” Type=”String”  />

<asp:Parameter Name=”PostalCode” Type=”String”  />

<asp:Parameter Name=”Country” Type=”String”  />

<asp:Parameter Name=”HomePhone” Type=”String”  />

<asp:Parameter Name=”Extension” Type=”String”  />

<asp:Parameter Name=”Notes” Type=”String”  />

<asp:Parameter Name=”ReportsTo” Type=”int32″  />

<asp:Parameter Name=”PhotoPath” Type=”String”  />

</InsertParameters>

<UpdateParameters>

<asp:Parameter Name=”EmployeeID” Type=”int32″  />

<asp:Parameter Name=”LastName” Type=”String”  />

<asp:Parameter Name=”FirstName” Type=”String”  />

<asp:Parameter Name=”Title” Type=”String”  />

<asp:Parameter Name=”TitleOfCourtesy” Type=”String”  />

<asp:Parameter Name=”BirthDate” Type=”datetime”  />

<asp:Parameter Name=”HireDate” Type=”datetime”  />

<asp:Parameter Name=”Address” Type=”String”  />

<asp:Parameter Name=”City” Type=”String”  />

<asp:Parameter Name=”Region” Type=”String”  />

<asp:Parameter Name=”PostalCode” Type=”String”  />

<asp:Parameter Name=”Country” Type=”String”  />

<asp:Parameter Name=”HomePhone” Type=”String”  />

<asp:Parameter Name=”Extension” Type=”String”  />

<asp:Parameter Name=”Notes” Type=”String”  />

<asp:Parameter Name=”ReportsTo” Type=”int32″  />

<asp:Parameter Name=”PhotoPath” Type=”String”  />

</UpdateParameters>

</asp:SqlDataSource>

So what are you waiting for just implement this control.

Advertisements

Ajax Always Visible Control Extender

In this article I am going to discuss an Ajax control named ‘AlwaysVisibleControlExtender’ and how to use it in ASP.Net 2.0.

AlwaysVisibleControlExtender is used to define area of content on user interface to remain visible no matter how the user scrolls around the rest of the content of the page. The AlwaysVisibleControl is a simple extender allowing you to pin controls to the page so that they appear to float over the background body content when it is scrolled or resized. It targets any ASP.NET control and always keeps the position a specified distance from the desired horizontal and vertical sides. I am using a panel that will be visible all the time when you will scroll page.

Ok let’s start from beginning, first of all Open Microsoft Visual Studio2005 and create a new website in ASP.NET Enabled Website.

SnapShot 1:

There should be already a control named ScriptManager. Now add AjaxControl Toolkit in your Bin directory. Drag and drop a Panel control on page, and put all contents which you want to be visible all the time on the page; it doesn’t matter whether the page is scrolling or not. Now drag and drop AlwaysVisibleControlExtender control from Toolbox and set TargetControlID to that PanelID. For testing whether it’s working or not, put lots of contents on your page.

Here is .aspx code:
<asp:ScriptManager ID=”ScriptManager1″ runat=”server” />

<asp:Panel ID=”Panel1″ BorderStyle=solid BorderWidth=2 runat=”server” Height=”100px”Width=”200px”    BackColor=yellow BorderColor=red>

<p>

<span style=”font-size: 10pt; font-family: Tahoma”>

<strong>Message:</strong>

</span>

</p>

<div>

<span style=”font-size: 10pt”>

<span style=”font-family: Tahoma”>

This Panel will visible all the time when you will scroll the page.

</span>

</span>

</div>

<p>

<span style=”font-size: 10pt”>

<strong>

<span style=”font-family: Verdana”>Current Time:

</span>

</strong>

</span>

<asp:Label ID=”Label1″ runat=”server” Font-Bold=”True” Font-Names=”Verdana” Font-Size=”10pt”>

</asp:Label>

</p>

</asp:Panel>

<div>

<cc1:alwaysvisiblecontrolextender ScrollEffectDuration=”.1″ HorizontalSide=RightHorizontalOffset=10
VerticalSide=”Middle” VerticalOffset=”10″ TargetControlID=”Panel1″

id=”AlwaysVisibleControlExtender1″ runat=”server”>

</cc1:alwaysvisiblecontrolextender>

</div>

Snapshot 2:

Working with 2D Graphics in WPF

Hey guys, in this article I am going explain how to draw home with 2D drawings in WPF.

This topic provides an overview of 3-D functionality in the Windows Presentation Foundation (WPF) graphics system. The WPF 3-D implementation allows developers to draw, transform, and animate 3-D graphics in both markup and procedural code, using the same capabilities afforded by the platform to 2-D graphics. Developers can combine 2-D and 3-D graphics to create rich controls, provide complex illustrations of data, or enhance the user experience of an application’s interface. 3-D support in WPF is not designed to provide a full-featured game-development platform. Windows Presentation Foundation 3-D classes allow developers to create 3D models in Windows applications as a part of GUI.

Creating 3D Models involves following features:

  1. Creating 3D surfaces by defining more number of triangular surfaces
  2. Assigning Material property for the 3D model
  3. Creating light sources
  4. Creating camera to visualize the 3D model from different angle.
  5. Animating the models
  6. 3D graphics is to produce 2D images from 3D models suitable for displaying on an output such as your computer screen.

Here is snap shot.

3DGraphics

Here is design:

<Grid>

<Image>

<Image.Source>

<DrawingImage>

<DrawingImage.Drawing>

<DrawingGroup x:Name=”House”>

<GeometryDrawing x:Name=”Front” Brush=”Orange” Geometry=”M0,260 L0,600 L110,670 L110,500 L190,550 L190,710 L300,775 L300,430 L150,175″>

</GeometryDrawing>

<GeometryDrawing x:Name=”Side” Brush=”Blue” Geometry=”M300, 430 L300, 775 L600, 600 L600, 260″>

</GeometryDrawing>

<GeometryDrawing x:Name=”Roof” Brush=”Yellow” Geometry=”M150,175 L300, 430 L600, 260 L450, 0″>

</GeometryDrawing>

</DrawingGroup>

</DrawingImage.Drawing>

</DrawingImage>

</Image.Source>

</Image>

</Grid>

Expander Control in WPF

In this article, I am going to explain how to use the Expander control available in WPF.

An Expander control is used to wrap or expand the content of items. You may have noticed some websites provide functionalty to close and open some controls. This can be achieved in WPF using the Expander control.

Let’s say, I have a ListBox control. The ItemTemplate for the items in the ListBox uses an Expander to wrap the contents of the item.  If I expand an item in the list, the ListBox expands to handle the new height of one of its items.  If I collapse that item, the ListBox’s height doesn’t adjust automatically.  I need the ListBox to reclaim that space so that my dialog looks correct. In this article I am using ListBox control.
See the attached source code for more details.

Here are few snapshots of this control.

Figure 1.

This snapshot is before the items in the list are expanded.

Figure 2.

This snapshot is taken after the items in the ListBox are expanded.

The following XAML code creates the Expander control at design time. Copy and paste this code in your application.

<Expander Background=”DarkGreen”  x:Name=”Expander1″ Header=”Expander1″>

<StackPanel Background=”Blue”>

<Expander Background=”Red”  Header=”Expander2″>

<ListBox Background=”Chocolate”  Name=”listbox11″>

<ListBoxItem>

<TextBlock>raj beniwal</TextBlock>

</ListBoxItem>

<ListBoxItem Background=”Blue”>

<StackPanel Background=”Yellow”>

<TextBlock>dinesh kumar</TextBlock>

<Expander Background=”Pink” Header=”Expander3″>

<ListBox Name=”list2″>

<ListBoxItem>

<TextBlock>rahul saxena</TextBlock>

</ListBoxItem>

<ListBoxItem>

<TextBlock>naresh kumar</TextBlock>

</ListBoxItem>

<ListBoxItem>

<TextBlock>suhel</TextBlock>

</ListBoxItem>

<ListBoxItem>

<TextBlock>steve</TextBlock>

</ListBoxItem>

<ListBoxItem>

<TextBlock>varman</TextBlock>

</ListBoxItem>

</ListBox>

</Expander>

</StackPanel>

</ListBoxItem>

</ListBox>

</Expander>

</StackPanel>

</Expander>

JavaScript Calendar Control in ASP.NET 2.0

In this article, I am going to explain, how we can use a JavaScript Calendar control in ASP.NET 2.0. In this article I am using a JavaScript file (Calendar.js) and a CSS file (Calendar.css). JavaScript file has all functions and methods, which are used in calendar and CSS file has all calendar style sheets.

You can call JavaScript file on page like this:

<script language=”javascript” src=Calendar.js type=”text/javascript”></script>

and stylesheet file like this:

<link href=Calendar.css rel=”stylesheet” type=”text/css”>

Here is a snapshot of Calendar control.

showcalendar
Figure 1:

You can call JavaScript file on a Button click event handler.

Auto Refresh Data on Page Using AJAX

Hi this is my first article on C# corner. I have some good topics in my mind, stay tuned.

In this article, I explain how to auto-refresh data on an ASP.NET page after a certain interval using AJAX UpdatePanel and other controls.  I am using some AJAX controls and using a SQL Server database and a Data Grid control. The Database name is Northwind. In this application my interval time for refresh data is 30 seconds. You can change your time by the times interval property.

Here is a snapshot:

This code is for binding data:

public void BindData()

{

con = new SqlConnection(“Initial Catalog=Northwind; Data Source=localhost; Uid=sa; pwd=;”);

cmd.CommandText = “select * from Employees “;

cmd.Connection = con;

con.Open();

da = new SqlDataAdapter(cmd);

da.Fill(ds);

cmd.ExecuteNonQuery();

GridData.DataSource = ds;

GridData.DataBind();

}

You can check your current time on page load. Write this code:

MyLabel.Text = System.DateTime.Now.ToString();
BindData();

And the grid refresh time is:

protected void Timer1_Tick(object sender, EventArgs e)

{

Label1.Text = “Grid Refreshed at: ” + DateTime.Now.ToLongTimeString();

}

Here is the HTML design code:

<form id=”form1″ runat=”server”>

<asp:Label ID=”Label2″ runat=”server” Text=”This is Time, When The Full Page Load :” Font-Bold=”true”></asp:Label>&nbsp;

<asp:Label ID=”MyLabel” runat=”server”></asp:Label><br /><br />

<asp:ScriptManager ID=”ScriptManager1″ runat=”server” />

<div>

<asp:Timer ID=”Timer1″ OnTick=”Timer1_Tick” runat=”server” Interval=”30000″>

</asp:Timer>

</div>

<asp:UpdatePanel ID=”UpdatePanel1″ UpdateMode=”Conditional” runat=”server”>

<Triggers>

<asp:AsyncPostBackTrigger ControlID=”Timer1″ EventName=”Tick” />

</Triggers>

<ContentTemplate>

<asp:Label ID=”Label3″ runat=”server” Text=”This is The Time when Only Data Grid will Referesh :”Font-Bold=”true”></asp:Label>&nbsp;

<asp:Label ID=”Label1″ runat=”server” Text=”Grid not refreshed yet.”></asp:Label><br />

<asp:Label ID=”Label4″ runat=”server” Text=”(Grid Will Referesh after Every 30 Sec)” Font-Bold=”true”></asp:Label>&nbsp;

<br /><br />

<asp:DataGrid ID=GridData runat=”server” Width=”100%” GridLines=”Both” HeaderStyle-BackColor=”#999999″ AutoGenerateColumns=”false”>

<Columns>

<asp:BoundColumn DataField=”EmployeeID” HeaderText=”Employee ID”></asp:BoundColumn>

<asp:BoundColumn DataField=”FirstName” HeaderText=”First Name”></asp:BoundColumn>

<asp:BoundColumn DataField=”LastName” HeaderText=”Last Name”></asp:BoundColumn>

<asp:BoundColumn DataField=”City” HeaderText=”City”></asp:BoundColumn>

</Columns>

</asp:DataGrid>

</ContentTemplate>

</asp:UpdatePanel>

</form>

I hope you will like this article. If yes then drop me a line or write a comment below in the comments section.