时间戳

首页 > 解决方案 > 通过jquery选择更改事件渲染mvc部分视图

jquery - 通过jquery选择更改事件渲染mvc部分视图

问题描述

我试图从我的控制器将部分视图加载到一个 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 });
                                });
                            });

标签： jqueryhtmlmodel-view-controller

解决方案

同时在两个选择上绑定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>

推荐阅读