วิธีใช้ข้อมูลโมเดลใน JavaScript: ASP.NET Core

ฉันมีรายการวัตถุที่มีละติจูดและลองจิจูดสำหรับตำแหน่งเครื่องหมาย เมื่อฉันพยายามบันทึกรายการวัตถุลงใน javascript var และอ่านออกมาใน for loop มันไม่ทำอะไรเลย ฉันไม่รู้ว่ามันผิดพลาดตรงไหน สิ่งที่ฉันพยายามทำคือแปลงรายการเป็นอาร์เรย์ แต่นั่นก็ไม่ได้ช่วยอะไร ฉันตรวจสอบค่า Model.Asparaguses แล้ว และพบว่าใช้ได้ ดังนั้นจึงไม่ใช่ปัญหาที่นี่

นี่คือ ViewModel ของฉัน:

public class FieldViewModel
{
    public Field Field { get; set; }
    public object[] ChartData { get; set; }
    public Asparagus[] Asparaguses { get; set; }
}

นี่คือรหัส .js ของฉันในมุมมองของฉัน:

<script>
asparaguses = @Html.Raw(Json.Serialize(Model.Asparaguses));
</script>

และนี่คือโค้ด .js ภายนอกของฉัน:

var asparaguses;

function initMap() {
    var map = new google.maps.Map(document.getElementById('map'), {
        center: { lat: 51.25202200, lng: 5.710260 },
        zoom: 15
    });

    for (var i = 0; i < asparaguses.length; i++) {
        // Create a marker and set its position.
        var marker = new google.maps.Marker({
            map: map,
            position: { lat: asparaguses[i].Lat, lng: asparaguses[i].Long }
        });
    }
};

แก้ไข:

ในคอนโซลของฉันฉันมีข้อผิดพลาดนี้:

InvalidValueError: setPosition: ไม่ใช่ LatLng หรือ LatLngLiteral: ในคุณสมบัติ lat: ไม่ใช่ตัวเลข

เมื่อฉันบันทึกอาร์เรย์ของหน่อไม้ฝรั่ง ฉันจะได้รับผลลัพธ์นี้:

หน่อไม้ฝรั่ง: [วัตถุวัตถุ], [วัตถุวัตถุ], [วัตถุวัตถุ], [วัตถุวัตถุ], [วัตถุวัตถุ], [วัตถุวัตถุ]

และเมื่อฉันบันทึกค่า Lat และ Long จากหน่อไม้ฝรั่ง 1 ต้น ฉันเห็นว่าค่าเหล่านั้นเป็น 'ไม่ได้กำหนด' แต่อย่างไร?


google-maps javascript c# asp.net-core-mvc
person Svenmarim    schedule 17.09.2018    source แหล่งที่มา
comment
คุณได้ตรวจสอบว่าได้รับค่าอย่างถูกต้องจาก ViewModel ของคุณหรือไม่? ดังนั้นขั้นตอนแรกคือการตรวจสอบตัวอย่างโดยใช้บันทึกคอนโซลธรรมดาที่ var asparaguses ของคุณใน js ของคุณหลังจากตั้งค่าแล้วมีค่าที่คุณคาดหวัง   -  person Saltz    schedule 17.09.2018
comment
@Saltz ใช่ใน viewmodel ของฉันรายการหน่อไม้ฝรั่งถูกต้อง แต่ในคอนโซลของฉัน ตอนนี้ฉันเห็นแล้วว่าฉันมีข้อผิดพลาดนี้: InvalidValueError: setPosition: not a LatLng หรือ LatLngLiteral: in property lat: not a number   -  person Svenmarim    schedule 18.09.2018
comment
แสดงเอาต์พุตคอนโซลของหน่อไม้ฝรั่งเช่น console.log(asparaguses);   -  person Nisfan    schedule 18.09.2018
comment
@Nisfan ที่นี่: หน่อไม้ฝรั่ง: [วัตถุวัตถุ], [วัตถุวัตถุ], [วัตถุวัตถุ], [วัตถุวัตถุ], [วัตถุวัตถุ], [วัตถุวัตถุ] แต่เมื่อฉันบันทึกตัวแปร 1 หน่อไม้ฝรั่งค่าจะเป็น 'ไม่ได้กำหนด '   -  person Svenmarim    schedule 18.09.2018
comment
@Svenmarim ฉันได้รับคำถามของฉันเพียงแค่ดูคำถามของคุณ Mate ฉันต้องการทราบวิธีส่ง ViewModel ไปยัง Javascript ภายนอก และคำถามของคุณก็ตอบได้ทั้งหมด ขอบคุณเพื่อน. :)   -  person Vyas Senthil    schedule 26.10.2020
comment
@VyasSenthil ฉันดีใจที่มันช่วยคุณได้ฮ่าฮ่า   -  person Svenmarim    schedule 26.10.2020

