I have a jQuery plugin "Slider", and this slider show current price item, and I want to add posibility to change prices data by jQuery slider and update it at data base.
There is a model:
public class Item
{
public int Id { get; set; }
public string Name { get; set; }
public int Price { get; set; }
}
Controller, where I added method "SetPrice", for update and save data from ajax post method. But I do not know, it is correct way or not for getting data from 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();
}
}
}
View "Details" where I show current data item by slider, and want to add a logic for change data Price slider.
<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>This is how it looks at Details view.
And section scripts.
I changed from this:
(function ($, window, myApp) {
$(document).ready(function () {
$("#slider").roundSlider({
radius: 90,
width: 10,
handleSize: "+10",
sliderType: "range",
value: myApp.item
});
});
})(jQuery, window, myApp);To this, added an ajax post method but something goes wrong, even slider don`t show current date.
(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);I`m looking for any advices, how to change properly a method "SetPrice" and script. Thank you so much for your time.
