Two way databinding in ASP.NET

Question

Let say that we have an object

class Entity
{
    public string ID {get; set;}
    public string Name {get; set;}
}

I want to bind properties to two textboxes on a page something like this:

<asp:FormView ID="FormView" runat="server">
  <ItemTemplate>
    <asp:textbox ID="TextId" Text='<%# Bind("ID") %>'/>
    <asp:textbox ID="TextId" Text='<%# Bind("Name") %>'/>
  </ItemTemplate>
</asp:FormView>

and then write this in code behind

public EntityObject
{
    get { return ViewState["Entity"] as Entity; }
    set { ViewState["Entity"] = value; }
}

protected override void OnInit(EventArgs e)
{
    if (EntityObject== null)
        EntityObject= new EntityObject();

    FormView.DataSource = new[] { EntityObject };
    FormView.DataBind();
    base.OnInit(e);
}

And when I enter values in textboxes I expect EntityObject to have these values in properties when page reloads after PostBack, but properties are always null.

Answer 1

Sadly to say that, but ASP.NET does not support two-way binding to .net objects... instead you can use something like "manual binding" on every post back (here AddIncomeSources is RepeaterControl)

public List<Income> AdditionalIncomeList 
{
    get { return ViewState["AdditionalIncome"] as List<Income>; }
    set { ViewState["AdditionalIncome"] = value; }
} 

foreach (RepeaterItem item in AddIncomeSources.Items)
{
    var amount = (TextBox)item.Controls.Cast<Control>().First(c => c.ID == "Amount");
    var document = (DropDownList)item.Controls.Cast<Control>().First(c => c.ID == "Document");
    AdditionalIncomeList[item.ItemIndex].Amount = amount.Text.ToDouble();
    AdditionalIncomeList[item.ItemIndex].IncomeDocument = document.SelectedValue;
}

AddIncomeSources.DataSource = AdditionalIncomeList;
AddIncomeSources.DataBind();

Answer 2

For those looking, I made this javascript plugin. It does data binding very close to what WPF does and is easy to use. It has attached documentation in a .txt file

https://github.com/jdemeuse1204/ObjectDataBinding

Here is an example of what one of my bindings looks like

<input runat="server" class="popoutEditInput" style="width: 50px;" data-bind="path: Quote" />

To activate you call

$("#yourelementname").observe(yourobject, 'yourbindingname');

To get the object back for saving or other operations

var object = $("#yourelementname").getObserveObject('yourbindingname');

Answer 3

I created a solution for this.

https://www.codeproject.com/Articles/146078/WPF-Two-way-Databinding-in-ASP-NET-Enabling-MVVM

or github:

https://github.com/Recodify/mvvm-4-asp-webforms

Answer 4

In the OnInit you are always making to null.. remove those code and keep in the page load..

only need to bind in the very first time not in all the post back.

Page_Load() {

if(!Page.IsPostBack)
{
     if (EntityObject== null) 
            EntityObject= new EntityObject(); 

        FormView.DataSource = new[] { EntityObject }; 
        FormView.DataBind(); 
 }

}

Answer 5

here the problem is you are trying to create dynamic control.

you can use a gridview control in .aspx page and bind the data, it has viewstate by default instead of yours..

Anyway web is stateless, we should retain the data through ViewState or Session or Application. Also you can keep it in cache but not reliable (we can make it pragmatically reliable). Most of the .NET controls has ViewState in-built.