Two way databinding in ASP.NET

问题:

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.

回答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();

回答2:

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(); 
 }

}

回答3:

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.

回答4:

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');

回答5:

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