如何从Model到JavaScript MVC 4获取数据？

Question

那是我的功能:

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

Answer 1

我认为这里最好的方法是使用Json和类似Vue.js,Knockout.js等等(但如果你的情况很简单,你也可以不用这些库来实现).

首先,您需要在PM控制台中使用命令安装Json支持:

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;

而已!使用knockout(更新2018:这已经过时了,没有理由你现在应该使用knockout)如果你的逻辑很复杂并且你想让你的视图更强大.对新手来说可能有点混乱,但是当你得到它时,你将获得超级强大的知识,并能够显着简化你的视图代码.