CODEWITHSUNDEEP
c#jqueryasp.net-mvcformsrazor
Pankaj Upadhyay
Pankaj Upadhyay

Reputation: 13584

Use JQuery range slider in asp.net mvc razor

Following from this question's answer: How to create simple range slider in ASP.NET MVC 3, I want to create the jquery range slider for asp.net mvc razor view based website. I am able to get the slider work in the front end but couldn't utilize or post back the required values. I tried wrapping the html in a form and do a submit, but no value is send.

Following is my code.

<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# code, no value is received in amount.

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);
}

Actually I want to read the two range values as from and to variable from amount but for simplicity sake, I am trying to read the values in amount field first. If possible suggest me a way in which I can read the range values separately rather than amount string which is a combination of two range values.

Upvotes: 2

Views: 5880

Answers (1)

Jonathan Michalik
Jonathan Michalik

Reputation: 1532

I think the reason your amount value is coming back empty is because you're using id (which is used by the DOM, Javascript, and CSS for identification) instead of name (which is used by the server-side code for identification). Just add a name to the input and it should be found on the server-side code:

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

For your secondary part of the question, you could use hidden fields to hold the separate range values and have those submit with the form as well. You just have to update your slide function to update them with the visible read-only input:

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]);
}

Just add minAmount and maxAmount to your server-side parameters and you should be able to work with the individual amounts.

Upvotes: 3

Related Questions