Partieller Postback der Seite mit Dropdown-Liste mit AJAX auf MVC3-Seite EF4

Question

Ich habe eine Dropdown-Liste mit Ländernamen Wenn Benutzer ein Land aus der Dropdown-Liste auswählen.Bei der Länderauswahl brauche ich Daten (AgencyName, AgencyAddr, Pincode) zu aus der Datenbank geladen werden und füllen Sie die TextBoxen auf der rechten Seite. Das ausgewählte Land in der Dropdown-Liste sollte ausgewählt bleiben.

auf Änderung der Auswahl von Dropdownlist, ich die ganze Seite nicht wollen, dass ich .Bitte helfen

Hier ist meine EF4 Postback - ModelClasses

public class Country 
{ 
    public int CountryID { get; set; } 
    public string CountryName { get; set; } 

} 

public class AgencyInfo 
{ 
    public int CountryID { get; set; } 
    public string AgencyName { get; set; } 
    public string AgencyAddr { get; set; } 
    public int Pincode { get; set; } 

} 

Hier ist meine MVC4 Rasierer Seite Index.cshtml

 @using (Ajax.BeginForm(
"Index", 
"Home", 
new AjaxOptions { UpdateTargetId = "result" } 
)) 
{ 
@Html.DropDownList("SelectedCountryId", Model.CountryList, "(Select one event)") 
} 

<div id=’result’> 
<fieldset> 
    <legend>Country Details: </legend> 
    <div> 
     <table> 
      <tr> 
       <td> 
        <span>Country Name </span> 
        <br /> 
         @Html.EditorFor(model => model.Countries.Name) 
      @Html.ValidationMessageFor(model => model. Countries.Name) 
       </td> 
       <td> 
        <span>Agency Name </span> 
        <br /> 
        @Html.EditorFor(model => model.AgencyInfo.AgencyName) 
        @Html.ValidationMessageFor(model => model.AgencyInfo.AgencyName) 
       </td> 
      </tr> 
      <tr> 
       <td> 
        <span>Address Info </span> 
        <br /> 
        @Html.EditorFor(model => model. AgencyInfo.Address) 
        @Html.ValidationMessageFor(model => model. AgencyInfo.Address) 
       </td> 
       <td> 
        <span>Pin Code </span> 
        <br /> 
         @Html.EditorFor(model => model. AgencyInfo.PinCode) 
        @Html.ValidationMessageFor(model => model. AgencyInfo.PinCode) 
       </td> 
      </tr> 

      <tr> 
       <td> 
        <input type="submit" value="Modify" /><input type="submit" value="Delete" /> 
       </td> 
       <td> 
        <input type="submit" value="Save" /><input type="submit" value="View Resources" /> 
       </td> 
      </tr> 
     </table> 
    </div> 
</fieldset> 
</div > @end of result div@ 

Irgendwelche Vorschläge? Danke

Answer 1

Sie möchten Ajax verwenden.

Fügen Sie einen Ereignishandler hinzu, um die Auswahländerung zu überwachen. Wenn sich das Dropdown ändert, besorge dir das aktuelle Land und sende die Ajax-Anfrage. Wenn die Ajax-Anfrage zurückkehrt, aktualisieren Sie das DOM mit jQuery.

Beispiel Ansicht:

<p id="output"></p> 

<select id="dropDown"><option>Option 1</option> 
<option>Option 2</option></select> 
<script src="../../Scripts/jquery-1.5.1.js" type="text/javascript"></script> 
<script> 
    $(document).ready(function() { 
     $("#dropDown").change(function() { 
      var selection = $("#dropDown").val(); 
      var dataToSend = { 
       country: selection 
      }; 

      $.ajax({ 
       url: "home/getInfo", 
       data: dataToSend, 
       success: function (data) { 
        $("#output").text("server returned:" + data.agent); 
       } 
      }); 
     }); 
    }); 
</script> 

Beispiel Controller-Methode:

public class HomeController : Controller 
{ 
    [HttpGet] 
    public JsonResult GetInfo(string country) 
    { 
     return Json(new { agent = country, other = "Blech" }, JsonRequestBehavior.AllowGet); 
    } 
} 

Einige andere Beispiele:

eine Controller-Methode Hinzufügen ajax Anfrage zu handhaben: http://www.cleancode.co.nz/blog/739/ajax-aspnet-mvc-3

Aufruf ajax und Aktualisieren von D OM: http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_ajax2