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
<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.
<div id="dropzone">
<!--
</div>
The jQuery code that will handle the event will be here,
$('#dropdown').change(function () {
$.ajax({
url: 'ajax-controller/action',
data: $(this).value(),
success: function (data) {
}
});
});
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[
^]