Click here to Skip to main content
15,905,963 members
Please Sign up or sign in to vote.
2.00/5 (1 vote)
Hi..
I have a requirement in my project which is something like this:
I am supposed to bring all the values of a specified column from a table into my drop down and on selection of different values in that drop down the values of the text box should change. The value on text box will come from the same table .

DO i need to use AJAX for this? If yes then let me know how to use as in I have never used AJAX before this.
Is there any other way to get that?
Posted
Comments
F-ES Sitecore 21-Aug-15 6:57am    
No you don't need to use ajax, this can be achieved using standard forms. Once you have it working with standard forms you could then implement the same functionality on top using ajax so that if people have js enabled they get a richer, better experience.

Break your problem down into its component parts, google for solutions to that issue and put it all together. So google for how you read data from your database, how you populate a dropdown, how you get the results of the dropdown via model binding etc. Then you can google how to update a textbox based on an ajax call to a controller action, or you can use the built-in mvc ajax framework to use an Ajax Form to do much the same thing.
Afzaal Ahmad Zeeshan 21-Aug-15 7:13am    
Do you mean to show the details of a record when user selects it?

In that case, Ajax will be helpful and you can load the data for the record the user selects.

1 solution

Ajax is just a fancy luxury that you can use to cut-short the traffic. Ajax is never required, nor should be ignored as in most cases it is helpful also.

The problem you are having is that you want to view the records when user selects a value from the dropdown (in HTML language it is a select element). Ajax can only help you to download a portion of the content, rather than re-downloading the entire redundant HTML DOM. There is nothing that ajax does above that.

The considerations are as,

1. When user changes the value in the dropdown,
2. Load the data from server for that record.
3. Update the DOM for previewing the record details.

I will show you an example of how-to about this.

First of all you need to handle the select element's change event, the event that gets raised when you update the value.

In ASP.NET's view HTML you do it this way
HTML
<select id="dropdown">
@foreach (var record in Model) {
   // I suspect you know what is Model
   <option value="@record.Id">
      @record.Name
   </option>
   // Assume Model is [{Id = 1, Name = "Afzaal Ahmad Zeeshan"}, ...]
}
</select>
</select>


This will create the dropdown for your records (that you returned in the Model), now you can handle the change event and show the data on the sample HTML area.

HTML
<div id="dropzone">
  <!-- This will hold the data -->  
</div>


The jQuery code that will handle the event will be here,

JavaScript
$('#dropdown').change(function () {
   $.ajax({
      url: 'ajax-controller/action',
      data: $(this).value(), // The value for selected item @record.Id
      success: function (data) { // Result from controller
         // Show the result in the #dropzone element
      }
   });
});


You may use this above code to get the data for a related record that user wants. This will allow you to send the ID and Name of the record (or other similar fields) and then download the rest of the content when user wants to see, such as Image, Education (or other fields in your table).

Finally, head over to this tip of mine and learn more about using Ajax in your ASP.NET MVC applications. A tip for ajax developers in ASP.NET MVC framework[^]
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900