单击时未定义 C# razor 对象答案

【问题标题】：C# razor object is not defined on click单击时未定义 C# razor 对象
【发布时间】：2017-05-23 09:29:34
【问题描述】：

我的 index.cshtml 中有以下代码，其中创建了一个 FoursquareInfo 对象。

@using WebMatrix.Data;
@using CanYouPay.Models.FoursquareAPI;
@{
    FoursquareInfo fsInfo = new FoursquareInfo();
    Checkins response = new Checkins();
    Checkin checkins = new Checkin();
    List<RootItem> items = new List<RootItem>();
    RootItem item = new RootItem();
    Venue venue = new Venue();
    Location loc = new Location();
    loc.lat = 51.19189444478925;
    loc.lng = 4.664656084372357;

    venue.location = loc;
    item.venue = venue;
    items.Add(item);
    checkins.items = items;
    response.checkins = checkins;
    fsInfo.response = response;
}

我在 index.cshtml 的 html 代码中有一个 div，点击时会调用 updateMap(fourSquareInfo) 方法。

<div id="mapBtn" onclick="updateMap(@fsInfo)" class="btn btn-success btn-lg col-md-2 pull-right">Show Map!</div>

我的updateMap 函数是：

function updateMap(foursquareInfo) {
    var uluru = { lat: 20, lng: 30 };
    var map = new google.maps.Map(document.getElementById('googleMap'), {
        zoom: 4,
        center: uluru
    });
    var marker = new google.maps.Marker({
        position: uluru,
        map: map
    });
}

是的，出于测试目的，我不会对传递的 foursquareInfo 对象执行任何操作 - 当我可以修复收到的错误时，lat 和 long 值将被 foursquareInfo onClick 事件发生：

CanYouPay 未在 HTMLDivElement.onclick 中定义

我的 html/razor/js 代码有什么问题？

【问题讨论】：

对不起，我没有收到您在点击方法上遇到的错误。
看起来您正在尝试将 ac# 对象传递到您的 js - 如果您在该按钮上查看源代码，它可能会是一些文本，包括 CanYouPay 并且您尚未将其定义为一个js变量，它会抛出一个错误，你要么需要创建一个js对象并将你的c#对象值映射到它，要么传递一堆字符串
@Pete mmh 这是可能的
@Pete 你知道如何实现吗？
我会添加一个答案

标签： javascript c# jquery asp.net-mvc razor

【解决方案1】：

根据我的 cmets：看起来您正在尝试将 ac# 对象传递到您的 js - 如果您在该按钮上查看源代码，它可能会是一些文本，包括 CanYouPay 并且您尚未将其定义为 js变量，它会抛出一个错误，你要么需要创建一个 js 对象并将你的 c# 对象值映射到它，要么传递一堆字符串

选项 1 创建一个与您的 c# 对象匹配的 js 对象，并在您的剃须刀中映射这些值：

<script>
   // this needs to be in your razor before the onclick (so object is created before you use it)
   var fsJSObject = new fsJSObject(); // this object should match your c# object
   fsJSObject.StringValue = '@fsInfo.StringValue'; // this needs to be the final value - eg a string, int, date, etc - cannot be another object, otherwise you will get a similar mistake to above
   fsJSObject.IntValue= @fsInfo.IntValue;

  // pass fsJSObject into your onclick function
</script>

选项2，将值直接传递给函数

onclick="updateMap('@fsInfo.StringValue', @fsInfo.IntValue, '@fsInfo.AnotherStringValue')"

注意字符串值周围的引号

【讨论】：

使用 JSON 库将 c# 对象转换为在 JS 中易于处理的 JSON 可能是一个不错的选择。
@Smut：还有一些额外的上下文说明为什么它会在你执行@fsInfo 时执行它的操作，它会在该对象上调用ToString 以获取可以放入页面的字符串。如果您没有覆盖默认的ToString 实现，它将输出类名，而不是我假设是CanYouPay.Models.FoursquareAPI.FoursquareInfo。 JS 当然会尝试将其视为 JS 表达式，这将导致它得出无法找到 CanYouPay 的结论。
@Smut 与 chris 的第一条评论一起使用，我通常 nuget install newtonsoft json package 用于将我的 c# 反序列化和序列化为 json

【解决方案2】：

当我尝试使用 razor 构建相同的页面时，我看到我的页面中出现以下内容：

<div id="mapBtn" onclick="updateMap(WebApplication1.Models.FoursquareInfo)" class="btn btn-success btn-lg col-md-2 pull-right">Show Map!< /div>

如您所见，Razor 将直接设置对象，即类名。在这种情况下，我建议直接在通话中设置位置号码，例如：

<div id="mapBtn" onclick="updateMap(@loc.lat, @loc.lng)" class="btn btn-success btn-lg col-md-2 pull-right">Show Map!< /div>

然后在服务器端的调用中构建对象并用它做你想做的事。请记住，每次对服务器进行新调用时都必须重建对象：对象不会保存在内存中。建议只将信息放在视图实际需要的视图中，而不是整个服务器端对象。

【讨论】：