Wie bekomme ich Daten von Modell zu JavaScript-MVC-4?

das ist meine Funktion:

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

ich will SelCategories.Tax und SelCategories.Duty um Sie hinzuzufügen, um Gewicht zu Wert und Gesamtpreis zu zeigen, die Summe in einem label.. ich bin mit ASP.NET MVC 4 und das ist mein Modell, das ich verwenden möchten

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; }
    }
Sollten Sie eine controller und ein action method dienen die Daten, die Sie in der client. Und Sie können einen ajax-Aufruf zum abrufen der Daten von der controller-Aktion.
das problem ist die andere dropdown-Liste ist ein <select> tag wie gebe ich den ausgewählten Wert zu controller??
stackoverflow.com/questions/10659097/...
ich habe 2 dropdown-Liste 1 - mit <select> und die zweite 2 - ist mit diesem Modell @MattBodily
der link, den ich gepostet zeigt, wie können Sie das ausgewählte Element von jedem dropdown-egal, wie es gebaut ist Sie auf die id oder die Klasse von der dropdown-Liste. Ist dort etwas zu verkaufen, dass würde nicht funktionieren?

InformationsquelleAutor YaraHanaa | 2013-12-09

  1. 26

    Ich denke, der beste Ansatz hier ist die Verwendung von Json und die so etwas wie Vue.js, Knockout.js, etc. (aber auch Sie können es tun, ohne diese Bibliotheken, wenn Ihr Fall ist einfach).

    Zuerst installieren, benötigen Sie die Json-Unterstützung mit einem Befehl in der PM-Konsole:

    PM> install-package NewtonSoft.Json

    Dann in Ihrer Ansicht können Sie konvertieren Sie Ihre Modell zu javascript-Objekt wie folgt:

    @model ...
@using Newtonsoft.Json

...

<script type="text/javascript">

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

</script>

    Dann können Sie auf alle Eigenschaften in Ihr Modell mit in plain JavaScript:

    var id = data.CategoryID;

    Das ist es! Verwenden knockout (update 2018: dieses ist obsolet, es gibt keinen Grund, warum Sie verwenden sollten knockout-jetzt) wenn Ihre Logik ist kompliziert, und Sie wollen, um Ihren Blick stärker. Es könnte ein bisschen verwirrend für Anfänger, aber wenn Sie es bekommen, werden Sie gewinnen den super-mächtigen wissen und können zur Vereinfachung Ihrer anzeigen-code erheblich.

    ich habe es installiert und ich schrieb diese var data = @Html.Raw(JsonConvert.SerializeObject(this.Model)); aber ich kann nicht finden, die Kategorie in den Daten :/
    haben Sie keine "Kategorie" - Eigenschaft in Ihrem Modell. Was ist mit "Kategorie"?
    ich meine, "CategoryId"... do u wissen, wie die post hier ein Bild, um u zeigen, was ich meine??
    ein Bild hochladen imgur.com und einen link
    Erstens, stellen Sie sicher, dass Ihr @{ var Daten = ... } - block ist innerhalb von script-Tags. Zweitens, werden Sie nicht in der Lage, den Zugriff auf diese Eigenschaften über IntelliSense. Visual Studio ist nicht so schlau, im moment, und kann nicht einfach bestimmen, die realen Eigenschaften. Setzen alert(Daten.CategoryID); direkt nach dem @ { ... } - block und öffnen Sie die Seite in Ihrem browser. Aber, wieder, stellen Sie sicher, dass dieser block wird innerhalb des script-tag!

    InformationsquelleAutor Roman Pushkin

  2. 2

    Müssen Sie zum erstellen von Aktionen (Methoden in der Steuerung), die Rückkehr JsonResult.

    Aus der client-Seite, stellen Sie ajax-Aufrufe an den server wiederherstellen und verwenden Sie diese Daten. Der einfachste Weg dies zu tun ist, zu verwenden die jQuery-ajax-Methoden.

       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);
    }

    Wenn Sie ein jQuery-man die /ControllerName/GetData/id, erhalten Sie ein JavaScript-Objekt in der Erfolgs-callback verwendet werden können, im browser. Diese JavaScript-Objekt hat genau die gleichen Eigenschaften, die Sie in der server-Seite.

    Beispiel:

    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
    );
}

    Natürlich in der Erfolgs-callback, anstatt eine Warnung, nur das Antwort-Objekt verwenden, zum Beispiel

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

    Beachten Sie, dass die age-Eigenschaft definiert in der server kann verwendet werden, in der JavaScript-Antwort.

    InformationsquelleAutor JotaBe

  3. 1

    Wenn Sie lieber eine Klasse versuchen jsmodel. Nach der Konvertierung der mvc-view-Modell zu javascript-es bringt das abrufen von DOM-updates.

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

    Dann jederzeit Sie wollen den neuesten Stand der DOM tun dies, um zu aktualisieren Sie Ihre Variablen:

    var model = jsmodel.refresh();

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

    Es ist auch ein nuget:
    https://www.nuget.org/packages/jsmodel/

    Außerdem, vergessen Sie nicht, fügen Sie die "bundles" von jsmodel. In der jQuery, dann können Sie mit $(jsmodel.SomeProperty) direkt.

    InformationsquelleAutor Chad Kuehn

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

    InformationsquelleAutor Mohamed.Abdo

Schreibe einen Kommentar