$99 VS $1000+. UI Control for ASP.NET AJAX(contains chart and gridview).
Create a Simple Input in ASP.NET AJAX
Home > How to > Input Getting Started

KT.UI Input control for ASP.NET AJAX document management system can be quickly and perfectly embedded within web ASP.NET application of Visual Studio programming environment. In this manual page, users are able to get the detailed and accurate processing guides on how to create a web page that call and use PerInput component.
Quick navigation for creating PerInput web page tutorial:
  • How to create a web ASP.NET application within Visual Studio in any compatible version
  • How to embed and add the Input control to the created ASP.NET web page
  • How to define and set Input control properties within ASP.NET project
Notification here: in order to offer users the intuitive Input control building and customizing interface, we append the corresponding operating screenshot for each step.

How to Create an ASP.NET Web Application

KT.UI Input component for ASP.NTE AJAX can be integrated within these Visual Studio versions: Visual Studio 2010, 2012 and 2013.
  1. First, please run your Visual Studio and select New | Web Site from the Visual Studio 2010 file menu;
  2. Select the "ASP.NET Web Site" to build web application and enter a name & location path. Specific operation interface is like screenshot below.
/how-to/aspnet-ajax/controls-input/getting-start/controls-inputgetting-start1.png

How to Add Input Control to Web Page

Now, let's come to see how to add and embed the PerInput control within the newly created ASP.NET web page.
  1. Drag and add an AjaxPanel component to the default web page from the Toolbox;
  2. Drag and drop an Input component (PerTextBox, PerNumericTextBox, PerMaskedTextBox, PerDateInput) into the AjaxPanel from the Toolbox.

How to Customize Input Properties

If you have successfully finished above two steps, you can move to set multiple properties of Input control within web ASP.NET page.
  1. Click and open PerTextBox's SmartTag and see interface like sample image below. Please set Empty Message as "enter your name", and when there is no input content in textbox, these words will automatically appear. Choose your defined skin;

    /how-to/aspnet-ajax/controls-input/getting-start/controls-inputgetting-start2.png
  2. In PerNumericTextBox's SmartTag pane, you can set Numeric type as "Number", Minimum Value as "0" and Maximum Value as "150". Also, set any skin as you need. See sample screenshot below;

    /how-to/aspnet-ajax/controls-input/getting-start/controls-inputgetting-start3.png
  3. In PerMaskedTextBox's SmartTag pane, whose sample image is listed below;

    /how-to/aspnet-ajax/controls-input/getting-start/controls-inputgetting-start4.png
  4. Click Set Mask property and get following sample interface screenshot;

    /how-to/aspnet-ajax/controls-input/getting-start/controls-inputgetting-start5.png
  5. Choose Phone number property and click OK.;
  6. In PerDateInput's SmartTag window like displayed below;

    /how-to/aspnet-ajax/controls-input/getting-start/controls-inputgetting-start6.png
  7. Click Set Display Date Format and see following popup, select d and click OK to confirm the process.

    /how-to/aspnet-ajax/controls-input/getting-start/controls-inputgetting-start7.png
ASP.NET AJAX UI Controls