Question

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

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

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

纬度
经度
标题
拖动

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

function LoadMapMarker(latitude, longitude, title, draggable)

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

提前致谢

Answer 1

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

if

或者，您可以通过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是包含模型数据的集合变量的名称。在你的情况下是一个List。

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

Answer 4

如果您不想使用JSON并使用网页上的数据，您可以执行以下操作：

你可以添加类（或其他一些属性，对我来说，使用类更容易，但它更好＆＃34;编程＆＃34;使用其他属性）

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

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

4 个答案: