DVXP TEdit.NET 3.0

Getting Started

This page provides a tutorial on creating an application with TEdit.NET for this first time. It is assumed that you are using Microsoft Visual Studio 2003.

In this sample, we will create a web application that can be used to view, search and edit the Products table in the Northwind database. This involves the following steps:

Create a new Web Project

Start Visual Studio. From the main menu, choose File, New Project. Choose name for your web application, such as TEditHelloWorld.



Visual Studio creates a new virtual directory named TEditHelloWorld in Internet Information Server (IIS) and creates a blank project containing a single web page named WebForm1.aspx.

Add TEdit.NET to the Visual Studio toolbox

Open the Visual Studio Toolbox window (click View Toolbox)



Open the General tab page in Toolbox, and right-click in the Toolbox window. Click Add/Remove Items from the context menu.



The Customize Toolbox window opens. Click the Browse button.



Open the folder where TEdit.NET is installed on the computer. In a default setup, this is: 
C:\Program Files\DVXP\TEdit.NET 3.0\Assemblies
and select the file: 
DVXP.DXTableEditor.dll
This file contains the TEdit.NET control.
 
After closing the the Customize Toolbox window, the TEdit.NET TableEditor control will be available on the General page in the Toolbox.

Add a TEdit.NET control to a web page

In this step, we will add a TEdit.NET control to the WebForm1.aspx page that was created by Visual Studio. In order to prevent Visual Studio from assigning a fixed size to the TEdit control, it is best to change the Page Layout of the web form from its default value of GridLayout to FlowLayout. (Also note the instructions displayed by Visual Studio in the designer area of the Web Form). To change the Page Layout, right-click in the designer area of the WebForm1.aspx page, and click Properties.

In the Document Property Pages window, change the Page Layout setting to FlowLayout.



Now, place a TEdit.NET control on the page, by dragging the TableEditor item from the toolbox to the designer area of the web page.



A TEdit.NET control is now placed on the page.



To see the changes made to the HTML code of the form, click the HTML button (next to the Design button at the bottom-left of the form). By dragging the TableEditor to the form, a @Register tag is added at the top of the file. This tag registers the TEdit.NET control for use on the page. Also  a <tedit:TableEditor>-tag was added to the page, this tag represents the TEdit.NET control.
Finally, by opening the Solution Explorer, you can see that Visual Studio has added a reference to the project to TEdit.NET dll file the TEditHelloWorld project.



Instead of adding the TableEditor control to the toolbox and dragging it onto the page, you may also find it very practical to just copy and paste the following lines into the HTML editor. Copy the following line to the top of the page:
<%@ Register TagPrefix="tedit" Namespace="DVXP.DXTableEditor" Assembly="DVXP.DXTableEditor" %>
Copy the following line inside the body of the page:
<tedit:tableeditor id="tableEditor" runat="server" ConfigFilePath="myTable.config" />
In order to activate IntelliSense inside the HTML editor, replace the <body> tag of your page by the following line:
<body xmlns:tedit="http://dvxp.com/schemas/DXTableEditorVS">

Add a database connection string to the web.config file

The table editor will not yet show any data until we have configured it to connect to a database and a database table. First of all, an appSetting needs to be defined that contains the database connection string. To create this appSetting, open the web.config file by double-clicking it in the Solution Explorer. Add an appSettings section, and an appSetting that will hold the connection string for your database. In this tutorial, we create a setting NorthwindConnectionString that points to the SQL Server Northwind database.
<appSettings>
  <add key="NorthwindConnectionString" 
      value="Initial Catalog=Northwind;Data Source=localhost;Integrated Security=SSPI" />
</appSettings>
You can copy the sample text shown above to the web.config file, right after the <configuration> tag.



In order to use Integrated Security from an ASP.NET application, you will need to provide the Windows user account that is used to run the ASP.NET application access to the database. See the instructions for the DXTrack sample application on how to do this. 

To create a custom connection string to your own database, you can use the help of the Visual Studio Server Explorer. In the View menu, click Server Explorer (Ctrl-Alt S). In order to create a connection to your database, choose Properties in the Data Connections node of the Server Explorer.



In the Provider tab-page of the Data Link window, choose the OLE DB provider that corresponds to your database. In this sample, we will connect to a SQL Server database.
 


In the Connection tab-page of the Data Link window, select the server, login-information and the database to open. In this sample, we connect to the SQL Server pubs database using the 'sa' account.
 


