How to implement properties of checkbox to keep track of your changes on each line in your table without employing Grid object or jQuery.Data(Input)?

Question

How to perform form requests selectively ONLY on changed lines without involving Grid or jQuery.Data(input) logic?

Beside the fact that the program is old, AJAX does not apply here because I don't want each line to fire a change event when user enters changes! What I want to have is one submit : just 1 click-event from the user after he has finished all the line changes!

So, what is the easiest clean-cut way to MINIMIZE the browser-server trips?

Each line I have this invisible checkbox

<input type="checkbox" style="display:none;" name="N_CheckChanged">

and other hidden objects on that line to keep track of changes.

<input type="hidden" value="beforeChangeVal" name="h_CertainObject">

My code on the server-side for changes is

string[] formCheckChanged = Request.Form.GetValues("N_CheckChanged");

However the code can be quite messy if you want to use names derivation (extracting checkbox'es prefix to derive other objects' name) to hash to the objects for their new values to update your db. And, that's no good.

Answer 1

To answer the above question, you have to know

Checkbox element has these two distinct attributes

i. checked == true/false

ii. value := 'any string vals'

one not related to the other.

In your CHECKED attribute, you set it to true only if that line has changes. Checkbox object would make itself invisible (disabled) from Server.Request otherwise .

In your VALUE attribute, you can stash away all your to-be-posted values for that line(similar to jQuery.Data(input)) disregarding the checked attribute == true/false!

Browser on-submit, you execute

function do_checkChanges() {// checking each row
    for (var ii = 0; ii < document.getElementsByName("N_CheckChanged").length; ii++) {
        document.getElementsByName("N_CheckChanged")[ii].checked = 0;
    //detect changes
        if ((document.getElementsByName("R_DateResume")[ii].value != document.getElementsByName("h_DateResume")[ii].value)
            || (document.getElementsByName("R_CheckInhibited")[ii].value != document.getElementsByName("h_CheckInhibited")[ii].value)
            )
        {
            document.getElementsByName("N_CheckChanged")[ii].checked = 1;//mark the change
            document.getElementsByName("N_CheckChanged")[ii].value =
                document.getElementsByName("h_RowID")[ii].value + "|"
                + document.getElementsByName("R_CheckInhibited")[ii].checked + "|"
                + document.getElementsByName("R_DateResume")[ii].value
            ;
        }
    }
    whoPostBack.value = 'view2';
}

After you have stored your updates inside the checkboxes, your server-side code should be like a breeezzee! On the server side, all you need to do is

string[] formCheckChanged = Request.Form.GetValues("N_CheckChanged");
if (formCheckChanged != null)
{
    foreach (string checkChanged in formCheckChanged)
    {
        sValues = checkChanged.Split('|');
        correspondedRow = sValues[0];
        data1 = sValues[1];
        data2 = sValues[2];
        theSqlCmd.CommandText =
            " update tb_LOG set InhibitedNow='" + data1 + "', InhibitEnd = '" + data2 + "', InhibitedBy = '" + MyConnections.userID
            + "' where RowID =" + correspondedRow;
        try
        {
            theSqlCmd.ExecuteNonQuery();
        }
        catch (Exception eX)
        {
            Response.Write(theSqlCmd.CommandText); Response.End();
        }
    }
    //Response.End();
}