Question

我有一个模型食物，该模型具有导航属性供应商。我想在视图中查看相关的食品供应商，但在视图中仍保持获取Vendor属性的ID（数字）。

这是我的模特：

    public class Food
    {
        public int Id { get; set; }

        [Display(Name = "Food Name")]
        public string Name { get; set; }

        public int VendorId { get; set; }

        public Vendor Vendor { get; set; }
    }

这是我的供应商模型：

public class Vendor
    {
        public int Id { get; set; }

        [Display(Name = "Food Vendor")]
        public String FoodVendor { get; set; }

        public String Email { get; set; }
    }

这是呈现我要显示的视图的控制器：

public ActionResult Index()
        {
            var orders = _context.Foods.Include(m => m.Vendor).ToList();
            var viewModel = new NewPlaceOrderViewModel()
            {
                Foods = orders
            };
            return View(viewModel);
        }

这是我的ViewModel：

public class NewPlaceOrderViewModel
    {
        public IEnumerable<Food> Foods { get; set; }
        public Vendor Vendor { get; set; }
    }

我将在这里显示视图，但是为了简洁起见，将跳过很多代码：

@model Nominal.ViewModel.NewPlaceOrderViewModel

...

<div class="row el-element-overlay m-b-40">
            @foreach (var food in Model.Foods)
            {
                if (counter != 0 && counter % 4 == 0)
                {
                    @:</div>
                    @:<div class="row el-element-overlay m-b-40">
                }

                <!-- /.usercard -->
                          <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
                              <div class="white-box">
                                  <div class="el-card-item">
                                      <div class="el-card-avatar el-overlay-1">
                                          @Html.HiddenFor(m => food.Id, new { id = "food" + counter.ToString() })
                                          <img src="@Url.Content("~/Images/"+ @Path.GetFileName(food.FilePath))" class="lazy" />
                                          <div class="el-overlay">
                                              <ul class="el-info">
                                                  <li><a class="btn default btn-outline image-popup-vertical-fit" href="@Url.Content("~/Images/"+ @Path.GetFileName(food.FilePath))"><i class="icon-magnifier"></i></a></li>
                                                  <li class="food"><a class="btn default btn-outline" href="javascript:void(0);"><i class="icon-check"></i></a></li>
                                              </ul>
                                          </div>
                                      </div>
                                      <div class="el-card-content">
                                          <h3 class="box-title">@Html.DisplayFor(m => food.Name)</h3> <small>₦ @Html.DisplayFor(m => food.Price)</small>
                                          @Html.HiddenFor(m => food.Vendor.FoodVendor, new { id = "foodVendor" + counter.ToString() })
                                          <br />
                                      </div>
                                  </div>
                              </div>
                          </div>
                <!-- /.usercard-->

                counter++;
            }
        </div>

此行@Html.HiddenFor(m => food.Vendor.FoodVendor, new { id = "foodVendor" + counter.ToString() })转换为<input id="foodVendor4" name="food.Vendor.FoodVendor" type="hidden" value="Tasty Fried Chicken">

每次尝试打印食品供应商的值进行控制台操作时，

    var foodVendor = $(this).closest(".el-card-item").find("input").val();
    console.log(foodVendor);

我一直在获取该字段的ID。即数字已打印出来。您会注意到，隐藏字段的值是带有值的美味炸鸡的文本。 为什么我不能将文本字段作为文本输入？

Answer 1

您的代码将使用CSS类"el-card-item"在每个div中为2个隐藏的输入元素生成HTML标记。 第一个具有食物ID的值，第二个具有文本字段（供应商名称）。因此基本上，表达式closest(".el-card-item").find("input.vendor")会为您提供这两种输入。但是，当您调用val()方法时，它将返回数组中第一项的值。

我建议使用更具体的选择器。例如，您可以将CSS类添加到隐藏元素中

@Html.HiddenFor(m => food.Vendor.FoodVendor, for example,
                      new { id = "foodVendor" + counter.ToString(), @class="vendor" })

并在您的jQuery代码中，将此css类用作选择器。

$(".el-card-content").each(function ()
{
    var foodVendor = $(this).closest(".el-card-item").find("input.vendor").val();
    console.log(foodVendor);
})

我个人并不只是出于jQuery选择的目的而添加CSS类。我会考虑添加html5数据属性以将该值存储到相关的div中，并使用data方法进行读取。

如何在隐藏字段中使用Entity Framework获取相关字段的值

1 个答案: