Zeige Werte von Controller in Sicht in asp.net mvc

Question

Ich habe ein Formular mit verschiedenen Eingabefeldern, wo Benutzer ihre Informationen eingeben können.
Innerhalb des Formulars habe ich 2 Tasten. Wenn der Benutzer auf eine Schaltfläche namens "Adresse hinzufügen" klickt, möchte ich ein div mit der Adresse füllen. Und wenn der Benutzer auf eine andere Schaltfläche mit der Bezeichnung "Vorschau" klickt, wird das Formular validiert und für die Vorschau vorbereitet.

Unten ist, wie ‚My adrress‘ Button in Index.cshtml definiert ist

<button id ="address" class="btn btn-default" onclick="location.href='@Url.Action("populateAddress","Information")?addressID=2222'"> 
     Add Address 
</button> 

Also, wenn Benutzer klickt, Adresse hinzufügen, ich möchte die Adresse füllen, die ich aus der Datenbank in den div bin Abrufen auf Index.cshtml. Unten ist, wo ich die abgerufene Adresse angezeigt werden soll:

<div class="row"> 
     <div class="col-md-1"></div> 
     <div class="col-md-3"> 
      @Html.Label("Address", htmlAttributes: new { @class = "control-label" }) 
     </div> 
     <div class="col-md-6"> 
      @ViewBag.FeedAddress  //Here I want to display my retrieved address 
     </div> 
    </div> 

Also, auf den Knopf klicken, ich meine ‚Information‘ Controller-Methode ‚populateAddress‘ und vorbei an den AddressID Parameter ‚2222‘ nenne.

Unten ist, wie ich meine 'populateAddress' Methode in meinem Controller am definieren:

public void populateAddress(string addressID = null) 
     { 
      var addressDetail = db.Agency.Where(e => e.AddressCode == addressID).ToList(); 
      string AddressRetrieved= ""; 
      string StreetAddress, City, State, Zip = ""; 

      foreach(var detail in addressDetail) 
      { 
       StreetAddress = detail.Address; 
       City = detail.City; 
       State = detail.State; 
       Zip = detail.Zip; 

       AddressRetrieved= StreetAddress + Environment.NewLine + City + ", " + State + " - " + Zip;  

      } 
      ViewBag.FeedAddress = AddressRetrieved 
     } 

So, hier ist mein ViewBag mit meiner Adresse abgerufen gefüllt zu werden.
Aber mein Problem ist, nachdem es mit der Adresse gefüllt wird, anstatt es auf meiner Index.cshtml Seite im div zu zeigen, wo ich den Wert von ViewBag zurückziehe, wird meine Seite stattdessen eingereicht und zeigt meine Validierungen.

Ich möchte, dass, sobald Benutzer füllt einen Teil des Formulars über "Add Address" -Taste und klickt auf "Add Address" -Taste, meine Adresse aus ViewBag abgerufen wird, innerhalb der div angezeigt und Benutzer weiter füllen den Rest der bilden.

Ich bin nicht in der Lage, diese Art von Verhalten zu bekommen.

Kann mir bitte jemand helfen, dieses Verhalten zu erreichen oder kann sagen, was ich vermisse. Vielen Dank!

EDIT:

Bitte finden Index.cshtml Code. Die Seite ist lang, so dass ich einfach nur mit erforderlichem Code:

// input fields for user 
    <div class="form-group"> 
     <div class="col-md-2"> 
      @Html.Label("Title", htmlAttributes: new { @class = "control-label" })   </div> 
     <div class="col-md-6"> 
      @Html.EditorFor((e => e.Title), new { htmlAttributes = new { @class = "form-control" } }) 
     </div> 
    </div> 

    //Add Address button 
    <button id ="address" class="btn btn-default" onclick="location.href='@Url.Action("populateAddress","Information")?addressID=2222'"> 
     Add Address 
    </button> 

    //section to display retrieved address 
<div class="row"> 
     <div class="col-md-1"></div> 
     <div class="col-md-3"> 
      @Html.Label("Address", htmlAttributes: new { @class = "control-label" }) 
     </div> 
     <div class="col-md-6"> 
      @ViewBag.FeedAddress  //Here I want to display my retrieved address 
     </div> 
    </div>  

    // input fields for user 
    <div class="form-group"> 
     <div class="col-md-2"> 
      @Html.Label("Description", htmlAttributes: new { @class = "control-label" })   </div> 
     <div class="col-md-6"> 
      @Html.EditorFor((e => e.Description), new { htmlAttributes = new { @class = "form-control" } }) 
     </div> 
    </div> 


    //Preview Button 
    <div class="form-group"> 
     <div class="col-md-offset-2 col-md-6"> 
      <input type="submit" value="Preview" class="btn btn-default" /> 
     </div> 
    </div> 

Answer 1

In der Steuerung (mit dem Namen mainController für dieses Beispiel):

public JsonResult GetAddress(int addressId) 
{ 
    // do whatever to get what you need 
    // the Address model will need to be JSON serialized 
    return JSON(Address); 
} 

Im javascript:

function GetAddress(addressId) 
{ 
    $.ajax({ 
     type: "GET", 
     async: false, 
     url: "/main/GetAddress?addressId=" + addressId 
     contentType: "application/json", 
     context: this, 
     success: function (data) { 
      console.log(data); 
      // do stuff here 
     },    
     error: function (error) { 
      alert("error"); 
     } 
    });  
} 

Wichtig Routing-Info:
Die URL ist "/ main/GetAddress /" was bedeutet, dass es an den Controller mainController (beachten Sie, dass der "Haupt" Teil übereinstimmt) und die Funktion in Seite der Controller ist GetAddress. Es ist eine "GET" Anfrage, so dass die Verwendung der URL-Variablen in Ordnung ist.

Dies ist die grundlegende Struktur, wie Sie einen Ajax-Anruf mit MVC machen.

Besonderer Hinweis: In der Controller-Methode geben Sie ein JsonResult, kein ActionResult zurück! Verwenden Sie ActionResult, wenn Sie versuchen, durch eine Ansicht zu routen, und lassen Sie die Razor-Engine das HTML-Markup erstellen. Wenn Sie jedoch nur JSON zurückgeben, verwenden Sie JsonResult.

EDIT: Falls Sie eine POST anstelle von GET zu tun, hier, was es ist aussehen würde: In der Steuerung:

public JsonResult PostSomething(MyClass data) 
{ 
    // do something with the data -- class is MyClass 
    var result = ...... // whatever the result is, Null is ok I'd recommend some sort of "successful" reply 
    return JSON(result); 
} 

Im javascript:

function SubmitForm() 
{ 
    var formData; 
    // common to use jQuery to get data from form inputs 

    // use JSON.stringify to serialize the object 
    var data = JSON.stringify(formData); 

    // the ajax is almost the same, just add one data: field 
    $.ajax({ 
     type: "POST", 
     url: "/main/PostSomething" 
     contentType: "application/json", 
     data: data, // the second 'data' is your local variable 
     success: function(data){ 
       console.log(data); 
     }, 
     error: function(error){ 
       alert(error) 
     } 
    }); 
} 

Das 'asynch: false' und 'context: this' aus dem ersten Beispiel sind eigentlich (auch meistens) nicht notwendig.

Wie bei den meisten Programmen gibt es mehrere Möglichkeiten, dies zu tun. Diese Beispiele sind nur einfache (aber ziemlich standardmäßige) Snippets, um Sie auf den richtigen Weg zu bringen.