How To Save More That One Row Of Text To Database By Adding Input Fields Dynamically?

What I have and doing at the moment: When the webpage loads the user is presented with form fields to type in some information then the user has the option the add more fields and

Solution 1:

To update grids or repeating data? You don't hard code this, you use one of MANY data aware and data repeating controls.

I like listview over grid view. I used the wizards to generate this, deleted all the templates and now have this markup:

<formid="form1"runat="server"><div><linkhref="Content/cuscosky.css"rel="stylesheet" /><asp:ListViewID="ListView1"runat="server"DataKeyNames="ID" ><EmptyDataTemplate><tablerunat="server"style=""><tr><td>No data was returned.</td></tr></table></EmptyDataTemplate><ItemTemplate><trid="myTable1"style=""><td><asp:LabelID="IDLabel1"runat="server"Text='<%# Eval("ID") %>' /></td><td><asp:TextBoxID="DescriptionTextBox"runat="server"Text='<%# Eval("Description") %>' /></td><td><asp:TextBoxID="tQty"runat="server"Text='<%# Eval("Qty") %>'style="width:40px"onchange="updatecost(this.id,'tQty');"  /></td><td><asp:TextBoxID="tUnitPrice"runat="server"Text='<%# Eval("UnitPrice") %>'style="width:70px;text-align:right"onchange="updatecost(this.id,'tUnitPrice');"/></td><td><asp:TextBoxID="tCost"runat="server"Text='<%# Eval("Qty") * Eval("UnitPrice") %>'style="width:70px;text-align:right"  /></td></tr></ItemTemplate><LayoutTemplate><tableid="itemPlaceholderContainer"runat="server"border="0" ><trrunat="server"style=""><thrunat="server">ID</th><thrunat="server">Description</th><thrunat="server">Qty</th><thrunat="server">UnitPrice</th><thrunat="server">Cost</th></tr><trid="itemPlaceholder"runat="server"></tr></table></LayoutTemplate></asp:ListView><asp:TextBoxID="TextBox1"runat="server"ClientIDMode="Static"></asp:TextBox><script>functionupdatecost(p, ctl) {

             varQty = $('#' + p.replace(ctl, "tQty"));
             var UPric = $('#' + p.replace(ctl, "tUnitPrice"));
             varCost = $('#' + p.replace(ctl, "tCost"));
             Cost.val(Qty.val() * UPric.val());
         }
     </script></div></form>

As you can see, we don't have a lot of markup.

Now, to load up this grid in code? I have this code:

publicclassLvInvoiceEDit : System.Web.UI.Page
{
   private DataTable rstTable = new DataTable();

   protectedvoidPage_Load(object sender, System.EventArgs e)
   {
       if (System.Web.UI.Page.IsPostBack == false)
       {
           LoadGrid();
           System.Web.UI.Page.Session["rstTable"] = rstTable;
       }
       else
           rstTable = System.Web.UI.Page.Session["rstTable"];
  }

   publicvoidLoadGrid()
   {
       string strSQL = "";
       strSQL = "SELECT ID, Description, Qty, UnitPrice, Cost FROM InvoiceDetails";
       using (SqlCommand cmdSQL = new SqlCommand(strSQL, new SqlConnection(My.Settings.Test3)))
       {
           cmdSQL.Connection.Open();
           rstTable.Load(cmdSQL.ExecuteReader);

           ListView1.DataSource = rstTable;
           ListView1.DataBind();
       }
   }
}

Not a lot of code so far, right? Well, we now have this grid:

Now I did play with some JavaScript to update the qty - I think I'll leave that for another day - but it does update quite nice.

So the NEXT big question then is HOW do I save the edit changes back to the data base?

Well, assuming we drop a save button below? Then this code will work:

protectedvoidButton1_Click(object sender, EventArgs e)
{

// save all edits in the grid back to the table:foreach (ListViewDataItem gvRow in ListView1.Items)
    {
       int ix = gvRow.DataItemIndex;
       {
           var withBlock = rstTable.Rows(gvRow.DataItemIndex);
           withBlock.Item("Description") = gvRow.FindControl("DescriptionTextBox") as TextBox.Text;
           withBlock.Item("Qty") = gvRow.FindControl("tQty") as TextBox.Text;
           withBlock.Item("UnitPrice") = gvRow.FindControl("tUnitPrice") as TextBox.Text;
           withBlock.Item("Cost") = gvRow.FindControl("tCost") as TextBox.Text;
       }
   }

// ok, grid is back to the table. Now send table back to database.using (SqlCommand cmdSQL = new SqlCommand("SELECT ID, Description, Qty, UnitPrice, Cost FROM InvoiceDetails where id = 0", 
        new SqlConnection(My.Settings.Test3)))
{
    SqlDataAdapter da = new SqlDataAdapter(cmdSQL);
    SqlCommandBuilder cmdUpdate = new SqlCommandBuilder(da);

    da.Update(rstTable);
}
}

So a few things: See any mess or truckload of parameters in above? (no!). Does it matter if we have 3 rows or 30 rows to update? (no!).

Did we really need to write any JavaScript? (no!).

So for bonus points, we probably in the save button should update the total box on the form.

Also, if you not doing a grid? Then I would tag your controls, write a loop to grab the controls into the table. And another routine to take a row and fill the controls. Once you write that routine? ( a fwriter, and rreader to pull or push one data row out to the controls?). Then you can use that fwriter/fread routine to update 5 or 50 controls on a form - and it will only take 2-3 lines of code to udpate those 3 or 40 controls on the form. So be it a grid (repeating rows), or that of just a bunch of controls on the form? You don't need to write and setup a gazillion things (don't need parameters - don't matter if 5 or 40 controls). And in the case of a table like layout (listview), it don't matter if we have 3 or 20 rows of data - its the SAME amount of code and work. This is how things were done on desktop - and the same applies to the web - you don't write code to inject repeating data (well, unless you say using PHP or some such). In asp.net land? We use data repeaters - and save world poverty in terms of the amount of code you do NOT have to write!

And like any desktop software for repeating data? you build the grid - fill it with data. You don't re-add controls on the form manually unless you looking to really make a huge amount of work when none is required.

So, the only trick/issue left? We need a add row button. I'll come back later today and post a few lines for that.

Edit: code to add a row? Drop a button below the grid, and thus the code is this to add a new row:

protectedvoidButton2_Click(object sender, EventArgs e)
{

// add a new row to the table.

{
    var MyNewRow = rstTable.Rows.Add;
    MyNewRow.Item("Description") = "new row";
    MyNewRow.Item("Qty") = 1;
    MyNewRow.Item("UnitPrice") = 0;
    MyNewRow.Item("Cost") = 0;
}

// display this new row to the grid
ListView1.DataSource = rstTable;
ListView1.DataBind();
}