2016-07-11 4 views
0

Я хочу получить свойство объекта, основанное на передаче идентификаторов выбранных элементов из раскрывающегося списка каскадов ... При каждом изменении уровня 1 или уровня 2 каскадного выпадающего списка цена должна быть обновлена.Как получить значение свойства из базы данных на основе каскадного выпадающего списка выбранных значений?

Я реализовал каскадный выпадающий список. На странице загрузки Leaguedropdown (Уровень 1) заселяет и второй LeagueDivisiondropdown (Уровень 2) населяет при выборе любого пункта из уровня 1. я должен реализовать Калькулятор цен, который должен рассчитать значение цен в зависимости от выбранных элементов из каскадно капли вниз, все цены хранятся в базе данных, и я использую Entity Framework. Я использую метод .change() и отправляет запрос getJson для уровня 2, который работает нормально. Я также хочу, чтобы те же функции на Уровне 1, но я уже использовал метод .change() для заполнения LeagueDivision, поэтому у меня нет идеи, как реализовать это на Уровне 1 тоже.

Буду признателен, если кто-то поведет меня и будет благодарен.

Вот Посмотреть и письменность

<body> 
<p id="message"></p> 
@using (Html.BeginForm("PriceCalculatorIndex", "PriceCalculator", FormMethod.Post, 
             new { enctype = "multipart/form-data" })) 
{ 

    <div> 
     @Html.LabelFor(m => m.SelectedLeague, new { @class = "control-lebel" }) 
     @Html.DropDownListFor(m => m.SelectedLeague, Model.LeagueList, new { @class = "form-control" }) 
     @Html.ValidationMessageFor(m => m.SelectedLeague) 
    </div> 
    <div> 
     @Html.LabelFor(m => m.SelectedLeagueDivision, new { @class = "control-lebel" }) 
     @Html.DropDownListFor(m => m.SelectedLeagueDivision, Model.LeagueDivisionList, new { @class = "form-control" }) 
     @Html.ValidationMessageFor(m => m.SelectedLeagueDivision) 
    </div> 
    <div> 
     @Html.LabelFor(m => m.Price) 
     @Html.DisplayFor(m => m.Price) 
    </div> 
} 
<!-- JS includes --> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script> 
<script src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script> 
<script src="//ajax.aspnetcdn.com/ajax/mvc/4.0/jquery.validate.unobtrusive.min.js"></script> 
<script type="text/javascript"> 
    var leaguedivisionUrl = '@Url.Action("Fetchleaguedivision")'; 
    var updatePrice = '@Url.Action("updatePrice")'; 
    var divisions = $('#SelectedLeagueDivision'); 
    $('#SelectedLeague').change(function() { 
     divisions.empty(); 
     $.getJSON(leaguedivisionUrl, { ID: $(this).val() }, function (data) { 
      if (!data) { 
       return; 
      } 
      divisions.append($('<option></option>').val()); 
      $.each(data, function (index, item) { 
       divisions.append($('<option></option>').val(item.Value).text(item.Text)); 
      }); 
     }); 
    }); 

    $('#SelectedLeagueDivision').change(function() { 

     $.getJSON(updatePrice, { LeagueDivisionId: $(this).val(), LeagueId: $('#SelectedLeague').val() }, function (data) { 
      if (!data) { 
       return; 
      } 
      alert(data); 
      //document.getElementById('#message').innerHTML = data; 
     }); 
    }); 
</script> 

JSON результат для выборки из базы данных цены

public JsonResult updatePrice(int LeagueId, int LeagueDivisionId) 
    { 

     HostBoostersDBEntities2 db = new HostBoostersDBEntities2(); 
     CalculatorPrice updatedPrice = db.CalculatorPrices 
      .Where(x => x.LeagueId == LeagueId 
       && 
       x.LeagueDivisionId == LeagueDivisionId) 
       .FirstOrDefault(); 
     decimal updatedPriceToView = (decimal)updatedPrice.Price; 
     return Json(updatedPriceToView.ToString(), JsonRequestBehavior.AllowGet); 
    } 
+1

Вы можете сделать несколько вызовов AJAX в вашем файле '$ ('# SelectedLeague'). Изменение()' функцию (просто скопировать '$ .getJSON (updatePrice .. ..' после кода '$ .getJSON (leaguedivisionUrl, ... '(но измените значения, которые вы отправляете). Но вам нужно подумать о том, что произойдет, когда значение' SelectedLeagueDivision' будет 'null' - оно выкинет исключение, потому что параметр 'int' и требуется. –

+0

@StephenMuecke, пожалуйста, взгляните на мой ответ ... Я ценю ваше руководство и поиск r руководство с вашей стороны .... спасибо – Sulaiman

ответ

0

Я успешно реализован таким образом.

