Aktualisieren Sie eine Teilansicht mit einer Zeichenfolge aus einer anderen Teilansicht auf Senden?

Question

Ich bin neu bei MVC und Web Api und bleibe stecken. Bitte beachten Sie: Ich verwende ApiControllers, keine Controller!

Situation Ich habe zwei Teilansichten. Die erste hat Dropdown-Listen und eine Schaltfläche zum Senden. Die zweite ist nur eine Bestätigungsansicht, die zeigt, was der Benutzer ausgewählt hat, nachdem der Benutzer ihn übermittelt hat. Wenn ich auf "Senden" klicke, möchte ich eine Zeichenfolge (die die kombinierte Auswahl des Benutzers enthält) an die zweite Teilansicht senden und diese aktualisieren.

Frage Als ich auf der ersten Teilansicht drücken einreichen, ich möchte eine Zeichenfolge in der zweiten Teilansicht senden und die zweite Teilansicht aktualisieren. Wie kann ich das machen? Das Senden des Strings kann natürlich auch indirekt erfolgen, wie Ansicht auf Controller und dann zurück zur Ansicht. Ich möchte nur mindestens ein Weg wissen.

Noch einmal, beachten Sie, dass ich Web-API-Controller, keine Controller verwenden. Die meisten Leute benutzen normale Controller, was für mich nicht zutrifft. Sie sind anders.

Dinge, die ich versuchte,/Was ich glaube, ich nicht von anderen Stackoverflow Antworten tun können:

1. ich keine Controller-Methode verwenden, kann eine Teilansicht zurückzukehren, wie in dieser sehr ähnlich gestellten Frage Same question but not with ApiControllers.
2. Ich kann keine Daten in einer Klasse speichern, daher kann ich keine Ansicht mit @model ExampleClass eingeben, um mit @ Model.ExampleProperty auf gespeicherte Inhalte zuzugreifen.
3. Da ich keine Daten in einer Klasse speichern oder ein Modell aus einer Controller-Methode wie View (Modell) zurückgeben kann, konnte ich Html.DropDownListFor (model => model.SelectedValue) auch nicht verwenden, um den SelectedValue in mein Modell und Zugriff zu speichern es in der anderen Teilansicht. Anstatt meine Dropdown-Listen zu füllen, fügte ich manuell ein div hinzu, nannte eine GET-Methode, die eine Liste zurückgab, und füllte die Listen mit Anhängen an sie.

Also, was genau kann ich tun? Ich habe ViewData auch versucht, aber die gespeicherten Daten würden nicht dauern, nachdem eine Controller-Methode beendet wurde. Ich habe keine Ideen mehr. Ich hoffe, ich täusche mich über etwas und verpasse eine Methode, weil es fühlt, dass es nicht so schwer sein sollte. Wenn Sie kurz den Ablauf beschreiben könnten, wie ich eine Zeichenfolge übertragen und/oder die zweite Teilansicht aktualisieren würde, nachdem Sie auf "Senden" geklickt haben, wäre das sehr zu begrüßen!

Vielen Dank im Voraus!

Modellklasse

public class Vehicle 
    { 
     public class Make 
     { 
      public int MakeId { get; set; } 
      public string MakeName { get; set; } 
     } 

     public class Model 
     { 
      public int ModelId { get; set; } 
      public string ModelName { get; set; } 
     } 
    } 

ApiController Klasse. Die ViewData scheint ihren Inhalt nicht zu speichern. Ich wollte die Auswahl des Benutzers in ViewData mit der ersten POST-Methode speichern und die Auswahl mit der zweiten Methode abholen, aber der Inhalt von ViewData wurde bereits null.

public class VehicleController : ApiController 
    { 
     public ViewDataDictionary ViewData = new ViewDataDictionary(); 

     [HttpPost] 
     public void StoreMakeAndModel(string user_selections){ 
      ViewData["message"] = user_selections; 
     } 

     [HttpGet] 
     public string ConfirmationMessage(){ 
      ViewData["message"] = "You selected the " + ViewData["message"].ToString(); 
      return ViewData["message"].ToString(); 
     } 

     //This returns a list to populate a drop down list 
     [HttpGet] 
     public IEnumerable<Vehicle.Make> Makes(){ 
      //This function reads from xml and returns List<Vehicle.Make> 
      ... 
      return makesList; 
     } 

     //This returns a list to populate a drop down list 
     [HttpGet] 
     public IEnumerable<Vehicle.Model> Models(int id){ 
      //This function reads from xml the car models that match the make id 
      ... 
      return modelsList; 
     } 
    }  

Erste Teilansicht Es verfügt über 2 Dropdown-Listen und Absenden-Button. Es gibt ein verstecktes div, das nach dem Übergeben der Form anzeigt, dass die zweite Teilansicht gerendert wird. Ich hoffte, dass es nur geladen wird, wenn es angezeigt wird, damit ich $ (Dokument) verwenden kann.ready (function()), um meine Zeichenkette dort anzuzeigen, aber sie wird geladen, wenn die Hauptseite geladen wird, obwohl sie ausgeblendet ist. Ich weiß also nicht, wie ich es nach der ersten Teilansicht mit der Zeichenkette aktualisieren soll.

