私はすでにこれで何時間も過ごしました、そしてそれはイライラしています:
私のViewModelプロパティの1つは、割り当てのリストです。割り当てごとに、jQueryUIスライダーを表示します。スライドすると、DisplayFor要素が新しい値(スライダーの新しい値を含む)で更新されます。
コードは次のとおりです。
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();
}
}
);
部分ビュー(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>
}
これは部分的なビューであり、Html.BeginForm()に含まれています。フォームは、入力タイプの送信を通じて送信されます。
これは機能します。ただし、新しくスライドした値もデータベースに送信する必要があります。ここに問題があります-Html.DisplayFor()に含まれる値をpointsForsliderInitialからデータベースに送信するにはどうすればよいですか?
Allocationプロパティに、スライダーを使用して更新した値が含まれているはずのHiddenFor()から取得した値を入力する送信が必要です。
送信を行うたびに、モデルのAllocationsプロパティがnullになります。
私はここで何が間違っているのですか?情報が不完全な場合はお知らせください。
編集:
Allocationsプロパティのビューモデル定義は、タイプAllocationsViewModelのリストです(これは、DB内の複数のテーブルからのデータをまとめるビューモデルです。
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
有益なコメントと回答に続いて、私はある程度の進歩を遂げました。まず、スライダーの作成とスライドイベントを更新しました。
$(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; }
}
最後に、ビューを更新しました。
<div class="pointsForSliderInitial round label">
@Html.HiddenFor(alloc => alloc.Allocations[i].AllocationID)
@Html.HiddenFor(alloc => alloc.Allocations[i].Points,new {@class="valueHolder"})
</div>
これらすべてを行った後、ボタンを使用してフォームを送信すると、コントローラーはオブジェクトをアクションに正しく渡します(必要に応じて[割り当て]リストにデータを入力します)。ただし、これはスライダーを使用しない場合にのみ発生します。スライダー(非表示の入力を更新する)を使用すると、アクションは再び割り当てをnullとして受け取ります。したがって、スライダーに干渉しない限り機能します。
どういうわけか、このjQuery行は物事を壊します:
thisDiv.find('.valueHolder').val(newValue);
Firebugでデバッグするとき、この行が実行された後、そのval()をチェックすると、「未定義」になるため、さらに深く掘り下げる必要があると思います。
編集3:
Chromeのデバッグに問題が見つかりました!これは本当に興味深いことです。スライド時にスライダーイベントの順序を切り替えました。
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);を削除しました。->すべて正常に動作しました。モデルはスライダーから更新された正しいポイントを受け取ります。