Wie man einen Datensatz von der Datenbank erhält und Textkasten auf Dropdown-Auswahl auffüllt

Question

Zuerst aller Entschuldigung für mein schlechtes Englisch. Ich bin neu in der Verwendung von AJAX und APIs, also weiß ich wirklich nicht, was ich falsch mache. Ich muss einige Textfelder nach der Auswahl einer Dropdown-Liste füllen, sagen wir muss ich verwenden: Name Nachname Alter Geschlecht

Ich hatte bereits eine Ajax-Funktion und eine API, die gut funktioniert (ich benutze es in einer anderen Ansicht für Anzeigezwecke) jedoch funktioniert mein Ajax-Code nicht, füllt das Textfeld nicht wie es soll. Ich habe versucht, die Anfrage mit Chrome zu Störungsbehebung, ist dies der url:

https://localhost:44397/api/pacient/21?id=21&_=1510262500793

Nach mir, diese URL shoud den Namen meiner Datenbank-Datensatz enthalten, jedoch habe ich zwei mal meine pacient id.

Meine Drop-Down-Liste:

<div class="col-md-4 form-group"> 
    @Html.LabelFor(m => m.Pacient) 
    @Html.DropDownListFor(m => m.Pacient, new SelectList(Model.Pacient,"Id", "Name"), "--Select--", new { id = "pacientSelector", @class = "form-control" }) 
</div> 

Mein API-Controller Aktion (mit AutoMapper):

//GET /Api/pacient/1 
    public IHttpActionResult GetPacient(int id) 
    { 
     var pacient = _context.Pacient.SingleOrDefault(p => p.Id == id); 

     if (pacient == null) 
      return NotFound(); 


     return Ok(Mapper.Map<Pacient, PacientDto>(pacient)); 
    } 

Meine AJAX-Funktion:

 $('#pacientSelector').change(function() { 
      var pacientId = $(this).val(); 
      $.ajax({ 
       url: '/api/pacient/' + pacientId, 
       type: 'GET', 
       async: true, 
       cache: false, 
       data: {id: pacientId}, 
       success: function(data, pacient) { 
        $("#textboxId").val = pacient.Name; 
       } 
      }); 
     }); 

Answer 1

Sie sind die ID zweimal zu senden, eine als Querystring in der URL (durch explizite Verkettung des Werts mit der URL) und eine in der data. Da Sie die Methode GET als Methode verwenden, wird die Methode jQuery $.ajax den Dateneigenschaftswert an die URL als Abfragezeichenfolgenschlüsselwertelemente anhängen, daher sehen Sie den Wert 2 mal. Aber obwohl Sie es zweimal senden. Ihre API-Aktionsmethode wird immer noch in der Lage sein, den Wert von einem von ihnen zu erhalten.

Wenn die doppelten Werte in URL Sie stören, entfernen Sie einfach von ihnen.

$('#pacientSelector').change(function() { 
    var pacientId = $(this).val(); 

    $.ajax({ 
     url: '/api/pacient/',    
     data: {id: pacientId} 
    }).done(function(data) { 
     console.log(data); 
    }); 

}); 

nun die Textbox Wert zu setzen, müssen Sie die val() Methode verwenden. Stellen Sie außerdem sicher, dass Sie auf die richtige Antwortvariable zugreifen, die zu dem done- oder dem success-Handler zurückkehrt.

.done(function(data) { 
    $("#textboxId").val(data.Name); 
}); 

Diese Arbeit sollte das Antwortobjekt unter der Annahme hat eine Name Eigenschaft. Denken Sie daran, Javascript ist case sensitive. Also, wenn Sie Ihr Web-API Klein zurückzukehren konfiguriert ist, verwenden Sie data.name

Sie können das $.ajax Gespräch mit dem $.get Anruf Stenografie ersetzen, um es zu machen kompakten

$('#pacientSelector').change(function() { 

    $.get('/api/pacient/' + $(this).val()) 
     .done(function (data) { 
      $("#textboxId").val(data.Name); 
     }); 
});