Question

I have an apsx page in the asp.net application, elements of which are built using javascript according to the user’s input. When the user clicks the “Save” button I need to create a file on the server with all the data provided by the user. The problem is that this data is stored in the javascript(in the generated divs). I need somehow to get this data into the asp.net button click function or call the function with all the data as arguments. How can it be implemented?

Answer 1

You can always try and pop the data you need in hidden input fields on the form, so you can access it with Request.Form["fieldName"] (just remember to give the hidden input fields a “name” attribute, else you’ll spend an unnecessary amount of hours trying to figure out why you can’t access it via Request.Form :P) from the code-behind. That’s probably the easiest way to achieve this…

EDIT

Just to give you a quick idea, here’s some sample code from one of my projects where I generate hidden inputs fields based on certain dynamic fields to post back to the server once the Save() function is called from certain buttons / anchors:

function Save() {
    $("div.fieldcontainer span.readonly").each(function () {
        var fieldId = $(this).attr("id");
        var fieldValue = $(this).html();
        var ctrl = $("<input type=\"text\" id=\"" + fieldId + "\" name=\"" + fieldId + "\" style=\"display:none;\" />");
        ctrl.val(fieldValue);
        $(this).parent().append(ctrl);
    });
    $("div.fieldcontainer a.attachment").each(function () {
        var fieldId = $(this).attr("id");
        var fieldValue = $(this).text() + "|" + $(this).attr("href");
        var ctrl = $("<input type=\"text\" id=\"" + fieldId + "_txtHiddenValue\" name=\"" + fieldId + ":txtHiddenValue\" style=\"display:none;\" />");
        ctrl.val(fieldValue);
        $(this).parent().append(ctrl);
    });
    $("div.fieldcontainer select").each(function () {
        var fieldId = $(this).attr("id");
        var fieldValue = $(this)[0].value;
        var fieldText = $(this).find("option[value='" + fieldValue + "']").text().replace("<", "").replace(">", "");
        $(this).attr("id", fieldId + "_ORIGINAL");
        var ctrl = $("<input type=\"text\" id=\"" + fieldId + "\" name=\"" + fieldId + "\" style=\"display:none;\" />");
        ctrl.val(fieldText + "$" + fieldValue);
        $(this).parent().append(ctrl);
    });
    $("div.fieldcontainer input[type='checkbox']").each(function () {
        var fieldId = $(this).attr("id");
        var fieldValue = $(this).attr("checked");
        $(this).attr("id", fieldId + "_ORIGINAL");
        var ctrl = $("<input type=\"text\" id=\"" + fieldId + "\" name=\"" + fieldId + "\" style=\"display:none;\" />");
        ctrl.val(fieldValue);
        $(this).parent().append(ctrl);
    });
    document.form1.submit();
}

You can possibly implement the same type of logic to cycle through each of your client-generated DIVs and create a hidden input for each before submitting the form. That way you don’t unnecessarily bog down the page with too much extra markup while the user is busy interacting with it…