web-dev-qa-db-fra.com

Comment obtenir des données de Model vers JavaScript MVC 4?

c'est ma fonction: 

 <script> function Calculate()
     {
         var ItemPrice = document.getElementById("price");
         var weight = document.getElementById("weight");
         var SelWeight = weight.options[weight.selectedIndex].value;
         alert(SelWeight);
         var Category = document.getElementById("SelectedCategory");
         var SelCategory = Category.options[Category.selectedIndex].value;
         alert(SelCategory);

     }
    </script>

je veux obtenir SelCategories.Tax et SelCategories.Duty pour les ajouter à la valeur de poids et au prix total pour afficher le total dans une étiquette .. J'utilise ASP.NET MVC 4 et c'est mon modèle que je souhaite utiliser 

public class CategoriesModel
    {
        public int CategoryID { get; set; }
        public string CategoryName { get; set; }
        public decimal Duty { get; set; }
        public decimal Tax { get; set; }
        public IEnumerable<SelectListItem> CategoriesList { get; set; }
    }
javascriptasp.netasp.net-mvcasp.net-mvc-4
11
YaraHanaa

Je pense que la meilleure approche ici est d’utiliser Json et quelque chose comme Vue.js , Knockout.js , etc. (mais vous pouvez aussi le faire sans ces bibliothèques, si votre cas est simple).

Tout d'abord, vous devez installer le support Json avec une commande dans la console PM:

PM> install-package NewtonSoft.Json

Ensuite, dans votre vue, vous pouvez convertir votre modèle en objet javascript comme ceci:

@model ...
@using Newtonsoft.Json

...

<script type="text/javascript">

    var data = @Html.Raw(JsonConvert.SerializeObject(this.Model));

</script>

Ensuite, vous pouvez accéder à toutes les propriétés de votre modèle à l'aide de JavaScript clair:

var id = data.CategoryID;

C'est tout! Utilisez knockout (mise à jour 2018: ceci est obsolète, rien ne vous oblige à utiliser knockout maintenant) si votre logique est compliquée et que vous souhaitez rendre votre vue plus puissante. Cela peut paraître un peu déroutant pour les débutants, mais lorsque vous l'obtiendrez, vous acquerrez des connaissances extrêmement puissantes et pourrez simplifier considérablement votre code d'affichage.

26
Roman Pushkin

Vous devez créer des actions (méthodes dans le contrôleur) qui renvoient JsonResult.

Du côté client, passez des appels ajax au serveur pour récupérer et utiliser ces données. Pour ce faire, le plus simple consiste à utiliser l’une des méthodes ajax de jQuery.

   public JsonResult GetData(int id)
    {
        // This returned data is a sample. You should get it using some logic
        // This can be an object or an anonymous object like this:
        var returnedData = new
        {
            id,
            age = 23,
            name = "John Smith"
        };
        return Json(returnedData, JsonRequestBehavior.AllowGet);
    }

Lorsque vous utilisez un objet jQuery, accédez au / ControllerName / GetData / id , vous obtenez un objet JavaScript dans le rappel de réussite que vous pouvez utiliser dans le navigateur. Cet objet JavaScript aura exactement les mêmes propriétés que vous avez définies côté serveur.

Par exemple:

function getAjaxData(id) {
    var data = { id: id };
    $.get('/Extras/GetData/1', // url
        data, // parameters for action
        function (response) { // success callback
            // response has the same properties as the server returnedObject
            alert(JSON.stringify(response)); 
        },
        'json' // dataType
    );
}

Bien sûr, dans le rappel de succès, au lieu de créer une alerte, utilisez simplement l'objet de réponse, par exemple

if (response.age < 18) { ... };

Notez que la propriété d'âge définie sur le serveur peut être utilisée dans la réponse JavaScript.

2
JotaBe

Si vous préférez une classe, essayez jsmodel. Après avoir converti le modèle de vue mvc en javascript, cela permet de récupérer les mises à jour DOM.

var jsmodel = new JSModel(@Html.Raw(Json.Encode(Model)));

Ensuite, chaque fois que vous voulez obtenir le dernier état du DOM, faites ceci pour mettre à jour votre variable:

var model = jsmodel.refresh();

Site Web: http://chadkuehn.com/jquery-viewmodel-object-with-current-values/

Il existe également un nuget: https://www.nuget.org/packages/jsmodel/

1
Chad Kuehn
var errors = '@Html.Raw(Json.Encode(ViewData.ModelState.Values.SelectMany(v => v.Errors).Select(e => e.ErrorMessage)))';
var errorMessage=JSON.parse(errors);
0
Mohamed.Abdo