在ASP.NET MVC剃須刀中使用JQuery范圍滑塊

Question

從這個問題的答案中可以得出以下結論： 如何在ASP.NET MVC 3中創建簡單的范圍滑塊 ，我想為基於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);
}

其實我想從和從 量可變的，但為了簡便起見，我想先閱讀量字段中的值來讀取兩個范圍值。 如果可能，建議我一種方法，使我可以分別讀取范圍值，而不是數量字符串，后者是兩個范圍值的組合。

Answer 1

我認為您的amount值返回空的原因是因為您使用的是id （由DOM，Javascript和CSS進行標識）而不是name （由服務器端代碼進行標識）。 只需在輸入中添加一個name即可在服務器端代碼中找到它：

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

對於問題的第二部分，您可以使用隱藏字段來保存單獨的范圍值，並使這些值也隨表格一起提交。 您只需要更新幻燈片功能即可使用可見的只讀輸入來更新它們：

HTML

<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添加到服務器端參數，您就可以處理單個數量。