@using (Html.BeginForm("PriceCalculatorIndex", "PriceCalculator", FormMethod.Post, 
             new { enctype = "multipart/form-data" })) 
{ 

    <div> 
     @Html.LabelFor(m => m.SelectedLeague, new { @class = "control-lebel" }) 
     @Html.DropDownListFor(m => m.SelectedLeague, Model.LeagueList, new { @class = "form-control" }) 
     @Html.ValidationMessageFor(m => m.SelectedLeague) 
    </div> 
    <div> 
     @Html.LabelFor(m => m.SelectedLeagueDivision, new { @class = "control-lebel" }) 
     @Html.DropDownListFor(m => m.SelectedLeagueDivision, Model.LeagueDivisionList, new { @class = "form-control" }) 
     @Html.ValidationMessageFor(m => m.SelectedLeagueDivision) 
    </div> 
    <div> 
     <label> 
      price : 
     </label> 
     <span id="spPrice"></span> 
    </div> 
} 
<!-- JS includes --> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script> 
<script src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script> 
<script src="//ajax.aspnetcdn.com/ajax/mvc/4.0/jquery.validate.unobtrusive.min.js"></script> 
<script type="text/javascript"> 
    $(function() { 
     LoadDivisionsAndPrice() 
    }); 
    var leaguedivisionUrl = '@Url.Action("Fetchleaguedivision")'; 
    var updatePrice = '@Url.Action("updatePrice")'; 
    var divisions = $('#SelectedLeagueDivision'); 
    $('#SelectedLeague').change(function() { 
     LoadDivisionsAndPrice(); 
    }); 
    $('#SelectedLeagueDivision').change(function() { 
     LoadPrice(); 
    }); 
    function LoadPrice() { 
     $.getJSON(updatePrice, { LeagueId: $('#SelectedLeague').val(), LeagueDivisionId: $('#SelectedLeagueDivision').val() }, function (data) { 
      if (!data) { 
       return; 
      } 
      document.getElementById('spPrice').innerText = data.Price; 
     }); 
    } 
    function LoadDivisionsAndPrice() 
    { 
     divisions.empty(); 
     $.getJSON(leaguedivisionUrl, { ID: $('#SelectedLeague').val() }, function (data) { 
      if (!data) { 
       return; 
      } 
      divisions.append($('<option></option>').val()); 
      $.each(data, function (index, item) { 
       divisions.append($('<option></option>').val(item.Value).text(item.Text)); 
      }); 
      LoadPrice(); 
     }); 
    }   
</script> 

+1

Не нужно вызывать 'LoadDivisionsAndPrice()' когда страница загружается первой (эти значения уже должны быть в модели, когда страница сначала загружается). И у вас есть потенциальная проблема с 'LoadPrice()', потому что значение 'SelectedLeagueDivision' может быть' null', которое бы выбрало исключение в вашем методе 'updatePrice()'. Перед вызовом метода контроллера убедитесь, что оба параметра SelectedLeague и 'SelectedLeagueDivision' не имеют значения null. –

+0

@StephenMuecke без вызова 'LoadDivisionsAndPrice()' при первой загрузке загрузки 'Лиги' ... Я хочу загрузить все, что было, почему я звонил ... теперь я пытаюсь снова, не вызывая' LoadDivisionsAndPrice' просто «Лиги» загрузок , – Sulaiman

+0

У вас возникла проблема с вашим методом GET. Если 'SelectedLeague' имеет значение, тогда' Model.LeagueDivisionList' должен быть заполнен соответствующим 'SelectList'. Ditto 'Price' должен быть заполнен в методе GET, основанном на значениях' SelectedLeague' и 'SelectedLeagueDivision'. Чтобы отправить представление в браузер, немедленно отправьте другой вызов на сервер, потому что вы «забыли» отправить правильные данные, в первую очередь, бессмысленно. –

1

Пожалуйста, попробуйте этот код. Дайте ссылку на мои комментарии в javascript, где, по вашему мнению, я все еще неправильно понял вопрос.

<script type="text/javascript"> 
    var leaguedivisionUrl = '@Url.Action("Fetchleaguedivision")'; 
    var updatePrice = '@Url.Action("updatePrice")'; 
    var divisions = $('#SelectedLeagueDivision'); 

    function bindLeagueDivisionData(data) { 
     divisions.empty(); 
     $.each(data, function(index, item) { 
      divisions.append($('<option></option>').val(item.Value).text(item.Text)); 
     }); 
    } 

    function getUpdatedPrice(leagueId, divisionId) { 
     $.getJSON(updatePrice, { 
      LeagueDivisionId: divisionId, 
      LeagueId: leagueId 
     }, function(data) { 
      if (!data) { 
       return; 
      } 
      alert(data); 
      //document.getElementById('#message').innerHTML = data; 
     }); 
    } 

    $('#SelectedLeague').change(function() { 
     if (divisions.find("option").length == 0) { 
      /*The division list is empty, fetch the divisions*/ 
      $.getJSON(leaguedivisionUrl, { 
       ID: $(this).val() 
      }, function(data) { 
       if (!data) { 
        return; 
       } 
       /*Once division data is bound, get the price for the league and first selected division. If you choose to leave first division as empty, your wish; just remove the contents of done in that case*/ 
       $.when(bindLeagueDivisionData(data)).done(function() { 
        getUpdatedPrice($(this).val(), $('#SelectedLeagueDivision')); 
       }); 
      }); 
     } else { 
      /*Divisions are already present just get the price for the combination*/ 
      getUpdatedPrice($(this).val(), $('#SelectedLeagueDivision')); 
     } 
    }); 

    $('#SelectedLeagueDivision').change(function() { 
     /*Get the price for the combination*/ 
     getUpdatedPrice($('#SelectedLeague').val(), $(this).val()); 
    }); 
</script> 
+0

вот что я хочу .... если у меня есть 5 лиг и 5 лиг дивизий, то суммарные комбинации 25 означает, что 25 разных цен хранятся в таблице sql. Я хочу обновить цену при каждом изменении в Лиге или в LeagueDivisions ... оба выпадающего списка работают нормально, но я хочу узнать, как получить значения из базы данных в зависимости от этих 25 комбинаций. – Sulaiman

+0

@ ajaysinghdav10d .... для Например, если я выбираю Лигу = Бронза и ЛигеДивиция = ЛигаДивизион1, то она должна обновить цену ..... и если я только изменю выбор Лиги = Золото и ЛигеДивизион = ЛигаДивизион1 останется таким же, он должен найти эту запись соответственно и так далее .... .. – Sulaiman

+0

@ ajaysinghdav10d ..... дорогой его не работает, как вы руководствовались .... Я внедрил его другим способом – Sulaiman

Смежные вопросы