Question

我有一个jQuery插件＆＃34; Slider＆＃34;，这个滑块显示当前的价格项目，我想通过jQuery滑块添加更改价格数据的可能性，并在数据库中更新它。

有一个模型：

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

控制器，我在其中添加了方法＆＃34; SetPrice＆＃34;，用于更新和保存来自ajax post方法的数据。但我不知道，从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();
    }
}

}

查看＆＃34;细节＆＃34;我通过滑块显示当前数据项，并希望为更改数据价格滑块添加逻辑。

＆＃13;

<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>

＆＃13;

这是它在详细信息视图中的显示方式。

enter image description here

和节脚本。

我改变了这个：

＆＃13;

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

＆＃13;

对此，添加了ajax post方法，但出现问题，甚至滑块也没有显示当前日期。

＆＃13;

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

＆＃13;

我正在寻找任何建议，如何正确改变方法＆＃34; SetPrice＆＃34;和脚本。非常感谢你的时间。

Answer 1

关于this documentation我猜您应该订阅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",
        })
    }
});

如何将数据从jQuery插件设置为数据库ASP .NET MVC？

1 个答案: