Как получить данные из модели на JavaScript MVC 4?

что моя функция:

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

Я хочу получить SelCategories.Tax и SelCategories.Duty чтобы добавить их к весу и общей цене, чтобы показать общее количество в ярлыке. Я использую ASP.NET MVC 4, и это моя модель, которую я хочу использовать

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

Ответ 1

Я думаю, что лучший подход здесь - использовать Json и что-то вроде Vue.js, Knockout.js и т.д. (Но также вы можете сделать это без этих библиотек, если ваш случай прост).

Во-первых, вам нужно установить поддержку Json с помощью команды в консоли PM:

PM> install-package NewtonSoft.Json

Затем, по вашему мнению, вы можете преобразовать свою модель в объект javascript следующим образом:

@model ...
@using Newtonsoft.Json

...

<script type="text/javascript">

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

</script>

Затем вы можете получить доступ ко всем свойствам вашей модели с помощью обычного JavaScript:

var id = data.CategoryID;

Это! Используйте нокаут (обновление 2018: это устарело, нет причин, по которым вы должны использовать нокаут сейчас), если ваша логика сложна и вы хотите сделать ваше представление более мощным. Это может быть немного запутанным для новичков, но когда вы его получите, вы получите сверхмощные знания и сможете значительно упростить свой код представления.

Ответ 2

Вам нужно создать действия (методы в контроллере), которые возвращают JsonResult.

Со стороны клиента сделайте ajax-вызовы на сервер, чтобы восстановить и использовать эти данные. Самый простой способ сделать это - использовать любой из методов jQuery ajax.

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

Когда вы используете jQuery для доступа к /ControllerName/GetData/id, вы получите объект JavaScript в обратном вызове успеха, который можно использовать в браузере. Этот объект JavaScript будет иметь те же свойства, которые вы определили на стороне сервера.

Например:

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

Конечно, в обратном вызове успеха вместо предупреждения нужно просто использовать объект ответа, например

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

Обратите внимание, что возрастное свойство, определенное на сервере, может использоваться в ответе JavaScript.

Ответ 3

Если вы предпочитаете класс, попробуйте jsmodel. После преобразования модели представления mvc в javascript он добавляет преимущества получения обновлений DOM.

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

Тогда в любое время, когда вы хотите получить последнее состояние DOM, сделайте это, чтобы обновить переменную:

var model = jsmodel.refresh();

Веб-сайт: http://chadkuehn.com/jquery-viewmodel-object-with-current-values/

Существует также nuget: https://www.nuget.org/packages/jsmodel/

Ответ 4

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