Limiting dropdown options based on userID Limiting dropdown options based on userID database database

Limiting dropdown options based on userID


I would go only with steps 2-3 of your approach; however, I would not store the numbers in the way you showed. A better approach would be to store them in a table called user_value -or something like that-:

user_id  |  value---------+-------user1    |  101user1    |  102user2    |  101

Just because you can then easily add/remove/update values in the future as opposed to having to parse the comma-delimited value.

I would avoid using jQuery to simply "hide" things because Javascript can be disabled by the user and he may end up submitting whatever value he wants (visible or invisible) - Never trust user input.

In conclusion do this:

  1. Use jQuery / AJAX to call a database, passing a userID
  2. DB returns a list of values based on the userID
  3. populate the dropdownlist with the values returned from the database.
  4. Validate the form on the server side to make sure that the value submitted is present in the user_value table.


If that's the example Database Table and an example of a Select element. Then I think the best method would be to not write anything on your own and just let the Database choose what to share and where to share.

Here we go with the coding. I will try to explain what I am writing and how I am writing; since you're a newbie :-)

HTML code for you

The HTML code for your job, would be simple as this

<select name="someName">  <!-- No options please! --></select>

Getting the UserId

Now, once the user has logged in. Try to get the UserId by any one of the following method.

jQuery

To use jQuery you will need to be using the Server's generated value, because jQuery cannot interfere the Server Requests and code. So, you can create a simple hidden input and give it the value of the current logged in user. Here is the example

<input type="hidden" id="userId" value="@WebSecurity.CurrentUserId" />

Now, using jQuery you can get the value for this input. Here would be the code for that

var userId = $('#userId').val();

ASP.NET

To use ASP.NET, you don't do anything. All you do is you use the Built-in method of the ASP.NET as

WebSecurity.CurrentUserId;

and it would give you an integer value. Which would be the userId of the currently logged in user.

Usage of WebSecurity

The WebSecurity as the following link states, is a Class of data. Which can be used in your application, to lessen down the code and to help you get the User's properties at a better rate.

This class is used as a value for the variable, or as a parameter. This method would return a particular user's property. For example, you can get User's UserId, his UserName, his CreateDate, or you can use WebSecurity to Login a user, or Log him out.

Here would be an example of using WebSecurity. Just the way you create a variable in jQuery and get its value. You use this method and get the value.

jQuery Method

var userId = $('someElement').val(); /* get the value of some element as userId */

WebSecurity.CurrentUserId Method

var userId = WebSecurity.CurrentUserId;

Then you can use it inside the Database query,

db.Query("SELECT * FROM UserProfile WHERE UserId =@0", userId);

or, write it inside the document

Response.Write(userId);

Or do what ever you want to do. You can learn the syntax of the Class and other stuff in the links of MSDN. :-)

http://msdn.microsoft.com/en-us/library/webmatrix.webdata.websecurity(v=vs.111).aspx

Sending the Ajax request

Now send the Ajax request. If you know, then wonderfull! If not, then here is the example of the Ajax request to be sent

$.ajax({  url: 'page_url',  data: 'userId=' + userId, // userId that you got from input  success: function (data) { // note the data parameter    /* write in the select statement */    $('select').html(data); // usage of data parameter  }});

Once it is done. It would update the Select element's options. But wait, what would it add to it?

It you, who control it too. You edit the server-side code to the following.

Getting the Data from Database.

If you're a newbie to the Databases and ASP.NET you need to first learn a bit.

http://www.asp.net/web-pages/tutorials/data/5-working-with-data

Ok, you can learn that a bit later too. I will still explain all my code to you. :-)

So, for Database you first need to create a Connection to the database and then you can search its tables and other content. Here is the code

var db = Database.Open("databaseName"); // Open a connectionvar userId = Request.QueryString["userId"]; // get userid from ?userId=intvar selectQuery = "SELECT * FROM table_name WHERE UserId =@0"; // Queryvar results = db.Query(selectQuery, userId); // Get data in a variable

After getting all these values, all that you need to do is to create a Response, to be sent to the client.

I hope, you're using Web Pages technology. Good! You're one step safer than others here.

Just press Page Down and move down to the last few lines and create a new Div element

<div>  <!--empty div element --></div>

Now, write an if else statement in it and create a Response which would be added to the select element.

P.S Other method (Actual method) of giving out a Response, is using the Actuall HttpResponse class and then giving the values to it. Like this

Response.Write("Hello World!");

If you write the above line, it would add this string to your select statement (although illegal) but that would make you understand its usage.

http://msdn.microsoft.com/en-us/library/system.web.httpresponse.aspx


I'm still a little confused about your constraints, but based on your comment:

The list will be pre-populated client-side (from a server I can't access/modify) THEN the AJAX call to a different DB (simple, two columns) THEN return values to original AJAX call, where THEN JS hides the values not returned (or shows the returned values, if they are initially hidden.)

Why not create a "unifying" service (on a server) so that you only make one AJAX call (from the client)?

http://MySite/MyService.aspx/GetOptionsForUser(101)

This service would make calls to both databases an return a list of the allowable option for the given user ID. This lets the server do most of the heavy lifting and greatly reduces the amount of jQuery on the client.

More Info:

The URL is what jQuery uses to make the AJAX call.

The simplest thing to do is:

  1. Create a webpage called http://mySite/MyService.aspx
  2. Add a public method called GetOptionsForUser() that accepts an integer and returns a list of numbers. This is the "unifying" logic that queries both databases. Make the method AJAX-callable by adding the WebMethod attribute.
  3. In the existing web page where you want to populate your dropdowns, you make an AJAX call to http://MySite/MyService.aspx/GetOptionsForUser and pass the User ID as the AJAX parameter.