如何在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; }
    }

- YaraHanaa

---

你应该拥有一个控制器和一个操作方法，以便为客户端提供所需的数据。然后你可以发起一个ajax调用来从控制器操作中检索数据。 - Shuhel Ahmed

问题是另一个下拉列表是一个<select>标签，我该如何将所选值传递给控制器？ - YaraHanaa

我有两个下拉列表，一个使用<select>，另一个使用这个模型@MattBodily。 - YaraHanaa

我发布的链接展示了如何获取任何下拉菜单的选定项，无论它是通过选择下拉菜单的ID还是类构建的。你的下拉菜单有什么问题吗？ - Matt Bodily

@MattBodily 问题在于，我从两个列表中都得到了ID，但我想通过这个ID从模型（或数据库）中获取更多内容，以便在JavaScript代码中使用它。 - YaraHanaa

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）。对于新手来说可能有点困惑，但是一旦掌握，你将获得超级强大的知识，并能显著简化视图代码。

- Roman Pushkin

---

我安装了它，然后编写了这个变量data = '@Html.Raw(JsonConvert.SerializeObject(this.Model));'，但是在数据中找不到Category :/ - YaraHanaa

@YaraHanaa，你的模型中没有“Category”属性。什么是“Category”？ - Roman Pushkin

我是指“CategoryId”……你知道如何在这里发布图片来展示我的意思吗？ - YaraHanaa

首先，确保你的@{ var data = ... }块位于script标签内部。其次，你将无法通过IntelliSense访问这些属性。目前，Visual Studio并不那么聪明，无法确定真正的属性。在@{ ... }块之后放置alert(data.CategoryID);，然后在浏览器中打开页面。但是，请再次确保此块位于script标签内部！ - Roman Pushkin

Answer 2

您需要创建返回JsonResult的操作（控制器中的方法）。

从客户端，使用任何jQuery 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 的 get 方法访问 /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
    );
}

当然，在成功回调函数中，不要使用alert，而是直接使用响应对象，例如：

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

请注意，服务器中定义的age属性可以在JavaScript响应中使用。

- JotaBe

Answer 3

如果您喜欢使用类，可以尝试使用jsmodel。将MVC视图模型转换为JavaScript后，它可以带来检索DOM更新的好处。

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

然后，每当您想获取DOM的最新状态以更新变量时，请执行以下操作：

var model = jsmodel.refresh();

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

还有一个NuGet包： https://www.nuget.org/packages/jsmodel/

- Chad Kuehn

---

此外，不要忘记添加jsmodel的“bundles”。在jQuery中，然后您可以直接使用$(jsmodel.SomeProperty)。 - Yang C

Answer 4

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

- Mohamed.Abdo