jQuery roundSliderプラグインでアイテムデータを表示するには？

Question

jQueryのroundSliderによるdbからの価格データを表示したい。

単純なモデル

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>

スクリプトSliderJsビューの詳細の画像がありroundSlider

$(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);