Partielle de publication de page avec dropdownlist à l'aide d'AJAX sur MVC3 page EF4

J'ai un dropdownlist qui répertorie les noms de Pays
Lorsque l'utilisateur sélectionnez un pays de la liste déroulante.Basé sur la sélection de pays, j'ai besoin de données(AgencyName, AgencyAddr,code pin) pour être chargé à partir de la base de données et de remplir les TextBoxs sur le côté droit.Le pays sélectionné dans la liste déroulante doit rester activée.

sur le changement de dropdownlist ,je ne veux pas l'intégralité de la page de publication .Merci de m'aider

Voici mon EF4 - 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; }

}

Voici mon MVC4 rasoir page d'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@

Des suggestions ? Merci

InformationsquelleAutor Lee | 2012-03-25
  1. 4

    Vous souhaitez utiliser ajax.

    Ajouter un gestionnaire d'événements à surveiller le changement de sélection. Lorsque la liste des changements, obtenez le pays actuel et envoyer la requête ajax. Quand la requête ajax retourne mise à jour du DOM avec jQuery.

    Exemple:

    <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>

    Exemple la méthode du contrôleur:

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

    Quelques autres exemples:

    l'ajout d'un contrôleur de méthode pour gérer les requêtes ajax:
    http://www.cleancode.co.nz/blog/739/ajax-aspnet-mvc-3

    appel ajax et la mise à jour DOM:
    http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_ajax2

    InformationsquelleAutor NivekL33THaxor