Saving dynamically generated html attributes in a database (Asp.Net, Jquery)

Question

I am working on a self design dashboard page. Users drag&drop custom sized boxes in a div element and place some data inside boxes. Once they finish, I would like to save the certain attributes of these boxes in a db, instead of saving whole html code.

<div id="widget0" class="box span2">
    <div class="box-header well" style="padding-left: 3px;" data-original-title="">
        <div style="float:left">
            <a href="javascript:void(0)" class="btn btn-narrow-left btn-round"><i class=" icon-chevron-left"></i></a>
            <a href="javascript:void(0)" class="btn btn-extend-down btn-round"><i class=" icon-chevron-down"></i></a>
            <a href="javascript:void(0)" class="btn btn-narrow-up btn-round"><i class=" icon-chevron-up"></i></a>
            <a href="javascript:void(0)" class="btn btn-extend-right btn-round"><i class=" icon-chevron-right"></i></a>
        </div>
        <div style="float: right !important; margin-right: -15px;">
            <a href="javascript:void(0)" class="btn btn-close btn-round"><i class="icon-remove"></i></a>
        </div>
    </div>
    <div class="box-content">
        <div id="boxContent0" style="width:100%;height:250px;border-collapse:collapse;" class="ui-droppable">
        </div>
    </div>
</div>

Above is a sample html code of my box. I'll just save div id, class and contents.

What I've done so far is, I saved required values in an asphiddenfield on a button click event in this format:

"2|widget0,span4,content1,content2|widget1,span3,0,0"

I did this by handling form submit event using jquery, triggered by asp button click. But the db write operations required in my server button click function didn't work. I think this is because I handled the form submit event before btnSaveDashboard_Click(object sender, EventArgs e) function handles and submit the form from jquery..

What I would like to do is, when user click on "save dashboard" button, before redirecting to the dashboard view page, to save these values in my db then redirect.

I just couldn't find a way how to do this with one button click;

• get the required html values
• save them in a hidden field or somewhere else reachable like viewstate
• save these values in my database

I can more provide more details in case needed.

Thanks.

Answer 1

You could use the Button's OnClientClick client side event to populate the HiddenField with the values you need before the Postback occurs.

If you accomplish that, you should have the values you want on the Button's OnClick server side event. You should be able to do whatever you want with them at this point.