Question

我想通过jQuery roundSlider显示来自db的Price数据。

有一个简单的模型

public class Item
{
    public int Id { get; set; }
    public string Name { get; set; }
    public int Price { get; set; }
}

控制器，其中两个方法索引和详细信息，其中我得到价格的项目，并且必须通过roundSlider在视图中显示。

public class ItemsController : Controller
{
    private ItemsContext db = new ItemsContext();

    [HttpGet]
    public ActionResult Index()
    {
        var items = db.Items.ToList();
        return View(items);
    }

    [HttpGet]
    public ActionResult Details(int? id)
    {
        if (id == null)
            return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
        var itemPrice = db.Items.Where(i => i.Id == id).Select(p => p.Price);
        if (itemPrice == null)
            return HttpNotFound();
        return View(itemPrice);
    }
}

查看：详情

<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<link rel="stylesheet" href="http://cdn.jsdelivr.net/jquery.roundslider/1.0/roundslider.min.css">
<script src="http://cdn.jsdelivr.net/jquery.roundslider/1.0/roundslider.min.js"></script>

<script src="~/CustomScripts/SliderJs.js"></script>

<div id="slider"></div>

<h2>Details</h2>

<div>
    <h4 id="ddd">Item</h4>
    <hr />
    <dl class="dl-horizontal">
        <dt>
            @Html.DisplayNameFor(model => model.Name)
        </dt>

        <dd>
            @Html.DisplayFor(model => model.Name)
        </dd>

        <dt>
            @Html.DisplayNameFor(model => model.Price)
        </dt>

        <dd>
            @Html.DisplayFor(model => model.Price)
        </dd>

    </dl>
</div>
<p>
    @Html.ActionLink("Back to List", "Index")
</p>

roundSlider的脚本SliderJs

$(document).ready(function () {
$("#slider").roundSlider({
    radius: 90,
    width: 10,
    handleSize: "+10",
    sliderType: "range",
    value: "0,100"
});

有一个视图详细信息enter image description here

的图像

roundSlider必须显示例如41的价格值。

我认为我应该添加这样的东西，但这不正确。

$.get({
    url: /Items /Details/l,
    data: { price: price}
})

我正在寻找建议，如何通过滑块显示价格。谢谢。

Answer 1

如果要显示详细视图正在呈现的当前项目的价格，您可以阅读当前页面mdoel的Price属性值，并将其传递给设置对象的value属性。

这将在您的剃须刀视图中起作用。

<script>

    $(document).ready(function() {

        $("#slider").roundSlider({
            radius: 90,
            width: 10,
            handleSize: "+10",
            sliderType: "range",
            value: @Model.Price
        });

    });

</script>

由于启用插件的js代码位于外部js文件中，因此您应该读取剃刀视图中的Model.Price值并将其传递给js文件

@section Scripts
{
    <script>
        var myApp= myApp|| {};            
        myApp.itemPrice = @Model.StateId;
    </script>
    <script src="~/CustomScripts/SliderJs.js"></script>
}

现在在SliderJs.js中，您可以阅读myApp.itemPrice的值并使用它来设置滑块的初始值

(function ($, window, myApp) {
    $(document).ready(function () {

        $("#slider").roundSlider({
            radius: 90,
            width: 10,
            handleSize: "+10",
            sliderType: "range",
            value: myApp.itemPrice
        });

    });
})(jQuery, window, myApp);

如何通过jQuery roundSlider插件显示项目数据？

1 个答案: