Where is the best place to put database ids on the client-side?

Question

I'm serving up a page using ASP.Net. I have Add/Edit/Delete functionality of controls I've added dynamically using jQuery on a page, some of which have related records in a database. Where is the best place to put the id (primary key) for these, an attribute, data-*, jQuery.data()? Should I be concerned if the Id is visible client-side?

Answer 1

It's good practice to encrypt the ID of the record on the client side to ensure the security of your database. Usually a hidden field will do the trick.

This way, the user only sees the encrypted id upon viewing the source. The script being called then uses the key used to encrypt to retrieve the record identifier server side and manipulate data as needed.

Answer 2

You can add your own attribute to an element (eg my-attr="92" ), you can use a hidden input field with the value set to the id ( <input type="hidden" value="92" /> ), or you can just use the id attribute (eg id="db-92" ).

I don't think it really matters which method you use, whatever best suits.

Answer 3

You should Never put this on your client. Since you will inevitably go back through your server to get to the data at most you should put some form of key (like dsource = 'db3' as an attribute or in a hidden field..) and then do some manner of look-up in the server process.

Answer 4

Firstly do not use the direct database ID. You will be tied to directly to one version of one table's Primary Key. Instead create a second column, using UUID to be the place holder of primary key

for example

tbl_person
 person_id INT PRIMARY KEY
 person_uuid VARCHAR(64)
 name VARCHAR(128)

But to answer the actual question, I suggest you use an attribute of the appropriate element, proabbly id

<tr><td id="1234-5678">Paul </td></tr>

(edit to get code formatting right)

Answer 5

Best practice is to use jQuery.data() , as this follows the HTML5 standard for such information .

Answer 6

I always use the jQuery metadata library, which essentially is the $().data() functionality enclosed within the class (or any other) attribute of the object.

Find the jQuery metadata plugin here : "This plugin is capable of extracting metadata from classes, random attributes, child elements and HTML5 data-* attributes."

So you can do stuff like this:

<tr><td>Dave Jones</td><td><input class="delete_person {person_id: 90}" type="button" value="Delete this guy" /></tr>

then with jQuery:

$('.delete_person.').click(function() { 
    // delete person 
    $.post('/controller/delete_person', {person_id: $(this).metadata().person_id},  
    function() {
     // the person was deleted
    }
});

Hope that helps!