如何将多个对象从 ViewModel 传递给 jQuery 函数？答案

【问题标题】：How do I pass multiple objects from a ViewModel to a jQuery function?如何将多个对象从 ViewModel 传递给 jQuery 函数？
【发布时间】：2015-05-25 08:02:03
【问题描述】：

我正在编写一个 MVC 5 互联网应用程序，并且想知道如何将值从 ViewModel 传递到 jQuery 函数，我有一个要传递的数据列表。

通常，我会在MVC View 代码中创建一个hidden 字段，然后在jQuery 代码中检索此值。但是，在这种情况下，ViewModel 中不只有一个值，而是一个 List 对象，其中每个对象都有许多值。

我的ViewModel 有一个List<MapMarker>，其中每个MapMarker 具有以下属性：

纬度
经度
标题
可拖动

这是我需要为每个MapMarker 对象调用的jQuery 函数：

function LoadMapMarker(latitude, longitude, title, draggable)

如何使用来自ViewModel 列表中每个MapMarker 对象的数据调用LoadMapMarker 函数？

提前致谢

【问题讨论】：

你能把完整的视图模型传递给函数吗？
您可以将类添加到您的主“div”，并执行以下操作： $(".YourClass").each(function (....))
为什么不使用 AJAX 和 JSON 来做到这一点？
@Daniel，使用 AJAX 是从服务中检索数据或像服务一样工作的操作结果的好选择（例如：返回 JSON 而不是 View）。如果有动作结果的视图，这在razor中是可能的，不需要AJAX请求来检索数据

标签： c# jquery asp.net-mvc-5 asp.net-mvc-viewmodel asp.net-mvc-views

【解决方案1】：

您可以序列化您的列表并将其存储在隐藏字段中。然后在客户端通过Javascript调用LoadMapMarker。

服务器：

    using System.Web.Script.Serialization; 
    var MapMarkers = new List<MapMarker>();
    var jsonSerialiser = new JavaScriptSerializer();
    var json = jsonSerialiser.Serialize(MapMarkers);
    return View(new MyViewModel({JsonList = json }));

查看：

<input type="hidden" id= "MyHiddenFieldForMapMarker" value="@Model.JsonList" >

客户：

var MapMarkers = $("#MyHiddenFieldForMapMarker").val();
for (var MapMarker in MapMarkers) {
   LoadMapMarker(MapMarker["latitude"],
                 MapMarker["longitude"],
                 MapMarker["title"],
                 MapMarker["draggable"]);

}

【讨论】：

【解决方案2】：

您可以序列化为 JSON，然后存储在隐藏字段中，或者作为 Javascript 对象，例如：

myJsonData= [{"id":"15aea3fa","firstname":"John","lastname":"Doe"}];

或者，您可以通过 ajax 调用检索数据。

【讨论】：

【解决方案3】：

如果您不想使用 JSON 并使用您页面上的数据，您可以这样做：

您可以添加类（或其他一些属性，对我来说使用类更容易，但使用其他属性更好“编程”）

@foreach ()... 
{
   <div class="main_Marker">
     <input ... class="lat"/>  //using the @Model render ofc...
     <input ... class="long"/>
   </div>
}

然后是 jQuery：

$("main_Marker").each(function(index, item)) {
   var lat = $(item).child(".lat");
   .
   .
   LoadMapMarker(lat, long....);
}

【讨论】：

【解决方案4】：

如果您的 jQuery 函数存在于视图中，请像这样使用@Html.Raw(Json.Encode(Model.JSonData))

//JavaScript or jQuery function
function javascriptFunction()
{
    var data = @Html.Raw(Json.Encode(Model.JSonData))
}

在上面的代码中，JSonData 是包含模型数据的集合变量的名称。在你的情况下是一个列表。

如果您的 jQuery 函数位于单独的 JavaScript 文件中，则可以使用 AJAX 请求从模型中获取数据

控制器代码

public ActionResult GetData()
{
    //Your logic to get data from model
    //Here data is the variable that holds the collection List<MapMarker>
    return Json(data);
}

AJAX 请求的 JavaScript 代码

function myJavaScriptFunction()
{
     $.ajax({
        url: '/GetData',
        type: 'post',
        success: function (data) {
            alert("data retrieved successfully");
        },

        error: function () {
            alert("Error retrieving data");
        }
     });
}

【讨论】：