CODEWITHSUNDEEP
jqueryajaxjsonc#-4.0asp.net-mvc-4
Hubert Solecki
Hubert Solecki

Reputation: 2761

Can get my data from controller using Ajax

I'm working on a project in asp.net mvc4. Actually I'm doing a form where I have a Select which contains a list of contacts:

<select id="choix_contact">
    <option>Choisir un contact</option>
        @if (ViewBag.ListeContacts != null)
           {
                foreach (var Contact in ViewBag.ListeContacts)
                     {

                        int index = ViewBag.ListeContacts.IndexOf(Contact);
                        <option value="index">@Contact.Nom</option>
                     }
           }
           else
           {
               <option>Pas de contact</option>  
           }  </select>

When I click on a contact in the list, I would like to get data about that contact thanks to a functions which returns me Json Data from the controller. I pass to that functions a parameter which is the index of the contact in the list. My function looks like that :

public JsonResult GetContactInfo(int indexContactList)
    {
        int NumDossier = StructureData.DonneNumDossier((string)Session["Utilisateur"], (string)Session["MotDePasse"]);
        List<Contact> ListeContacts = StructureData.DonneListeContact(NumDossier);
        Contact ContactInfos = new Contact(ListeContacts[indexContactList].Nom, ListeContacts[indexContactList].Prenom, ListeContacts[indexContactList].Email, ListeContacts[indexContactList].Fonction, ListeContacts[indexContactList].TelephoneFixe, ListeContacts[indexContactList].TelephonePort);
        return Json(ContactInfos);
    }

So now to get data in Ajax from the controller to the view, I use that code :

$(document).ready(function() {
    $("#choix_contact").change(function () {
        var selectContact = document.getElementById('choix_contact');
        var index = selectContact.value;
        var url = "/Accueil/GetContactInfo";
        $.getJSON(url, { indexContactList: index }, function (data) {
            $("#nom").html(data.Nom);
            $("#prenom").html(data.Prenom);
            $("#email").html(data.Email);
            $("#fonction").html(data.Fonction);
            $("#telFix").html(data.TelephoneFixe);
            $("#telPort").html(data.TelephonePort);
        });
    });
    });

The thing is now that it doesn't work at all, it doesn't even go inside the ajax script... Somebody maybe has an idea ?

Upvotes: 0

Views: 1281

Answers (2)

Kenneth
Kenneth

Reputation: 28737

From your comments I see you're getting the following URL:

localhost:50499/Accueil/GetContactInfo?indexContactList=index

So you're passing the value index to your action-method. index is not an integer so the server will throw a 500. If you look at the error you will see something along the lines of "cannot parse value index to System.Int32"

What you need to is change this in your view:

int index = ViewBag.ListeContacts.IndexOf(Contact);
<option value="index">@Contact.Nom</option>

to 

int index = ViewBag.ListeContacts.IndexOf(Contact);
<option value="@index">@Contact.Nom</option>

Notice the @-sign in front of index, this makes sure you're outputting the variable, not the string.

Apart from that, from your comment I deduct that the elements you're binding the data to are textboxes <input type="text" />. If that's the case you should also use the val-method instead of the html-method:

$.getJSON(url, { indexContactList: index }, function (data) {
            $("#nom").val(data.Nom);
            $("#prenom").val(data.Prenom);
            $("#email").val(data.Email);
            $("#fonction").val(data.Fonction);
            $("#telFix").val(data.TelephoneFixe);
            $("#telPort").val(data.TelephonePort);
        });

Upvotes: 2

Darin Dimitrov
Darin Dimitrov

Reputation: 1038710

You should allow GET requests when returning JSON which are blocked by default:

return Json(ContactInfos, JsonRequestBehavior.AllowGet);

NOTE 1: If you had used a javascript debugging tool such as FireBug or Chrome Developer toolbar you would have seen that your server is returning 500 status code and in the response body an exception telling you that you need to set the JsonRequestBehavior to AllowGet. Exception messages are not always very meaningful but in this particular case the exception message you would have seen even contains the solution.

NOTE 2: Make sure that that the Contact class that you are returning from your controller action doesn't contain any circular references because you cannot JSON serialize such structures.

NOTE 3: I would recommend you using the Html.DropDownListFor helper instead of manually building your dropdowns as shown in your question.

Upvotes: 1

Related Questions