Archive

Archive for the ‘.NET Development’ Category

Add Row to ASP .NET Listview at Clientside

April 18, 2010 2 comments


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.

Problem:
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.

Requirement:
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.

Implementation:

Database

  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.
    image
    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.
    image
  3. Open Property.dbml and drag tables and stored procedures, as show below.
    image
  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
    image

Application Layer:

  1. Here is the final output…
    image
  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.
    image
    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.
    image
  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.
    image
  13. In the server side we can de-serialize the Json object
    image 
  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…
    image
    image
  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.
    JQuery
     
    Using ListView Control
     
    JSON Serialization

Hope it helps…!
Pradeep.

 

    Categories: .NET Development

    How To: Convert Bussiness object to XML string

    November 17, 2008 Leave a comment
    There are some case, where we need to update multiple records to database; and say those records are in Collection of object.
    The simple solution for this is – Convert collection object into XML and send that XML string as parameter to Stored procedure.
    In this way we can Insert/Update multiple records in a single database call.
     
    Below is the function to convert an Object to XML string.
     
    Public Function ObjectToString(Of T)(ByVal msg As T) As String
        Dim _dcs As New System.Runtime.Serialization.DataContractSerializer(GetType(T))
        Dim _sb As New System.Text.StringBuilder
        Dim _xmlwriter As Xml.XmlWriter = Xml.XmlWriter.Create(_sb)
        Dim _myString As String
        Try
            _dcs.WriteObject(_xmlwriter, msg)
            _xmlwriter.Flush()
            _myString = _sb.ToString
        Catch ex As Exception
            _myString = ex.ToString
        Finally
            _xmlwriter.Close()
        End Try
        Return _myString
    End Function
     
    Happy programming..!Smile
    Categories: .NET Development