1

私はすでにこれで何時間も過ごしました、そしてそれはイライラしています:

私の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);を削除しました。->すべて正常に動作しました。モデルはスライダーから更新された正しいポイントを受け取ります。

4

1 に答える 1

4

@NunoCarmoは正しいですが、.val(ui.value)入力要素を対象としたdivでも機能しません。代わりに、.text()を使用してください...

ただし、とにかく、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);

また、スライダーの設定時に変更する必要があります。

value: $(this).parent().find("input.valueHolder").val(),
于 2012-12-27T17:40:42.753 に答える