Извлекайте сложные данные с помощью jquery из выпадающего объекта в ASP.NET MVC

Question

У меня есть эти данные: Продукт связан с поставщиком, который связан со страной.В ASP.NET MVC я создаю выпадающий список для продукта с идентификатором и кодом.Когда я изменяю выпадающий список, я хотел бы скрыть / показать поле вида в зависимости от флага в стране.поэтому мне нужно поместить данные флага в раскрывающемся списке (и не показывать их пользователю), чтобы управлять ими с помощью JQuery

Модели:

 public class Product
 { 
   public int id {get; set;}
   public string code {get; set;}
   public int supplierId {get; set;}
   public virtual Supplier Supplier { get; set; }
 }

 public class Supplier
 { 
   public int id {get; set;}
   public string name {get; set;}
   public int countryId {get; set;}
   public virtual Country Country { get; set; }
 }

 public class Country
 { 
     public int id {get; set;}
     public string country {get; set;}
     public bool flag {get; set;}
 }

Контроллер:

 public ActionResult Create()
 {
   ViewBag.supplierId= new SelectList(db.Supplier, "id", "name");
   return View();
 }

Вид:

 model WebTest.Models.Product
 @{
     ViewBag.Title = "Create";
     Layout = "~/Views/Shared/_Layout.cshtml";
 }
 <script src="~/Scripts/jquery-3.3.1.min.js"></script>
 <script src="~/Scripts/jquery-3.3.1.js"></script>
 <script type="text/javascript">

     // For set field visible/Hide 
     $(document).ready(function () {
         debugger;
             var flag = $(this).val(); // <-- here I have to retrive flag data
             if (flag) {
                 $('#fielToHide').show();
             }
             else {
                 $("#fielToHide").hide();
             }
         } 
     });

     // on changed set visibility
     $(function () {
         $('#supplierId').change(function () {
             debugger;
             var flag = $(this).val(); // <-- here I have to retrive flag data
             if (flag) {
                 $('#fielToHide').show();
             }
             else {
                 $("#fielToHide").hide();
             }
         });
     });
  </script>


 <h2>Create</h2>
 @using (Html.BeginForm())
 {
     @Html.AntiForgeryToken()
     <div class="form-horizontal">
         <hr />
         @Html.ValidationSummary(true, "", new { @class = "text-danger" })
         <div class="form-group">
             @Html.LabelFor(model => model.supplierId, htmlAttributes: new { @class = "control-label col-md-2" })
             <div class="col-md-10">
                 @Html.DropDownList("supplierId", null, htmlAttributes: new { @class = "form-control" })
                 @Html.ValidationMessageFor(model => model.supplierId, "", new { @class = "text-danger" })
             </div>
         </div>

         <div class="form-group">
             @Html.LabelFor(model => model.fielToHide, htmlAttributes: new { @class = "control-label col-md-2" })
             <div class="col-md-10">
                 @Html.EditorFor(model => model.fielToHide, new { htmlAttributes = new { @class = "form-control" } })
                 @Html.ValidationMessageFor(model => model.fielToHide, "", new { @class = "text-danger" })
             </div>
         </div>

         <div class="form-group">
             <div class="col-md-offset-2 col-md-10">
                 <input type="submit" value="Create" class="btn btn-default" />
             </div>
         </div>
     </div>
 }

Так, например, если у меня есть

ПРОДУКТ

1, мотоцикл, 1

2, велосипед, 1

3, телевизор, 2

ПОСТАВЩИК

1, A, 1

2, B, 2

СТРАНА

1, США, правда

2, Европа, ложь

, и я меняю мотоцикл с поставщика А на В, поле должно пройти от показанного до скрытого и т. Д.на.

Answer 1

ActionMethod для получения флага страны

public JsonResult GetCountryFlag(int supplierID)
    {

         bool flag = // TODO  get flag from database based on supplierID

         return Json(flag, JsonRequestBehavior.AllowGet);            
    }

Событие изменения DropDown поставщика

$( "#supplierId" ).change(function() {

// On Supplier DropDown change event make ajax request with selected supplierID to get  
// this supplier's country flag.  

   var supplierValue = $(this).val();

       $.ajax({
            url: "/Home/GetCountryFlag",
            type: "GET",
            data: { supplierID: supplierValue },
            success: function (data) {

            var flag = data;

             if (flag) {
                 $('#fielToHide').show();
             }
             else {
                 $("#fielToHide").hide();
             }

            }
   });

Надеюсь, это поможет.