คำตอบ (2)


arrow_upward
1
arrow_downward

(คำตอบอย่างเป็นทางการมาจากความคิดเห็นของฉัน)

หลังจากที่ระบุเนื้อหาของตัวแปรผ่านคอนโซลแล้ว ปัญหาก็ชัดเจนขึ้น คุณสมบัติของคุณที่กำหนดไว้ในโมเดลของคุณจะถูกเขียนด้วย CamelCase ตัวบน ตามคำแนะนำของกฎการเขียนโค้ดและสไตล์ของ .NET

อย่างไรก็ตาม JavaScript ใช้สัญลักษณ์ camelCase ที่ต่ำกว่า ดังนั้นเมื่อคุณบังคับให้อ้างถึงคุณสมบัติของคุณใน CamelCase ด้านบน จะส่งผลให้เป็น undefined

ดังนั้น ด้วยการเปลี่ยนแปลงการอ้างอิงทั้งหมดที่ทำกับคุณสมบัติของคุณในรูปแบบ camelCase ด้านล่าง ปัญหาของคุณควรได้รับการแก้ไข

TLDR

ใช้เครื่องหมาย camelCase ที่ต่ำกว่าเมื่ออ้างถึงคุณสมบัติ/ ฟิลด์

person Saltz    schedule 18.09.2018

arrow_upward
0
arrow_downward

ฉันคิดว่าแทนที่จะเปลี่ยนเป็นกรณีอูฐใน Viewmodel ของคลาส c # คุณสามารถเพิ่มคำอธิบายประกอบ JSONProperty (โดยใช้ Newtonsoft.JSON) ซึ่งจะแปลงกรณีของฟิลด์เป็นชื่อใน jsonproperty โดยอัตโนมัติก่อนที่จะทำให้เป็นอนุกรมเช่นนี้

public class FieldViewModel
{
   [JsonProperty(PropertyName="field")]
   public Field Field { get; set; }

   [JsonProperty(PropertyName="chartData")]
   public object[] ChartData { get; set; }

   [JsonProperty(PropertyName="asparaguses")]
   public Asparagus[] Asparaguses { get; set; }
}

หรือคุณสามารถใช้ ContractResolver ที่จะแปลงฟิลด์ทั้งหมดเป็นตัวพิมพ์ที่ถูกต้อง ดูลิงก์ CamelCaseContractResolver เพื่อดูข้อมูลเพิ่มเติม

person user3785553    schedule 18.09.2018
comment
ฉันคิดว่าคุณไม่เข้าใจมันถูกต้อง ฉันไม่จำเป็นต้องเปลี่ยนเคสอูฐในโมเดลวิวของฉัน ทรัพย์สินของฉันยังคงเป็นตัวพิมพ์ใหญ่ เมื่อฉันอ้างถึงคุณสมบัติใน Javascript ฉันจำเป็นต้องใช้ตัวอักษรปกติ ดังนั้นสิ่งเดียวที่ฉันต้องเปลี่ยนคือ ` หน่อไม้ฝรั่ง[i].Lat` เป็น asparaguses[i].lat - person Svenmarim; 18.09.2018