jQueryプラグイン「Slider」があり、このスライダーは現在の価格アイテムを表示します。jQueryスライダーで価格データを変更し、データベースで更新する可能性を追加したいと思います。
モデルがあります：
public class Item
{
public int Id { get; set; }
public string Name { get; set; }
public int Price { get; set; }
}
ajax postメソッドからデータを更新および保存するための、メソッド「SetPrice」を追加したコントローラー。しかし、私にはわかりません。JavaScriptからデータを取得するための正しい方法かどうかはわかりません。
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 item = db.Items.Where(i => i.Id == id).FirstOrDefault();
return View(item);
}
public void SetPrice(Item item)
{
if (item == null)
throw new Exception("Some exception");
db.Items.Add(item);
db.SaveChanges();
}
}
}
現在のデータ項目をスライダーで表示し、データの価格スライダーを変更するためのロジックを追加したい「詳細」を表示します。
<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>
<script>
var myApp = myApp || {};
myApp.item = @Model.Price
</script>
<script src="~/CustomScripts/SliderJs.js"></script>
<h2>Details</h2>
<div>
<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>これは、詳細ビューでの表示方法です。
そしてセクションスクリプト。
私はこれから変更しました：
(function ($, window, myApp) {
$(document).ready(function () {
$("#slider").roundSlider({
radius: 90,
width: 10,
handleSize: "+10",
sliderType: "range",
value: myApp.item
});
});
})(jQuery, window, myApp);これに、ajax postメソッドを追加しましたが、スライダーでさえ現在の日付が表示されないなど、問題が発生します。
(function ($, window, myApp) {
$(document).ready(function () {
$("#slider").roundSlider({
radius: 90,
width: 10,
handleSize: "+10",
sliderType: "range",
value: myApp.item,
});
$.ajax({
url: 'Items/SetPrice',
type: 'POST',
data: { value: value},
contentType: 'application/json',
dataType: "json",
})
});
});
})(jQuery, window, myApp);メソッド「SetPrice」とスクリプトを適切に変更する方法についてのアドバイスを探しています。どうもありがとうございました。
このドキュメントに関しては、changeイベントをサブスクライブして、サーバーに値を投稿する必要があると思います（そこでajaxを使用）。また、データをオブジェクトに送り返すときPriceはvalue、代わりにを使用する必要があります。そうしないとItem、SetPrice動作中のオブジェクトにバインドされません。また、価格を更新するための適切なアイテムを見つける方法についても考えてください。おそらく価格と一緒にIDを追加する必要があります。
スライダーの初期化は次のようになります（テストしていないことに注意してください）。
$("#slider").roundSlider({
radius: 90,
width: 10,
handleSize: "+10",
sliderType: "range",
value: myApp.item,
change: function(value)
{
$.ajax({
url: 'Items/SetPrice',
type: 'POST',
data: { Price: value},
contentType: 'application/json',
dataType: "json",
})
}
});
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加