Problems with adding rows dynamically and save values in javascript and c#

Question

I created a table from my database and now I want to add rows and save it. My problem is when I add a row for a second time, I do saved the row before in my database, but this row gets as soon as the second blank row appears. If a refresh the page or using location.reload() first row is visible but not the second blank one.

I wrote in javascript (but my whole program runs in c#) :

function addRow() {
    var i = parseInt(document.getElementById('counter').value);
    if ((i-1)>=0) {
        var id = guid();
        save_row_before(i-1);
        var row = '<input ID="id'+ i + '" runat="server"type="text" 
        document.getElementById('table').getElementsByTagName('tbody')[0].innerHTML += row;

        document.getElementById('counter').value = i + 1;

    }
}

function save_row_before(i) {

    var r = document.getElementById('id' + i).value ;
     $.ajax({
        type: "POST",
        url: "Default.aspx/saveRows",
        data: '{row: "' + r + '" }',
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        async: false
    });
}

Thanks in advance!!

if counter is ASP Textbox you need to add server tag "<%= Counter.ClientID %>" — msm2020, Mar 25 '14 at 20:33

score 0 · Answer 1 · edited May 23 '17 at 11:49

Please see Why does ASP.NET webforms need the Runat="Server" attribute?

If you want an input to run on the server, you need to have it compiled before you deploy the app.

Keep in mind:
Asp.net (c#) generates html.
JavaScript manipulates that html.

If you add a row with runat=server:

var row = '<input ID="id'+ i + '" runat="server"type="text" ...

The codebehind will be unaware of that item.

Also note, typically you don't send html to the server. Simply send json.

Here is a great tutorial using knockout.js: http://learn.knockoutjs.com/#/?tutorial=loadingsaving

score 0 · Answer 2 · answered Mar 25 '14 at 20:35

0

1st you must use ASP.net Server Names so counter textbox will call :

getElementById('<%= counter.ClientID %>')

2nd point you can't add server side control use Javascript

runat="server" have no mean here its client control

answered Mar 25 '14 at 20:35

msm2020

180
1
10

Problems with adding rows dynamically and save values in javascript and c#

2 Answers2