我已经花了几个小时来解决这个问题,但它变得令人沮丧:
我的 ViewModel 属性之一是分配列表。对于每个分配,我都会显示一个 jQueryUI slider 。滑动时,DisplayFor 元素将更新为新值(包含 slider 的新值)。
代码如下:
js:
var slider = someDiv.find(".sliderInitial");
slider.each(function () {
$(this).slider(
{
min: 0,
max: 10,
value: $(this).parent().find(".pointsForSliderInitial").text(),
orientation: "vertical",
slide: function (event, ui)
{
var thisDiv = $(this).parent().find('.pointsForSliderInitial');
thisDiv.text(ui.value);
thisDiv.find('#pointsForSliderInitial').val(ui.value); //this line does nothing
calculatePointsSumInitial();
}
}
);
partialview(使用 ViewModel):
@for (int i = 0; i < Model.Allocations.Count(); i++)
{
<td>
<div class="hidCategoryDescriptionInitial">
@Html.(alloc => alloc.Allocations[i].CategoryName)
- @Html.DisplayFor(alloc => alloc.Allocations[i].CategoryDescription)
</div>
<div class="pointsForSliderInitial round label">
@Html.HiddenFor(alloc => alloc.Allocations[i].AllocationID, new { id = "pointsForSliderInitial" + i }) //this hidden isn't working as expected
@Html.DisplayFor(alloc => alloc.Allocations[i].Points)
</div>
<div class="sliderInitial" />
</td>
}
这是一个部分 View ,包含在 Html.BeginForm() 中。表单通过输入类型submit 提交。
这有效。但现在我还需要将新滑动的值提交到数据库。困难在于 - 如何将 Html.DisplayFor() 包含的值从我的 pointForsliderInitial 提交到数据库?
我需要提交一个提交,其中我的 Allocation 属性填充取自 HiddenFor() 的值,这些值应该包含我通过使用 slider 更新的值。
每次提交时,模型 Allocations 属性都为 null。
我在这里做错了什么?如果信息不完整,请告诉我。
编辑:
Allocations 属性的 Viewmodel 定义是 AllocationsViewModel 类型的列表(这是一个将数据库中多个表的数据组合在一起的 View 模型:
public List<AllocationsViewModel> Allocations { get; set; }
输出div“pointsForSliderInitial”的html:
<div class="pointsForSliderInitial round label">
<input data-val="true" data-val-number="The field AllocationID must be a number."
data-val-required="The AllocationID field is required."
id="pointsForSliderInitial0"
name="Allocations[0].AllocationID"
type="hidden" value="75" />
0
</div>
<小时/>
编辑2
根据有用的评论和回答,我取得了一些进展。首先,我更新了 slider 创建和幻灯片事件:
$(this).slider(
{
animate:true,
min: 0,
max: 10,
value: $(this).parent().find("input.valueHolder").val(),
orientation: "vertical",
slide: function (event, ui)
{
var thisDiv = $(this).parent().find('.pointsForSliderInitial');
var newValue = ui.value;
thisDiv.text(newValue);
thisDiv.find('.valueHolder').val(newValue);
}
其次,我通过将属性 [HiddenInput] 添加到 AllocationID 和 Points 属性来更新 AllocationsViewModel:
public class AllocationsViewModel
{
[HiddenInput]
public int AllocationID { get; set; }
[HiddenInput]
public int Points { get; set; }
public DateTime LastUpdated { get; set; }
public int CategoryID { get; set; }
public string CategoryName { get; set; }
public string CategoryDescription { get; set; }
}
最后,我更新了 View :
<div class="pointsForSliderInitial round label">
@Html.HiddenFor(alloc => alloc.Allocations[i].AllocationID)
@Html.HiddenFor(alloc => alloc.Allocations[i].Points,new {@class="valueHolder"})
</div>
完成所有这些操作后,当使用按钮提交表单时, Controller 会正确地将对象传递给操作(按应有的方式填充分配列表)。但是,只有当我不使用 slider 时才会发生这种情况。如果我使用 slider (更新隐藏的输入),则该操作再次将分配接收为空。所以只要我不干扰 slider 它就可以工作。
不知何故,这个 jQuery 行破坏了一些东西:
thisDiv.find('.valueHolder').val(newValue);
我想我必须深入挖掘,因为在 Firebug 中,当我调试时,在执行此行之后,当我检查其 val() 时,它给我“未定义”。
编辑3:
我发现chrome调试有问题!这真的很有趣:我在滑动时切换了 slider 事件的顺序:
slide: function (event, ui)
{
var thisDiv = $(this).parent().find('.pointsForSliderInitial');
var newValue = ui.value;
thisDiv.find('.valueHolder').val(newValue);
thisDiv.text(newValue);
}
调用 val(newValue) 时,该值已正确设置。 但下一行,设置 .text(newValue) 破坏了隐藏并混淆了我的模型,使其返回 null 给操作。我刚刚删除了 thisDiv.text(newValue); -> 现在一切正常,我的模型收到从 slider 更新的正确点。
最佳答案
@NunoCarmo 是对的,.val(ui.value)
也不适用于用于输入元素的 div,请使用 .text() 代替...
但无论如何,您应该将该 slider 值存储在输入而不是 div 中,因为 div 内容不会发布在表单提交上。
我不确定是否使用
@Html.DisplayFor(alloc => alloc.Allocations[i].Points)
因为输出是一个普通的0
。
您必须使用输入,例如使用 AllocationID 使用隐藏的输入,例如
@Html.HiddenFor(alloc => alloc.Allocations[i].Points,new {@class="valueHolder"})
然后在你的 JS 中你可以这样做:
thisDiv.find('input.valueHolder').val(ui.value);
您还需要更改 slider 设置:
value: $(this).parent().find("input.valueHolder").val(),
关于jquery - 更新 jQuery 中的 HiddenFor,然后将新值提交到 Controller ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14045464/