CODEWITHSUNDEEP
asp.netvb.netauto-populate
Phoenix
Phoenix

Reputation: 411

ASP.Net Auto-populate field based on other fields

I've just moved to web development and need to know how i can implement below requirement using asp.net and vb.net.

I have three fields in a form which are filled by users. Based on these three values, i need to auto-populate the 4th field. I have planned to implement this in the following way

  1. Write a separate class file with a function to calculate the possible values for the 4th fields based on 1st 3 inputs. This function can return some where between 1-10 values. So I've decided to use drop-down for 4th field, and allow users to select the appropriate value.

  2. Call the above function in onchange function of 3rd field and take and use the return values to populate the 4th field. I'm planning to get the return values in array field.(Does this need a post back?)

Please let me know how if there is better way to implement this.

Thanks.

Upvotes: 0

Views: 2959

Answers (3)

kefka
kefka

Reputation: 11

An easy way is to use jQuery for the UI (that way you don't have to worry about long winded javascript and deal with browser compatibility as it's already taken care of for you) and have it call to the server for the data. For the server, your easiest route is to return JSON for looping values.

Include your jQuery:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>

Then add in a handle for the JavaScript:

<script type="text/javascript">
function autoPopulate() {
   var value1 = $('#ddl1').val();
   var value2 = $('#ddl2').val();
   var value3 = $('#ddl3').val();
   var url = 'path/to/your/file.aspx?value1=' + value1 + '&value2=' + value2 + '&value3=' + value3;
   $.getJSON(url, function(data) {
      data == null ? return false : data = eval(data);
      var ddl = $('#ddl4')[0];
      for (i = 0; i < data.length; i++) {
         var option = new Option(data[i][0], data[i][1]);
         if ($.browser.msie) {
            ddl.add(option);
         } else {
            ddl.add(option, null);
         }
      }
   }
}
</script>

(Yes, I know I used a native loop but I'm little lazy here today :) )

Now, for your server side code you'll want your code your page to return data in the format of:

[['value1','text1'],['value2','text2'],['value3','value3']]

so something like:

<script type="vb" runat="server">
Private Sub Page_Init()
   // get your data
   // loop through it and add in values
   // ex.
   Dim result As String = "[" //start multi-dimensional array
   For Each Item As String In data
      result += String.Format("['{0}','{1}'],", _value, _text)
   Next
   result = result.SubString(0, result.Length - 1) // removes trailing comma
   result += "]" // closes off m-array
   Response.Write(result)
   Response.Flush()
End Sub
</script>

Upvotes: 0

Brian Smith
Brian Smith

Reputation: 367

You need javascript or to set autopostback=true on your form elements.

From a user perspective the best thing is to use javascript to populate the field for display, BUT when the form is submitted use your backend function to validate it. This will make sure the user didn't change the value.

Upvotes: 0

jocull
jocull

Reputation: 21095

You may want to consider doing this with Javascript. You could read and control the fields pretty easily with pure Javascript, or using a nice library like jQuery (my favorite). If you did it this way, no post-back would be required and the 4th field would update immediately. (Nice for your users)

You can also do it with ASP.NET for the most part. "onchange" in ASP.NET still requires Javascript as far as I know, it just does some of it for you. A post-back will definitely happen when you change something.

Upvotes: 2

Related Questions