Gunnar Peipman's ASP.NET blog

ASP.NET, C#, SharePoint, SQL Server and general software development topics.

Sponsors

News

 
 
 
DZone MVB

Links

Social

October 2011 - Posts

ASP.NET 4.5 Preview: Using model binding to update data

My last posting about ASP.NET 4.5 introduced how to use strongly typed controls to display data. Using strongly typed presentation layer templates is not the only thing that model binding is good for. From ASP.NET MVC we know how convenient it is when model binders are also able to update our objects when they are modified. In this posting I will show you how to use strongly typed FormView to save data that user modified.

Preparation work

In my previous posting I introduced how to use strongly typed controls and how they select data. Here is the product class we used I previous posting.


public class Product

{

    public int Id { get; set; }

    public string Name { get; set; }

    public decimal Price { get; set; }

}


Defining strongly typed FormView

Update mechanism for strongly typed controls is similar to select one. We have to define method that is called when control wants to save data. As an example let’s see FormView control defined as follows.


<asp:FormView ID="FormView1" runat="server" DefaultMode="Edit"
      SelectMethod="GetProducts" UpdateMethod="UpdateProduct">
    <EditItemTemplate>
    <table>
    <tr>
    <td>ID</td>
    <td>
    <%# Item.Id %>
    <asp:HiddenField runat="server" ID="Id" Value='<%# BindItem.Id %>' />
    </td>
    </tr>
    <tr>
    <td>Name</td>
    <td>
    <asp:TextBox runat="server" ID="Name" Text='<%# BindItem.Name %>' />
    </td>
    </tr>
    <tr>
    <td>Price</td>
    <td>
    <asp:TextBox runat="server" ID="Price" Text='<%# BindItem.Price %>' />
    </td>
    </tr>
    </table>
    <asp:Button ID="Button1" runat="server" 
       
CommandName="Update" Text="Save" />
    </EditItemTemplate>
</asp:FormView
>

Some things to notice:

  1. There is ModelType property that teels type of data item to FormView.
  2. SelectMethod is used to read data for FormView.
  3. UpdateMethod is method that FormView calls when data is changed and user wants to save it.
  4. BindItem property is used instead of Item when binding data to control’s properties.

Now let’s take a quick look at GetProducts() method. The method with GetProductList() method is taken from my previous blog post.


private IList<Product> GetProductList()

{

    return new[]{

        new Product { Id=1, Name="Heineken", Price=0.88m },

        new Product { Id=2, Name="Skopsko", Price=0.97m },

        new Product { Id=3, Name="Gambrinus", Price=0.63m },

        new Product { Id=4, Name="Lapin Kulta", Price=0.92m },

        new Product { Id=5, Name="Rock", Price=1.1m }

    };

}

 

protected IQueryable<Product> GetProducts()

{

    return GetProductList().AsQueryable();

}


Updating data

UpdateMethod is called UpdateProduct() and it looks like follows.


public void UpdateProduct(Product product)

{

    // Update logic here

}


My intention here is you to show you simply how we get changed data back to our web form. This time we just use debugger to check out if we get correct data. Before running solution put breakpoint to closing brace like shown on next screenshot.

ASP.NET Forms 4.5: Setting breakpoint to update method

Now run web application. If there is no errors you should see form like this.

ASP.NET Forms 4.5: Product editing form

Change the values and click save. When Visual Studio hits breakpoint take a look at product that is given to UpdateProduct() method.

ASP.NET Forms 4.5: Product with modified data

I changed Heineken to Heineken Lager and price from 0.88 to 0.8. Both of these changes are available in object that was given to UpdateProduct() method.

Conclusion

Strongly typed controls that support editing are able to update data using method specified in UpdateMethod property. For UpdateMethod object is constructed and it is of type given by ModelType property. Although I find that using events is better idea in this case it is definitely not hard to define select and update methods like they are right now.

Posted: Oct 13 2011, 04:23 PM by DigiMortal | with 1 comment(s)
Filed under:
ASP.NET 4.5 Preview: Using model binding to display data

ASP.NET Forms 4.5 Preview introduces us model binding for web forms. Web developers who are familiar with ASP.NET MVC already know what model binding is and how powerful it is. Model binding means framework ability to construct objects of known types using values from presentation layer. In this posting I will show you how to use model binding with ASP.NET Forms 4.5.

Sample data

Before going on with examples let’s create some test data too. Let’s define class Product as follows.


public class Product

{

    public int Id { get; set; }

    public string Name { get; set; }

    public decimal Price { get; set; }

}


We need more than one product and to avoid creating database or doing other complex things we define simple method that returns us list of products.


private IList<Product> GetProductList()

{

    return new[]{

        new Product { Id=1, Name="Heineken", Price=0.88m },

        new Product { Id=2, Name="Skopsko", Price=0.97m },

        new Product { Id=3, Name="Gambrinus", Price=0.63m },

        new Product { Id=4, Name="Lapin Kulta", Price=0.92m },

        new Product { Id=5, Name="Rock", Price=1.1m }

    };

}


That’s enough for preparation work. You can use this method also as static method of Product class.

Strongly typed controls

Previous versions of ASP.NET Forms used reflection on data source objects to read values from objects they were bound to. Web is full of examples about how to bind DataTable to GridView or Repeater and so on. With strongly typed controls ASP.NET Forms makes step closer to object orientation in presentation layer.

Let’s define strongly typed Repeater that shows us list of products.


<asp:Repeater 
       
runat="server" ID="Repeater1"
       
ModelType="WebApplication45.Product" 
       
SelectMethod="GetProducts">
    <HeaderTemplate>
        <table>
        <tr>
        <th>ID</th>
        <th>Name</th>
        <th>Price</th>
        </tr>
    </HeaderTemplate>
    <ItemTemplate>
        <tr>
        <td><%# Item.Id %></td>
        <td><%# Item.Name %></td>
        <td><%# Item.Price %></td>
        </tr>
    </ItemTemplate>
    <FooterTemplate>
        </table>
    </FooterTemplate>
</asp:Repeater>

Note the following things:

  1. ASP.NET Forms 4.5: Strongly typed web controls support IntelliSenseThere is new ModelType property we can use to specify type of data item.
     
  2. There is new SelectMethod property that specifies the method to call when repeater wants to load data.
     
  3. To show data in different templates we can use Item property that is strongly typed and – of course – IntelliSense is also supported. You can see IntelliSense in action on screenshot on right.

Now let’s see how SelectMethod works.

Select method

Select method is expected to return us result of type IQueryable<ModelType>. If our data source returns something else we can usually use LINQ extension methods to convert our source data to IQueryable. In our case GetProducts() method is defined as follows.


public IQueryable<Product> GetProducts()

{

    return GetProductList().AsQueryable();

}


SelectMethod allows us to do much more but for this example it is enough.

After running our ASP.NET Forms solution we will see product table like this.

ASP.NET Forms 4.5: Strongly typed Repeater in action

Conclusion

Repeater is not the only strongly typed control available in ASP.NET 4.5 – there are many other familiar controls that have support for strongly typed data. In this posting we saw that defining strongly typed web controls is easy. It is also easy to provide data to these controls using data selecting method. SelectMethod is more powerful than you can see here but this is the topic of some other (hopefully interesting) posting.

Posted: Oct 13 2011, 01:14 PM by DigiMortal | with 3 comment(s)
Filed under:
More Posts