ASP.Net MVC mise à Jour ViewModel sur la liste Déroulante de Sélection changé

Au début, je suis tout à fait nouveaux sur le développement web. Je suis en train de développer une application Web qui consiste en une seule page (j'ai commencé avec un projet vide en essayant de suivre le modèle mvc).

Pour remplir mon point de Vue, je passe un ViewModel par le biais de mon contrôleur HomeController à mon "Home"Voir.

Maintenant, je veux changer un peu de l'Étiquette-Textes en fonction d'une liste Déroulante de sélection.

ViewModel:

public IEnumerable<Models.Language> AvailableLanguages;
public Models.Language SelectedLanguage
Public IEnumerable<Models.Text> Content;

Langue:

public int ID;
public string LanguageText;

Texte:

public Language Language;
public string Description;

HTML:
@modèle Viewmodel.MyViewModel

<div>
    @Html.DropDownFor(x => x.AvailableLanguages, 
    new SelectList(Model.AvailableLanguages, 
    "ID", 
    "LanguageText", 
    new {@onchange= ... })) 
</div>

<div>
    @{
        @:@Model.MyViewModel.Content
        .Where(o => o.Language.Equals(Model.SelectedLanguage)
        .First())
        .Description
     }
</div>

J'ai lu quelque chose à propos de cette "@onchange" attribut (Ajax, JQuery) - mais pour être honnête, Ce serait formidable s'il y aurait quelque ASP/MVC/HTML solution pour arriver à mon but de mettre à jour mon SelectedLanguage de la Propriété chaque fois que l'élément sélectionné de la liste déroulante est changé.

De plus: Est-il un tutoriel pour la création web (asp, html, ajax, jquery, js) que vous pouvez recommander?

Merci!

MODIFIER

Maintenant, j'ai essayé de mettre en œuvre le code fourni, mais il semble que rien ne se passe lors de la modification de l'élément sélectionné...

Script:

<div class="LanguageSelection">
        @{
            @Html.DropDownList("SelectedLanguage", new SelectList(Model.AvailableLanguages, "ID", "Description"))
            <script src="~/Scripts/jquery-1.10.2.min.js" type="text/javascript">
                var url = '@Url.Action("ChangeLanguage", "Home")';
                $('#SelectedLanguage').change() {
                    $.getJSON(url, {
                        ID: $(this).val() 
                    }, function(response){
                        $('#Title').text(response.Title);   
                    });
                };
            </script>
        }
    </div>

JsonResult:

public JsonResult ChangeLanguage(int id) {
        var data = new {
            Title = HVM.Title.Where(o => o.Language.ID.Equals(id)).First(),
        };
        return Json(new { success = true });
    }

Le problème doit être situé quelque part dans le script, l'ChangeLanguage Méthode n'est pas encore exécutée.

Avez-vous essayé le javascript/jquery solution?
Un peu moins clair, exactement ce que vous voulez faire. Vous ne pouvez pas lier un dropdownlist à un objet complexe (IEnumerable<Models.Language>). Si vous souhaitez identifier la langue sélectionnée sur le post de retour, vous avez besoin d'une propriété de se lier à (dire int SelectedLanguage { get; set; }) et puis @Html.DropDownFor(x => x.SelectedLanguage, new SelectList(Model.AvailableLanguages ...).
La deuxième partie de votre point de vue n'a pas de sens. Rasoir code est analysé sur le serveur avant est envoyé à la vue, de sorte MyViewModel.Content ci ne serait jamais que la valeur initiale de la SelectedLanguage. Si vous souhaitez mettre à jour quelque chose dans les DOM en fonction de la langue sélectionnée, alors vous devez utiliser l'ajax pour appeler un contrôleur, en passant la langue sélectionnée et le retour de la de nouvelles de nouvelles valeurs que vous souhaitez afficher. Notez également que vos modèles seulement ont des champs (pas de get/set) donc rien ne lie, lorsque vous postez en arrière.
C'est pourquoi j'ai dit que je suis assez nouveau sur le web dans le secteur du développement. Donc vous voulez dire il n'y a aucun moyen de lier un SelectedValue à une Liste<object> sans l'aide de technologies de pointe telles que l'ajax? Si oui, pourriez-vous recommander quelques tutoriels?
Vous pouvez lier une dropown à un type de valeur (int, string etc), mais pas à un objet complexe (un <select> enregistre une valeur unique et n'a aucun concept de ce que IEnumerable<Language> est. Si vous expliquer ce que c'est que vous voulez faire (c'est à dire quel est le but de la manipulation de la .change cas), je peux vous donner une réponse.

OriginalL'auteur C4p741nZ | 2015-03-25

  1. 6

    Les commentaires, vous voulez être en mesure de mettre à jour les étiquettes en fonction de la langue sélectionnée. Pour ce faire, vous aurez besoin d'utiliser ajax pour la langue sélectionnée pour un contrôleur de la méthode de retour json et mettre à jour les DOM. Votre modèle de vue doit être

    public SelectList AvailableLanguages { get; set; }
public int SelectedLanguage { get; set; }

    et dans le contrôleur

    public ActionResult YourMethod()
{
  var model = new yourModel();
  model.SelectedLanguage = //set this if you want a default
  var availableLanguages = //get you list of languages
  model.AvailableLanguages = new SelectList(availableLanguages, "ID", "LanguageText")
  return View(model);
}

    Vue

    @Html.DropDownListFor(m => m.SelectedLanguage, Model.AvailableLanguages)

<script>
  var url = '@Url.Action("GetLanguageLabels", "yourControllerName")';
  $('#SelectedLanguage').change() {
    $.getJSON(url, { ID: $(this).val() }, function(response) {
      //Note you will need to give your labels an id attribute
      $('#Label1').text(response.Label1);
      $('#Label2').text(response.Label2);
    })
  });
</script>

    Et la méthode pour obtenir les étiquettes en fonction de la langue sélectionnée

    public JsonResult GetLanguageLabels(int ID)
{
  //Build a object of label values based on the selected language ID
  var data = new
  {
    Label1 = someValue,
    Label2 = anotherValue,
    ....
  };
  return Json(data, JsonRequestBehavior.AllowGet);
}

    Côté remarque: Certains problèmes avec votre code actuel. (1) les modèles ont des champs, pas de propriétés (pas de get/set) donc rien ne pourrait être tenu sur le post de retour. (2) Vous ne pouvez pas lier un contrôle html d'un objet complexe (seulement un type de valeur, ou, dans le cas de <select multiple>, un tableau de types de valeur).

    Merci, je vais le mettre en œuvre dès que possible. Pourriez-vous expliquer le code entre les <script> Balises? Pour le moment, je suis en train d'écrire mon code avec le Rasoir-Syntaxe - ce que je Dois changer quelque chose dans votre code? Vous voyez, je suis assez nouveau sur ce site web de développement des trucs...
    OK, Vous aurez besoin d'inclure la jquery.{version}.js fichier (à l'aide de regroupement ou de la Scripts dossier). et vous aurez besoin de mettre à jour quelques chose à la hauteur de vos exigences (par exemple, yourControllerName et les id de vos étiquettes, car vous ne donnez pas assez d'informations). Si vous avez des problèmes de poster le code que vous avez essayé. Et vous ne devriez pas marquer une réponse comme acceptée jusqu'à ce que vous l'essayer 🙂
    J'ai ajouté un peu plus de code - peut-être que vous pouvez aider une fois de plus? Merci à l'avance!
    Vous allez avoir besoin pour poser une nouvelle question si votre avoir prolems avec votre nouveau code. Il existe de nombreux problèmes sur place le script à l'intérieur d'un <script> étiquette au bas de la page. Le jquery de référence doit être séparé balise de script. Votre méthode est de retour return Json(new { success = true }); mais il doit être return Json(data, JsonRequestBehavior.AllowGet). Placer des points d'arrêt sur le script et le contrôleur de la méthode debug-vous le code pour comprendre ce qui se passe en réalité
    Merci quand même, enfin vous l'avez fait 🙂 Maintenant, il fonctionne (presque) comme prévu. Suis-je autorisé à poser une dernière question? Je veux utiliser mon HomeViewModel à l'intérieur de mon ChangeLanguage de la Méthode, mais la référence est nulle même si je suis la création d'une instance dans ma Méthode Index (ce.ViewModel = new HomeViewModel();)

    OriginalL'auteur

  2. 1

    Vous assurez-vous que les éléments sont dans une forme et d'une juste et le nom de la fonction après le onchange...

    @onchange="submitdata();"

    Puis vous ajoutez le script.

    function submitdata()
{
  $('form').submit();
}

    Pour un aspect plus "MVC" approche, vous devez commencer avec une vue fortement typée à l'aide d'un modèle.

    @model My.Path.To.Model

    Vous serait également envelopper les données du formulaire sur votre rasoir page avec...

    using (@Html.BeginForm("myMethod", "Home", FormMethod.Post)){
     //form and inputs here, ect
     <form method="POST" action="" >
         //properties bound to inputs to change your model, or html helpers like display for...
         <input type="Submit" name="Submit" value="Submit"/>
     </form>
}

    Vous serait alors de passer le modèle en tant que paramètre dans l'action du Contrôleur, ce qui est appelé à la soumission du formulaire:

    [HttpPost]
 public FileStreamResult myMethod(Model model)
 {
     string str = model.imapropertyonthemodel;

 }

    Si vous êtes nouveau à la MVC je recommande de commencer avec les bases de W3 écoles, ou si vous avez pluralsight, il y a quelques didacticiels.

    Si je comprends votre extrait de la forme (btw. quand dois-je utiliser un formulaire?) envoyée après un bouton sur le formulaire est cliqué. Ce que je veux faire est de mettre à jour mon point de Vue complet après la sélection de ma liste Déroulante est changé (si possible sans la compensation des champs de saisie sur ma page).
    Désolé je n'étais pas plus clair. Les premières lignes répond à la question. Vous avez la fonction javascript appelée à partir de la @onchange. Ainsi, lorsque la liste déroulante changé la forme serait "soumis", qui vous donnent accès à toutes les valeurs que vous avez voulu à partir de là. Vous n'auriez pas à utiliser un bouton. En plus d'avoir accès à toutes les valeurs, l'événement est capturé en javascript, donc vous pouvez faire ce que vous voulez l'afficher.

    OriginalL'auteur CodeBob