Pass data from client side to server side

Question

I'm writing a ASP.NET application.

I have a page, where user will select or deselect some elements. This happens client-side: when user clicks on a div, javascript function is called and some classes are changed, so the div is "grayed out".
There is also a Save button (asp:Button), that will save data.

What is the best way to pass information about selected elements back to server-side?

I have tried to put that info in cookies. Each div has ID, so I would create cookie with that ID and boolean value. This is a bad idea, because:
- when user (de-)selects some elements, and then navigates away from page without saving
- then navigates back, and without selecting anything clicks "Save", cookies have previous values and that gets saved.

have a look at my answer. Hope you get the solution for your query. Don't forget to upvote and mark it as an answer. — SpiderCode, Feb 04 '14 at 14:03

SpiderCode · Accepted Answer · 2014-02-04T09:37:03.123

What you have tried is good except Cookies. I can understand the problem you are facing. So I would suggest to use Hidden Field instead of Cookies.

When your div is get selected call the javascript function and store the value (in specific format) in hidden field. and In the same way when your div is deselected remove the value from the HiddenField.

You can store value in HiddenField in below format (ID:value) :

div1:true;div2:true;div3:true

Now on the click event of the button you can first split the values by semicolon (';') and you will get the array like this :

div1:true,
div2:true,
div3:false

for each value again split the value by colon (':') and you will get the div id at the 0th index and its value on first index.

So basically your code to get the values from hidden field and perform an action on it would be as mentioned below :

foreach (var selectedDiv in this.hfSelected.Value.Split(';'))
{
    var divId = selectedDiv.Split(':')[0];
    var divValue = selectedDiv.Split(':')[1];

    // Perform action on divId and divValue
}

Update :

To store the value in HiddenField, instead of div click, you can use the OnClientClick event of the button and get the value of selected and deselected div. See my below code sample :

ASPX Page :

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript" src="Scripts/jquery-1.8.2.js" language="javascript"></script>
    <script type="text/javascript" src="Scripts/jquery-1.8.2.min.js" language="javascript"></script>
    <script type="text/javascript" src="Scripts/jquery-ui-1.9.1.custom.js" language="javascript"></script>
    <script type="text/javascript" src="Scripts/jquery-ui-1.9.1.custom.min.js" language="javascript"></script>
    <style type="text/css">
        .selectedDiv {
            background-color: #333;
            color: #fff;
            height: 30px;
            width: 100%;
        }

        .deselectedDiv {
            background-color: #bababa;
            color: #000;
            height: 30px;
            width: 100%;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <div class="selectedDiv" id="div1">I am Div 1</div>
        <div class="selectedDiv" id="div2">I am Div 2</div>
        <div class="selectedDiv" id="div3">I am Div 3</div>
        <div class="selectedDiv" id="div4">I am Div 4</div>
        <div class="selectedDiv" id="div5">I am Div 5</div>

        <input type="hidden" id="hfDivSelection" runat="server" />

        <asp:Button runat="server" ID="buttonSave" OnClick="buttonSave_OnClick"  Text ="Save" OnClientClick="GetSelection()"/>
    </form>
     <script type="text/javascript">
         $('div').click(function () {
             var css = $(this).attr('class');

             if (css == 'selectedDiv') {
                 $(this).attr('class', 'deselectedDiv');
             } else {
                 $(this).attr('class', 'selectedDiv');
             }

         });

         function GetSelection() {
             $('div').each(function() {
                 var values = $('#<%=hfDivSelection.ClientID%>').val();
                 var css = $(this).attr('class');
                 var divId = $(this).attr('id');
                 if (css == 'selectedDiv') {
                     $('#<%=hfDivSelection.ClientID%>').val(values + divId + ':true;');
                 } else if (css == 'deselectedDiv') {
                     $('#<%=hfDivSelection.ClientID%>').val(values + divId + ':false;');
                 }
             });
         }
    </script>
</body>
</html>

Code Behind :

protected void buttonSave_OnClick(object sender, EventArgs e)
{
    foreach (var selectedDiv in this.hfDivSelection.Value.Split(';'))
    {
        var divId = selectedDiv.Split(':')[0];
        var divValue = selectedDiv.Split(':')[1];

        // Perform action on divId and divValue
    }
}

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

I recommend the $.ajax function of jquery. It is very convenient.

Here is an example.

Javascript + jquery code:

//this $.ajaxSetup step is optional, but will save you a bunch of caching and asynchrony problems.
$.ajaxSetup({
  cache: false,
  async: false
});

$.ajax({
    type: "POST",
    url: 'submit.aspx',
    data: {"field1": "value1", "field2": "value2"},
    dataType: 'json',
    success: function(response){console.log('Data submit worked. Response was:\n' + response)}
});

(More info on this function at http://api.jquery.com/jQuery.ajax/.)

Then, in submit.aspx, place your code to get the info, this SO article may help.

You can then save the data to an xml file via asp.net. When you want to reload the user's settings, you can use the GET command of the $.ajax function:

$.ajax({
    type: "GET",
    url: '/data/userfields.xml',
    dataType: "xml",

    success: function(xml) {
        var fieldvalue = $(xml).find('a_node').attr('an_attrib');
        //...
    },
    error: function(xml) { console.log ('failed to get xml file on import of file: /data/userfields.xml');}
});

score 0 · Answer 3 · answered Feb 04 '14 at 08:33

0

In my opinion the best thing would be to use checkboxes (placed in a form that will be submited on button click) and use CSS to stile the div's accordig to the checkbox statuses.

answered Feb 04 '14 at 08:33

Valentin D

705
7
14

score 0 · Answer 4 · answered Feb 04 '14 at 08:36

0

I suggest using ajax callbacks. Using cookies on this approach is a bit messy. Create "on click" events on each div and if you really want to use a best practice approach to save data on the client side I suggest using Local Storage: http://www.w3schools.com/html/html5_webstorage.asp

Hope this helps

answered Feb 04 '14 at 08:36

Andrei CACIO

2,101
15
28

But isn't local storage "local"? Passing it's content to server-side would also require some workarounds, won't it? – Tschareck Feb 04 '14 at 08:44
Well I was thinking the local storage would help you remember the users interactions with the UI. ( instead of using cookies) – Andrei CACIO Feb 04 '14 at 08:52

Pass data from client side to server side

4 Answers4