Визуализация частичного представления mvc с помощью события jquery select change

Question

Я пытаюсь загрузить частичное представление в div из моего контроллера, который имеет параметры. Я уже делал сим-код нажатием кнопки с одним параметром, и это сработало. но это не работает с выбором .change. У меня есть два выбора и два параметра в контроллере. Я пытаюсь выяснить, что не так?

public ActionResult MealandKcal(string searchString, double kcal)
        {
            Random rnd = new Random();

            var imgs = from a in _context.Images.Include("Restaurant").ToList()
                       orderby rnd.Next()
                       select a;


            var meals = from a in _context.Meals.Include("Image").ToList()
                        orderby rnd.Next()
                        select a;

            var meal = from a in meals
                       select a;

            if (kcal == 200)
            {
                meal = meal.Where(m => m.Name.Contains(searchString) && m.Calories < 200);
            }
            else if (kcal == 500)
            {
                meal = meal.Where(m => m.Name.Contains(searchString) && m.Calories >= 200 && m.Calories < 500);
            }
            else
            {
                meal = meal.Where(m => m.Name.Contains(searchString) && m.Calories >= 500);
            }

            RestaurantViewModel viewModel = new RestaurantViewModel()
            {
                Images = imgs,
                Meals = meal.ToList()
            };

            return PartialView(viewModel);

            }

Вот два варианта:

<div class="container">
            <p style="font-weight:700; margin-top:20px;">
                Or, filter both at the same time <i class="em em-sunglasses"></i>
            </p>
            <div class="row" style="text-align:center;">
                <div class="col-md-6 col-6">
                    <select id="category" class="form-control">
                        <option value="">Select Category</option>
                        <option value="Salad"><i class="em em-green_salad"></i> Salad</option>
                        <option value="Soup"><i class="em em-bowl_with_spoon"></i> Soup</option>
                        <option value="Spaghetti"><i class="em em-spaghetti"></i> Spaghetti</option>
                        <option value="Steak"><i class="em em-cut_of_meat"></i> Steak</option>
                        <option value="Beef"><i class="em em-meat_on_bone"></i> Beef</option>
                        <option value="Pizza"><i class="em em-pizza"></i> Pizza</option>
                        <option value="Chicken"><i class="em em-chicken"></i> Chicken</option>
                        <option value="Fish"><i class="em em-tropical_fish"></i> Fish</option>
                        <option value="Salmon"><i class="em em-fish"></i> Salmon</option>
                        <option value="Cookie"><i class="em em-cookie"></i> Cookie</option>
                        <option value="Potato"><i class="em em-potato"></i> Potato</option>
                        <option value="Sandwich"><i class="em em-sandwich"></i> Sandwich</option>
                    </select>
                </div>
                <div class="col-md-6 col-6">
                    <select id="kcal" class="form-control">
                        <option value="">Select Calories range</option>
                        <option value="200">Less than 200 Kcal</option>
                        <option value="500">Less than 500 Kcal</option>
                        <option value="1000">More than 500 Kcal</option>
                    </select>
                </div>
            </div>
        </div>

и вот мой jquery:

var url = '@Url.Action("MealandKcal", "Home")';
                            $('#category').change(function () {
                                var category = $(this).val();
                                $("#kcal").change(function () {
                                    var kcal = $(this).val();
                                    $("#querydiv").load(url, { searchText: category, kcal: kcal });
                                });
                            });

Answer 1

Привязать событие onchange к обоим выборам одновременно. Это позволяет вам применять логику в одном обратном вызове и выполнять ваши условия перед выполнением запроса.

Наличие вложенной привязки на самом деле не соответствует вашим ожиданиям, поскольку она будет выполняться только в случае изменения выбора категории И ПОТОМ выбора kcal.

Вот пересмотренный фрагмент вашего кода.

• Bind onchange для #category и #kcal выбирает
• Когда любой из них является триггером, проверьте, имеют ли оба значения
• Получить результаты, если приведенное выше утверждение верно

var url = '@Url.Action("MealandKcal", "Home")';

// Bind onchange to both selects
$('#category, #kcal').on('change', function () {
  // Return category select value
  var categoryValue = $('select#category').val()
  // Return category select value
  var caloricValue = $('select#kcal').val()
  // If both selects have been changed, fetch results...
  if (categoryValue && caloricValue) {
    // debug
    console.log('fetch results');
    // Result query
    $("#querydiv").load(url, {
      searchText: categoryValue,
      kcal: caloricValue
    });
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
    <p style="font-weight:700; margin-top:20px;">
        Or, filter both at the same time <i class="em em-sunglasses"></i>
    </p>
    <div class="row" style="text-align:center;">
        <div class="col-md-6 col-6">
            <select id="category" class="form-control">
                <option value="">Select Category</option>
                <option value="Salad"><i class="em em-green_salad"></i> Salad</option>
                <option value="Soup"><i class="em em-bowl_with_spoon"></i> Soup</option>
                <option value="Spaghetti"><i class="em em-spaghetti"></i> Spaghetti</option>
                <option value="Steak"><i class="em em-cut_of_meat"></i> Steak</option>
                <option value="Beef"><i class="em em-meat_on_bone"></i> Beef</option>
                <option value="Pizza"><i class="em em-pizza"></i> Pizza</option>
                <option value="Chicken"><i class="em em-chicken"></i> Chicken</option>
                <option value="Fish"><i class="em em-tropical_fish"></i> Fish</option>
                <option value="Salmon"><i class="em em-fish"></i> Salmon</option>
                <option value="Cookie"><i class="em em-cookie"></i> Cookie</option>
                <option value="Potato"><i class="em em-potato"></i> Potato</option>
                <option value="Sandwich"><i class="em em-sandwich"></i> Sandwich</option>
            </select>
        </div>
        <div class="col-md-6 col-6">
            <select id="kcal" class="form-control">
                <option value="">Select Calories range</option>
                <option value="200">Less than 200 Kcal</option>
                <option value="500">Less than 500 Kcal</option>
                <option value="1000">More than 500 Kcal</option>
            </select>
        </div>
    </div>
</div>