如何将数据从模型获取到JavaScriptMVC4

How to get Data from Model to JavaScript MVC 4?

本文关键字：获取 JavaScriptMVC4 模型 数据      更新时间：2024-06-04

这是我的函数：

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

我认为这里最好的方法是使用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;

就是这样！如果你的逻辑很复杂，并且你想让你的观点更强大，那么就使用淘汰（2018年更新：这已经过时了，你现在没有理由使用淘汰）。对于新手来说，这可能有点令人困惑，但当你得到它时，你会获得超级强大的知识，并能够显著简化你的视图代码。

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

从客户端，对服务器进行ajax调用以恢复和使用这些数据。最简单的方法是使用任何jQueryajax方法。

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

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

如果您喜欢一个类，请尝试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/

还有一个裸体：https://www.nuget.org/packages/jsmodel/

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