<select required id="makes_DDL" name="makes_DDL"></select> 

<select required id="models_DDL" name="models_DDL"></select> 

<input type="submit" id="submit_button" value="Submit Form" onclick="formSubmit()" /> 

<div id="thank_you_div" style="display:none;"> 
    @Html.Partial("_ThankYou"); 
</div> 

    function formSubmit() { 
     //Combines the make and model into one string, Ex: Chevrolet Malibu 
     var parameter = $("#makes_DDL").children(":selected").text() + " " 
      + $("#models_DDL").children(":selected").text(); 
     var uri = "api/vehicle/storemakeandmodel/" + parameter; 

     $.ajax({ 
      url: uri, 
      type: "post", 
      updatetargetid: "thank_you_div", 
      success: function (data) { 
       $("#thank_you_div").show(); 
      }, 
      }); 
} 

Meine Liste Population sieht so aus; Das ist meine erste Liste. Ich konnte @ Html.DropDownListFor nicht zum Arbeiten bringen, weil ich nichts speichern konnte, da ich etwas wie View (Modell) nicht von einer Controller-Methode zurückgeben kann.

$(document).ready(function() { 
     $.getJSON("api/vehicle/makes", function (makes) { 
      $("#makes_DDL").append("<option value= ''>Select a make</option>"); 
      $.each(makes, function (id, make) { 
       $("#makes_DDL").append("<option value=" + make.MakeId + ">" + make.MakeName + "</option>"); 
      }); 
     }); 
    }); 

Zweite Teilansicht Es wird versucht, die gespeicherte Nachricht in Viewdata zu bekommen, aber es ist schon weg und GETS null.

<div id="thank_you_div">Thank you!</div> 

<script type="text/javascript"> 
    $(document).ready(function() { 
     alert("Thank You Partial View ready!"); 
     $.ajax({ 
      url: "api/vehicle/confirmationmessage", 
      type: "get", 
      updatetargetid: "thank_you_div", 
      success: function (message) { 
       $("#thank_you_div").html(message) 
      } 
     }); 
    }) 
</script> 

Answer 1

Werfen Sie einen Blick auf Ihre ApiController Aktionsmethoden.

[HttpPost] 
public void StoreMakeAndModel(string user_selections) 
{ 
    ViewData["message"] = user_selections; 
} 
[HttpGet] 
public string ConfirmationMessage() 
{ 
    ViewData["message"] = "You selected the " + ViewData["message"].ToString(); 
    return ViewData["message"].ToString(); 
} 

Sieht aus wie Sie versuchen, Daten zu Viewdata zu speichern, wenn die erste Methode aufgerufen wird und es in der zweiten Methode zu lesen, wenn Sie Ihren zweiten Ajax-Aufruf zu machen. Aber das wird nicht funktionieren! Weil http ist zustandslos. Ihr zweiter Anruf hat keine Ahnung, was Ihr erster Anruf getan hat. Sie können keine Daten in ViewData speichern, um auf mehrere HTTP-Anforderungen zuzugreifen. Es macht keinen Sinn, ViewData überhaupt in einem API-Controller zu verwenden. Api-Controller-Endpunkte sollten rein Daten zurückgeben.

In Ihrem Fall, was Sie tun sollten, ist einfach Ihre erste Methode geben die Zeichenfolge Nachricht, die Sie wollen. Im Erfolgs-Handler des ersten Ajax-Aufrufs erhalten Sie diese Zeichenfolge (Antwort der api-Methode) im Erfolgs-Callback. Sie können dies verwenden, um das DOM nach Bedarf zu aktualisieren.

Die Teilansicht muss ebenfalls nicht erstellt werden. Sie benötigen lediglich ein Container-div-Element, um die Antwort anzuzeigen.

Jetzt aktualisieren Sie in Ihrem ersten AJAX-Aufruf des Rückrufs das DOM mit der Antwort, die zurückkommt.

Auch $.ajax hat keine Einstellungseigenschaft namens updatetargetid!

function formSubmit() { 
    //Combines the make and model into one string, Ex: Chevrolet Malibu 
    var parameter = $("#makes_DDL").children(":selected").text() + " " 
     + $("#models_DDL").children(":selected").text(); 
    var uri = "api/vehicle/?user_selections=" + parameter; 
    $.ajax({ 
     url: uri, 
     type: "post" 
    }).done(function(res) { 
     $("#thank_you_div").html(res).show(); 
    }).fail(function(x, v, e) { 
     console.log(e); 
    }); 
} 

Angenommen, Ihre api-Controller-Methode gibt die Zeichenfolge, die Sie

wollen

[HttpPost] 
public string StoreMakeAndModel(string user_selections) 
{ 
    return "You selected the "+user_selections; 
}