données de mise à jour sur l'événement de changement de menu déroulant de manière Ajaxian dans mvc

Question

Scénario

J'ai dropdownlist sur une page, maintenant sur l'événement de changement de celui-ci, je ne que de tirer des données de base de données puis affichez-le.

Je suis capable de le faire avec la publication, je essayé d'utiliser Ajax.Beginform() mais il toujours faire un retour.

<script src="../../Scripts/MicrosoftAjax.js" type="text/javascript"></script> 
<script src="../../Scripts/MicrosoftMvcAjax.js" type="text/javascript"></script> 

    <%using (Ajax.BeginForm("UpdatePanel", new AjaxOptions { UpdateTargetId = "divDetails" })) 
      {%> 
     <%=Html.DropDownList("Dinner", (SelectList)ViewData["Dinner"], new { onchange = "this.form.submit();" })%> 
     <div id="divDetails"> 
      <fieldset> 
       <legend>Details</legend> 
       <% if (Model != null) 
        {%> 
       <p> 
        ID: 
        <%= Html.Encode(Model.ID)%> 
       </p> 
       <p> 
        Title: 
        <%= Html.Encode(Model.Title)%> 
       </p> 
       <%} %> 
      </fieldset> 
      <%} %> 

Toute aide appréciée.

Answer 1

Avez-vous envisagé d'utiliser jQuery? J'utilise jQuery.post pour ma solution. Voici un exemple qui fonctionne pour moi:

jQuery(document).ready(function() { 

    // Dropdown or select list 
    jQuery('#countryListBox').change(function(){ populateCityListBox(); }); 

    function populateCityListBox() 
    { 
    //Get ID for selected country 
    var ctryID = jQuery("select#countryListBox").val(); 

    jQuery.post("inclyde/jquery_get_data.php", { instance: 'getCitiesByCountry', countryID: ctryID }, 
     function(data) 
     { 
      //Process data and store it in var newContent. 
      // Then bind data to the div you wish to present the content 
      jQuery("div.myNewText").html(newContent); 

     }, "json"); 
    } 
}); 

J'ai eu du mal à obtenir de travail .NET Ajax. Après que j'ai découvert jQuery, les choses sont assez douces :)

Answer 2

Je crois que votre problème avec BeginForm à être que MVC fait toujours une publication en pleine page - au moins dans mon expérience. Si vous voulez une publication "partielle", vous devez utiliser JavaScript et les services Web. Je fais exactement cela en utilisant GeoIP. Voici à quoi ressemble ma page:

<p> 
<label for="country">Country</label> 
<%= Html.DropDownList("country", new SelectList(Model.Countries, "CountryId", "Name", Model.DefaultCountry.CountryId))%> 
<%= Html.ValidationMessage("country")%> 
</p> 

<p> 
<label for="subdivision">Subregion</label> 
<%= Html.DropDownList("subdivision", new SelectList(Model.Subdivisions, "SubdivisionId", "Name", Model.DefaultSubdivision.SubdivisionId)) %> 
<%= Html.ValidationMessage("subdivision")%> 
</p> 

<script type="text/javascript"> 

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

     $('#subdivision').children().remove(); 

     var countryId = $("#country > option:selected").val(); 

     Sys.Net.WebServiceProxy.invoke 
      ( 
       '/WebServices/Regions.asmx', 
       "GetSubdivisions", 
       false, 
       { countryId: countryId }, 
       addressControl_bindOptionResults 
      ); 
    }); 

    function addressControl_bindOptionResults(data) 
    { 
     for (var x = 0; x < data.length; x++) { 
      $("#subdivision").append($('<option></option>').val(data[x].Id).html(data[x].Name)); 
     } 
    } 

</script> 

Mon service Web ressemble à ceci. Lors de l'ajout d'un nouveau service web, assurez-vous que vous supprimez l'attribut ci-dessus la déclaration de classe:

[System.Web.Script.Services.ScriptService] 

Gardez à l'esprit, votre objet retourné doit être sérialisable.

[WebMethod] 
     public Subdivision[] GetSubdivisions(int countryId) 
     { 
      if (this.repository == null) 
      { 
       Resolve(); 
      } 

      List<Subdivision> subdivisions = new List<Subdivision>(repository.GetActiveSubdivisionsDto(countryId)); 

      return subdivisions.ToArray(); 
     } 

Ignorez certains des rouages ​​internes de mon service Web. J'utilise unity, Nfluent et NHibernate pour ma couche de données, mais les bases sont les mêmes. Appelez la base de données, récupérez vos objets et renvoyez une liste d'objets de transfert de données sérialisables (les miens sont simplement le nom et l'ID).

Answer 3

Le problème est le onchange = "this.form.submit();". Lorsque vous soumettez le formulaire par form.submit() l'Ajax - Scripts de MS DonT coup de pied dans Vérifiez en plaçant un

<input type="submit" value="submit" /> 

sous la forme d'une suppression de la form.submit().. La demande dans le contrôleur sera alors Request.IsAjaxRequest = true.

Je n'ai aucune idée de comment vous pouvez vous débarrasser du bouton de soumission d'une manière agréable - je l'ai fait invisisble et je l'ai cliqué par onchange via Javascript.

C'était mon premier coup à ajax dans MVC. Ensuite, j'ai utilisé jquery et était heureux.

Answer 4

sujet vieux, mais je faisais ce même problème et finalement pensé à elle:

Change:

onchange = "this.form.submit();" 

à:

onchange = "$(this.form).submit();"