How to use Ajax for the below requirement

Question

2.00/5 (1 vote)

See more:

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 21-Aug-15 0:39am

Member 11579819

Add a Solution

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

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

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

Afzaal Ahmad Zeeshan · Answer 1 · 2015-08-21T01:31:00

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[^]