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

Posted 2023-02-22

【中文标题】如何从模型获取数据到 JavaScript MVC 4？

【英文标题】：How to get Data from Model to JavaScript MVC 4?

【发布时间】：2013-12-26 14:45:14

【问题描述】：

这是我的职责：

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

【问题讨论】：

您应该有一个controller 和一个action method，它们将在客户端中提供您想要的数据。并且您可以进行 ajax 调用以从控制器操作中检索数据。

问题是另一个下拉列表是<select> 标签我将如何将选定的值传递给控制器​​？？

***.com/questions/10659097/…

我有 2 个下拉列表 1- 使用 <select>，第二个 2- 使用此模型 @MattBodily

我发布的链接显示了如何获取任何下拉列表的选定项目，无论它是如何构建的，选择 id 或下拉列表的类。你的有什么不能用的吗？

【参考方案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;

就是这样！如果您的逻辑很复杂并且您想让您的视图更强大，请使用淘汰赛（2018 年更新：这已过时，没有理由现在应该使用淘汰赛）。对于新手来说可能会有些困惑，但是当你掌握它时，你将获得超级强大的知识，并且能够显着简化你的视图代码。

【讨论】：

我安装了它，我写了这个 var data = @Html.Raw(JsonConvert.SerializeObject(this.Model)); 但我在数据中找不到类别：/

@YaraHanaa，您的模型中没有“类别”属性。什么是“类别”？

我的意思是“CategoryId”...你知道如何在这里张贴图片来告诉你我的意思吗？？

首先，确保您的 @ var data = ... 块在脚本标签内。其次，您将无法通过 IntelliSense 访问这些属性。 Visual Studio 目前还不是很聪明，只是无法确定真实属性。放警报（data.CategoryID）；在 @ ... 块之后并在浏览器中打开页面。但是，再次确保这个块在脚本标签内！

【参考方案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
    );

当然，在成功回调中，不做alert，而是使用response对象，例如

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/

【讨论】：

另外，别忘了添加jsmodel的“bundles”。在 jQuery 中，则可以直接使用 $(jsmodel.SomeProperty)。

【参考方案4】：

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