Home > .NET Development > Add Row to ASP .NET Listview at Clientside

Add Row to ASP .NET Listview at Clientside

Point of Interest:
Add row to ASP .NET Listview at client side.
Using…ASP .NET, C#, Visual Studio 2008, Listview Control, ASP .NET AJAX, JQuery, JSON, Serialization, Linq to Sql.

All List controls, like Datagrid, Gridview, Listview, in ASP .NET has set set of features to work with records. These features includes Edit, Delete, Select, Insert. All these features require a full postback to server to complete its operation. I want to avoid these postbacks.

I have a  “property” table in my database, and goal is to implement CRUD operation on that table along with the below additional requirements.

  1. There should be no postbacks for adding new row and delete
  2. All rows  should be displayed in a editable mode
  3. User should able to add new record at client side only.



  1. Take a new empty solution “AddRowClientSide”and a web a web application project.
  2. Add a database into APP_DATA folder
  3. Open database and create table.
    In this demo, all CRUD operations are implemented on PROPERTY table. There is no business behind this table, so this table as it is.
  4. Database is attached in the source, at the end of article.

Data Access

  1. Create a “DataAccess” folder in project
  2. Add new LINQ to SQL dbml file to project.
  3. Open Property.dbml and drag tables and stored procedures, as show below.
  4. This will create and classes and methods for your CRUD operations.

Business Logic Layer

  1. Add a folder BLL to the project.
  2. Add PropertyBR class file to BLL folder.
  3. Add methods to GetProperties, AddProperty, DeleteProperty as below

Application Layer:

  1. Here is the final output…
  2. Create required styles.
  3. Add jquery-1_1.4.2.min.js to project
  4. Add ASP.NET AJAX script manager to page. This renders the required script files to client for JSON serialization. Also we need it to use any MS ASP.NET AJAX related controls like Updatepanel.
  5. Note that, one of our additional requirement is, new row should be added at client side. But the controls added at client won’t be available to server. So to persists the data I am using hidden fields. Lets add three hidden fields for data persistence.

    hidNewRowCount: Default=0, when ever we add a new row this value will be incremented by one.
    hidRemovedIDs: When user removes a row by clicking on [X] link, ID of respective row will be saved in to this in CSV format. Ex: 1,2,3
    hidNewRowData: Data entered in newly created rows will be saved into this in JSON format.

  6. Add a Listview to page, to display data. This is new control in .NET Framework 3.5, gives more control to developer. INSERT template, GROUP templates are some of the new features in it.
  7. When ever user clicks on ADD button a new row should be added to Listview. So define a template for new row, separately and hide it from user eyes.
  8. Lets discuss some important point about the template definition.
    Added a custom attribute “status” to represent the status of each row.
    Status= 0: Bind (All the rows binded at server)
    Status= 1: AddNew at Client Side
    Status=-1: Deleted (Status will be set to –1 and row will be hidden when deleting row with status is 0 i.e, row from server; But row with status = 1 will be deleted permanently.)
  9. Adding a new row…
    On ADD button’s click event clone the hidden template using JQuery’s Clone() function, add to table. Each added row will be assigned with a new ID.
  10. IDs of deleted rows will be maintained in hidRemovedIDs
  11. How to send new row data to server? There can be multiple answers for this questions.
    – Concatenate the properties using some delimiters
    – Fill all Properties into a JavaScript object and serialize.
    Either way, we need to store it to some hidden field, to send to server.
  12. I want to go for JavaScript objects, instead of  delimiter strings. Here is the way to do it.
  13. In the server side we can de-serialize the Json object
  14. I know, its not a detailed narration of the work done, just play with the source code to feel the fun in it.
  15. Finally, a small tip to show the row number…
  16. Download the source code from here
  17. Here are very good links I referred in doing this. Thanks to all for their good work.
    Using ListView Control
    JSON Serialization

Hope it helps…!


    Categories: .NET Development
    1. Thomas K. Nielsen
      November 11, 2010 at 9:16 pm

      Nice article. Very helpful.
      Did you deliberately not include the full implementation of the sync update function?
      Seems like you just get the name of the property and set an integer variable with the value 23 and then nothing else, perhaps a little incomplete.

      foreach (ListViewItem lvRow in this.ListView1.Items)
      name = (lvRow.FindControl(“txtName”) as TextBox).Text;
      int i = 23;

      • November 13, 2010 at 6:13 am

        Yes, my intention is just to show how to read again. Once the data is available at server, we can use it for any purpose.

    1. No trackbacks yet.

    Leave a Reply

    Fill in your details below or click an icon to log in:

    WordPress.com Logo

    You are commenting using your WordPress.com account. Log Out /  Change )

    Google+ photo

    You are commenting using your Google+ account. Log Out /  Change )

    Twitter picture

    You are commenting using your Twitter account. Log Out /  Change )

    Facebook photo

    You are commenting using your Facebook account. Log Out /  Change )


    Connecting to %s

    %d bloggers like this: