在asp.net mvc razor中使用JQuery范围滑块

本文关键字：JQuery 范围 asp net mvc razor | 更新日期: 2023-09-27 18:06:02

从这个问题的答案:如何在ASP中创建简单的范围滑块。我想为基于asp.net MVC剃刀视图的网站创建jquery范围滑块。我能够得到滑块工作在前端，但不能利用或张贴回所需的值。我尝试在表单中包装html并提交，但没有发送值。

下面是我的代码。

<script>
    $(function () {
        $("#slider-range").slider({
            range: true,
            min: 1000,
            max: 50000,
            values: [12000, 15000],
            slide: function (event, ui) {
                $("#amount").val("$" + ui.values[0] + " - $" + ui.values[1]);
            }
        });
        $("#amount").val("$" + $("#slider-range").slider("values", 0) +
      " - $" + $("#slider-range").slider("values", 1));
    });
</script>
<form style="display:inline;" action="/mobiles/price" method="get">
                <p>
  <label for="amount">Price range:</label>
  <input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;">
</p>
<div id="slider-range"></div>
<input type="submit" value="Go" />
</form>

c#代码，没有收到金额的值。

public ActionResult price(string amount, int? page)
{
    Category catalog = pe.Categories.Where(cat => cat.Id == 9).Single();
    int pageIndex = page ?? 1;
    CatProView catProView = new CatProView
    {
        Name = catalog.Name,
        SubCategories = catalog.SubCategories,
        PagedProducts = catalog.Products.Where(p => p.BasePrice >= 2000 & p.BasePrice <= 10000).OrderByDescending(p => p.Id).ToPagedList(pageIndex, PageSize)
    };
        ViewBag.ToPrice = amount;
        ViewBag.FromPrice = 500;
        return View(catProView);
}

实际上我想读取两个范围值从和到变量从金额，但为了简单起见，我试图首先读取金额字段的值。如果可能的话，建议我一种方法，我可以单独读取范围值，而不是amount字符串，这是两个范围值的组合。

在asp.net mvc razor中使用JQuery范围滑块

我认为您的amount值返回空的原因是因为您正在使用id(由DOM, Javascript和CSS用于识别)而不是name(由服务器端代码用于识别)。只需在输入中添加一个name，它应该可以在服务器端代码中找到:

<input type="text" id="amount" name="amount" readonly style="color:#f6931f; font-weight:bold;"/>

对于问题的第二部分，您可以使用隐藏字段来保存单独的范围值，并将这些值与表单一起提交。你只需要更新幻灯片函数，用可见的只读输入来更新它们:

<input type="hidden" id="minAmount" name="minAmount" />
<input type="hidden" id="maxAmount" name="maxAmount" />

JS 

slide: function (event, ui) {
    $('#minAmount').val(ui.values[0]);
    $('#maxAmount').val(ui.values[1]);
    $("#amount").val("$" + ui.values[0] + " - $" + ui.values[1]);
}

只需将minAmount和maxAmount添加到您的服务器端参数中，您应该能够处理单个数量。

相关文章：