如何将多个 objects 从 ViewModel 传递到 jQuery 函数？

Question

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

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

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

纬度
经度
标题
可拖动

这是我需要为每个 MapMarker object:

调用的 jQuery 函数

function LoadMapMarker(latitude, longitude, title, draggable)

如何使用 ViewModel 列表中每个 MapMarker object 的数据调用 LoadMapMarker 函数？

提前致谢

Answer 1

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

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

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

Answer 2

您可以序列化列表并将其存储在隐藏字段中。然后在客户端通过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"]);

}

Answer 3

如果您的 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);
}

JavaScript AJAX 请求的代码

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

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

Answer 4

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

你可以添加class（或其他一些属性，对我来说使用class更容易，但最好"programming"使用另一个属性）

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

如何将多个 objects 从 ViewModel 传递到 jQuery 函数？

How do I pass multiple objects from a ViewModel to a jQuery function?

c#

jquery

asp.net-mvc-5

asp.net-mvc-viewmodel

asp.net-mvc-views