Как получить значение связанного поля с Entity Framework в скрытом поле

Question

У меня есть модель Еда , которая имеет свойство навигации Поставщик . Я хотел бы просмотреть соответствующего поставщика продуктов питания в представлении, но я продолжаю получать идентификатор (число) свойства Vendor в представлении.

Вот моя модель:

    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);

Я продолжаю получать идентификаторы поля. Т.е. номера распечатаны. Вы заметите, что значением скрытого поля является текст со значением Tasty Fried Chicken. Почему я не могу получить текстовое поле как текст?

Answer 1

Ваш код сгенерирует разметку HTML для 2 скрытых элементов ввода внутри каждого элемента div с классом CSS "el-card-item". Первый имеет значение идентификатора продукта питания , а второй имеет текстовое поле (название поставщика). Таким образом, в основном выражение 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);
})

Лично я не являюсь поклонником добавления классов CSS только с целью выбора jQuery. Я хотел бы рассмотреть возможность добавления атрибута данных html5 для сохранения этого значения в соответствующем div и прочитать его, используя метод data.