如何在foreach循环中正确呈现javascript内部视图？

我试图在foreach循环中使用视图中的javascript解析json数据并更新HTML元素，但是javascript被呈现多次，因此只有循环中的最后一项起作用

这是我的控制器：

 [HttpGet]
 
 public ActionResult Index(Listings list, Users user, StaffPermissions
 staff)
         {
 
 ConnectionString();
 
            var client1 = new MongoClient("mongodb://localhost:27017");   //1
            var database1 = client1.GetDatabase("MyDB");     //2
            var collection1 = database1.GetCollection<Listings>("Listings");   //3

             List<Users> Users = new List<Users>();
             string query1 = "Select * from Users"; // where CompanyRefId = '" + list.CompanyRefId + "' 
             List<Listings> Listings = new List<Listings>();
            string query = "Select * from Listings"; // where CompanyRefId = '" + list.CompanyRefId + "' 
             List<StaffPermissions> Permissions = new List<StaffPermissions>();
            string query2 = "Select * from StaffPermissions"; // where CompanyRefId = '" + list.CompanyRefId + "' 
             using (con)
             {
                 using (var cmd = new SqlCommand(query, con))
                 {
                    con.Open();
                     using (var rdr = cmd.ExecuteReader())
                     {
                         while (rdr.Read())
                        {
                             var xListings = new Listings
                             {
                                 Id = Convert.ToInt32(rdr["Id"]),
                                 Name = Convert.ToString(rdr["Name"]),
                                 CompanyRefId = Convert.ToInt32(rdr["CompanyRefId"])
                             };
 
                             var filter = Builders<Listings>.Filter.Eq("Url", xListings.Id);
                            var result = collection1.Find(filter).FirstOrDefault();
                            if (result != null)
                             {
                              
                                 xListings.MongoData = result.ToJson();
                            }
                            Listings.Add(xListings);
 
                       }
                     }
                     con.Close();
                }
                 using (var cmd = new SqlCommand(query1, con))
                 {
                    con.Open();
                     using (var rdr = cmd.ExecuteReader())
                     {
                         while (rdr.Read())
                         {
                             var xUser = new Users
                             {
                                FirstName = Convert.ToString(rdr["FirstName"]),
                                 LastName = Convert.ToString(rdr["LastName"]),
                                 Email = Convert.ToString(rdr["Email"])
                            };

 
                             Users.Add(xUser);


                        }
                     }
                     con.Close();
                 }
 

                using (var cmd = new SqlCommand(query2, con))
               {
                     con.Open();
                     using (var rdr = cmd.ExecuteReader())
                     {
                        while (rdr.Read())
                      {
                             var xStaff = new StaffPermissions
                             {
                                 Permission = Convert.ToString(rdr["Permission"]),
                               StaffLevel = Convert.ToString(rdr["StaffLevel"]),
 
                             };
 
                             Permissions.Add(xStaff);
 
                        }
                     }
                     con.Close();
                 }


        
             }
             
         
 
             dynamic Xmodel = new System.Dynamic.ExpandoObject();
             Xmodel.Listings = Listings;
             Xmodel.Users = Users;
             Xmodel.Permissions = Permissions;
             return View(Xmodel);
 
         }

当我尝试像这样将脚本移出foreach时

 @foreach (var Listings in Model.Listings)
            {

                <div class="ad-card card left singlelisting" id="singlelisting">
                    <div class="ad-card-detail d-flex justify-content-between p-2">
                        <div class="d-flex ">
                            <div>
                                <img class="user-image" src="/Includes/Images/ns_03.png" alt="img">
                            </div>
                            <div class="d-flex flex-column sponsored">
                                <p style="color: black;" id="CompanyName">mountdesign</p>
                                <span>Level<span style="color: gray;" id="Level">Level 2 Contractor </span> Contractor <img class="user-level" src="/Includes/Images/ns_06.png" alt="img"></span>
                            </div>
                        </div>
                        <div><i class="bi bi-three-dots"></i></div>
                    </div>
                    <div class="card-image ad-card-image">
                        <a href="booking.html"><img src="/Includes/Images/Basic lawn care.jpg" alt="Image"></a>
                    </div>
                    <div class="card-body ad-card-body" style="line-height: 1.0;">
                        <a href="#">
                            <h3 id="Listing">Basic lawn care package</h3>
                        </a>
                        <p><i class="bi bi-check"></i></p>
                        <p><i class="bi bi-check"></i>No agressive animals</p>
                        <p><i class="bi bi-check"></i>Mow- Edge- Blow</p>
                    </div>

                    <div class="card-user-reviews">
                        <div>
                            <span class="card-image-like"><i class="bi bi-heart-fill"></i></span>
                            <span class="ad-card-image-badge-star-yellow">
                                <i class="bi bi-star-fill"><span>4.9</span>(1k+)</i>
                            </span>
                        </div>
                        <div class="card-user-price">
                            <a href="booking.html">
                                <p>BOOK NOW<span>99</span></p>
                            </a>
                        </div>
                    </div>

                </div>


            }

            <script type="text/javascript">


                document.getElementById("CompanyName").innerHTML = JSON.parse("{" + ('@Html.Raw(@Listings.MongoData)').substring(47)).CompanyName;
                document.getElementById("Level").innerHTML = JSON.parse("{" + ('@Html.Raw(@Listings.MongoData)').substring(47)).Level;
                document.getElementById("Listing").innerHTML = JSON.parse("{" + ('@Html.Raw(@Listings.MongoData)').substring(47)).Listing;
                document.getElementById("Slogan1").innerHTML = JSON.parse("{" + ('@Html.Raw(@Listings.MongoData)').substring(47)).Slogan1;


            </script>

@foreach（Model.Listings中的变量列表）
{
安装设计

二级承建商

没有侵略性的动物

割草-边吹

4.9（1k+）
}
document.getElementById（“CompanyName”）.innerHTML=JSON.parse（“{”+（'@Html.Raw（@Listings.MongoData））.substring（47））.CompanyName；
document.getElementById（“Level”）.innerHTML=JSON.parse（“{”+（'@Html.Raw（@Listings.MongoData））.substring（47））.Level；
document.getElementById（“Listing”）.innerHTML=JSON.parse（“{”+（'@Html.Raw（@Listings.MongoData））.substring（47））.Listing；
document.getElementById（“Slogan1”）.innerHTML=JSON.parse（“{”+（'@Html.Raw（@Listings.MongoData））.substring（47））.Slogan1；

然后，视图无法识别@Listings.MongoData，并引发以下错误：

错误CS0120非静态字段、方法或属性“Listings.MongoData”需要对象引用

现在请原谅javascript的糟糕实现，因为在为每个变量编写解析器之前，我已经尝试了无数次了。而且，对于javascript，我绝对是个业余爱好者

我可以在控制器内序列化json并将其发送到视图，但我不想这样做的原因是使用客户机的cpu来完成这些工作并节省服务器资源

有没有一个不那么愚蠢和好的方法来做到这一点？任何帮助都是非常感谢的

 public class Listings
    {
        [BsonId]
        public ObjectId Id { get; set; }
        [Required]
        [BsonElement("Listing")]
        public string Listing { get; set; }
        
        [BsonElement("Url")]
        public string Url { get; set; }

        [BsonElement("Level")]
        public string Level { get; set; }
        [BsonElement("CompanyName")]
        public string CompanyName { get; set; }

        //public BsonArray Slogan { get; set; }
        [BsonElement("Slogan1")]
        public string Slogan1 { get; set; }

        [BsonElement("Slogan2")]
        public string Slogan2 { get; set; }
        [BsonElement("Slogan3")]
        public string Slogan3 { get; set; }

        [BsonElement]
        public string ImagePath { get; set; }
        //[BsonElement("ImageFile")]
        //public HttpPostedFileBase ImageFile { get; set; }

     }

 @foreach (var Listings in Model.Listings)
            {

                <div class="ad-card card left singlelisting" id="singlelisting">
                    <div class="ad-card-detail d-flex justify-content-between p-2">
                        <div class="d-flex ">
                            <div>
                                <img class="user-image" src="/Includes/Images/ns_03.png" alt="img">
                            </div>
                            <div class="d-flex flex-column sponsored">
                                <p style="color: black;" id="CompanyName">mountdesign</p>
                                <span>Level<span style="color: gray;" id="Level">Level 2 Contractor </span> Contractor <img class="user-level" src="/Includes/Images/ns_06.png" alt="img"></span>
                            </div>
                        </div>
                        <div><i class="bi bi-three-dots"></i></div>
                    </div>
                    <div class="card-image ad-card-image">
                        <a href="booking.html"><img src="/Includes/Images/Basic lawn care.jpg" alt="Image"></a>
                    </div>
                    <div class="card-body ad-card-body" style="line-height: 1.0;">
                        <a href="#">
                            <h3 id="Listing">Basic lawn care package</h3>
                        </a>
                        <p><i class="bi bi-check"></i></p>
                        <p><i class="bi bi-check"></i>No agressive animals</p>
                        <p><i class="bi bi-check"></i>Mow- Edge- Blow</p>
                    </div>

                    <div class="card-user-reviews">
                        <div>
                            <span class="card-image-like"><i class="bi bi-heart-fill"></i></span>
                            <span class="ad-card-image-badge-star-yellow">
                                <i class="bi bi-star-fill"><span>4.9</span>(1k+)</i>
                            </span>
                        </div>
                        <div class="card-user-price">
                            <a href="booking.html">
                                <p>BOOK NOW<span>99</span></p>
                            </a>
                        </div>
                    </div>

                </div>


            }

            <script type="text/javascript">


                document.getElementById("CompanyName").innerHTML = JSON.parse("{" + ('@Html.Raw(@Listings.MongoData)').substring(47)).CompanyName;
                document.getElementById("Level").innerHTML = JSON.parse("{" + ('@Html.Raw(@Listings.MongoData)').substring(47)).Level;
                document.getElementById("Listing").innerHTML = JSON.parse("{" + ('@Html.Raw(@Listings.MongoData)').substring(47)).Listing;
                document.getElementById("Slogan1").innerHTML = JSON.parse("{" + ('@Html.Raw(@Listings.MongoData)').substring(47)).Slogan1;


            </script>