CODEWITHSUNDEEP
javascriptjqueryhtmlajax
André Snede
André Snede

Reputation: 10045

AJAX / HTML How to store complex data

Consider this usecase.

I have a table(<table>), which enables the user to enter time spent on given project in a given week.

eg.

--------------------------------------
|Project ID: | Monday | Tuesday | ...|
|   123      | 7:15   |   3:45  | ...|
|   124      | 1:15   |   0:45  | ...|
|   125      | 0:00   |   0:00  | ...|

I then need to postback all these rows, after the user has input them. I have made something similar before, and here I had seperate forms describing each row, and then iterating through them with jQuery, to build a JSON object, that contained them as an array.

Structure for each row:

<tr>
   <form name="RowData">
       <input type="hidden" Name="ProjectID" value="123" />
       <input type="hidden" Name="Monday" value="..." />
       <input type="hidden" Name="Tuesday" value="..." />
   </form>
   <td></td> <!-- Containing the text input and so forth -->
   <td></td>
   <td></td>
</tr>

Structure for postback:

json:{
     rows:[
          {
          ProjectID: 123, 
          Monday: '7:15',
          Tuesday:'3:45', // etc...
          },
          {
          ProjectID: 124, 
          Monday: '1:15',
          Tuesday:'0:45'
          }, // etc...
     ]

}

*Please notice that this is not an actual representation of how I would send the data, but merely a structure to let you understand my way of thought*

But I feel there must be a better more intuitive way to do it. Storing a complex structure in the HTML, or Javascript, to more easily post back via AJAX.

My problem with storing it in Javascript, is keeping it synced with the page and what the user sees.

If some of you have a better approach please let me know, and possibly explain in some detail how it works, and why its a better approach.

Upvotes: 0

Views: 257

Answers (1)

Anto king
Anto king

Reputation: 1222

Hi You can try http://knockoutjs.com/

I using a simple trick in MVC if you want u can use this too. 

<script>
    var dataMap = {};
</script>
@foreach(var item in Model.Urmodel) {
 <tr data-id="@item.Id"> ... etc </tr>
 <script>
dataMap['@item.Id'] = @Json(item); // you'd have to make a Html helper to do this
</script>
}

Upvotes: 1

Related Questions