通过jQuery选择更改事件渲染MVC局部视图

Question

im试图将局部视图从我的控制器加载到具有参数的div中。 我已经在使用一个参数的按钮单击上做了类似的代码，并且可以正常工作。但它不适用于select .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选择后，嵌套绑定才会执行。

这是您的代码的修订版。

• 为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>