After the Data Link window is closed, the Server Explorer shows the selected database under the Data Connections node. If you right-click on this data connection and choose Properties from the Context Menu, the connection string will be displayed in the Properties window. Copy the value of the ConnectString property to the clipboard. This can be done by dragging over the text with the mouse, and then choose Copy from the context menu.



You can then paste the connection string into web.config file. Note if your connection uses SQL Server security, you will have to append the ";Password= mySaPassword" parameter manually to the connection string that you copied from the data connection. Also see http://www.connectionstrings.com for instructions on how to edit connection strings.

Creating a XML configuration file

The TEdit.NET control is configured to access a particular database table using an external XML configuration file. In order to create such a file, right click the TEditHelloWorld project node in the Solution Explorer, and click Add New Item.



From the Add New Item dialog, choose the file type XML File. In this sample, we will create a configuration file for the Northwind database products table, so name the file products.config. Note the choosing the file extension '.config' over '.xml' provides extra security, because ASP.NET will block download attempts of .config files.



This will create a blank XML configuration file. In order to create a TEdit.NET file, you will need to add a <tableeditor>, <settings> and <table> element to this file. The easiest way to do so, is by copying these elements from one of the sample configuration files that can be found at http://tedit.net/samples.aspx.
<?xml version="1.0" encoding="utf-8" ?>
<tableeditor xmlns="http://dvxp.com/schemas/DXTableEditor/Config">
  <settings connectionStringKey="NorthwindConnectionString" />
  <table name="Products"></table>
</tableeditor>
For this tutorial, you can copy the text shown above. Paste it into the products.config file by choosing Paste as HTML from the Edit menu. Using a regular Paste command would also paste HTML markup.



The sample configuration file instructs TEdit.NET to display the Products table from the Northwind database. The connectionStringKey attribute defines that the database connection should be obtained from the NorthwindConnectionString setting in the web.config file.



Note that the IntelliSense feature of Visual Studio makes it easy to edit TEdit.NET configuration files. Also see the TEdit.NET configuration file reference for a full description of the configuration file syntax.
 

Set the ConfigFilePath property of the TEdit.NET control

The final step that separates us from having a functional web page, is assigning the configuration file to the TEdit.NET control. To do so, open the web form in the designer mode, and enter the name of the configuration file in the ConfigFilePath property of the TEdit.NET control.



I you switch the form to HTML view, you can see that the new value of ConfigFilePath property is reflected there as well.



It is now possible to see the TEdit.NET control in action. Click View in Browser from the context menu of the web form in the solution explorer.



The browser shows contents of the orders table. Records can be searched and edited.



The layout of the page and TEdit.NET output is still based unformatted plain text. In order to create a better looking layout, a CSS style sheet file needs to be added to the project.

Adding a CSS style sheet

To create a style sheet file, it is easiest to take the style.css file that comes with the TEditNorthwind sample web site as the starting point. It is available online at the TEdit.NET web site. In order to include this file in your web-application, you can copy it from the sample folder installed on your local PC at C:\Program Files\DVXP\TEdit.NET 3.0\TEditNorthwind. From the context menu of the style.css file, click Copy.
 

 

In the Visual Studio Solution Explorer, click Paste from the context menu of the TEditHelloWorld project node. This will add the file style.css to the project.


 

<LINK href="style.css" type="text/css" rel="stylesheet">

Finally, the style sheet needs to be referenced from the web page. This is done by adding a <link> tag as shown above to the <head> section of the page. Open the web form in HTML mode, and copy and paste the line shown above into the HTML editor by using the Edit | Paste as HTML command.


 

If you now refresh the web page in the browser, the page is formatted according to the styles defined in the CSS file.


Enabling SmartNavigation

Finally, in order provide an optimal user experience, you need to change the page options smartnavigation and validateRequest. The ASP.NET feature smartnavigation prevents screen flicker, assures that the browser scrollbars retain their position between post-backs to the server, and prevents browser post-back warnings when the Back button of the browser is used.
The validateRequest feature is disabled for pages that contain a TEdit.NET control; this enables the user to enter any text into the database, including text that is similar to HTML or script code. This is safe, as the TEdit.NET prevents HTML scripts attacks by correctly encoding all text by default. 
<pages smartNavigation="true" validateRequest="false"></pages>

To apply these settings in all pages of your own site, copy the line shown above to your web.config file, right after the <system.web> tag. Rember to use the Edit | Paste as HTML command in order to prevent pasting HTML markup-tags.



The TEditHelloWorld application is now completed. It can be used to view, search and edit the data from the Northwind database products table.