0

TimeItems (テーブル オブジェクト) のコレクションを送信するフォームがあり、これがデータベースに追加されます。私が遭遇している問題は、ユーザーが送信前にコレクションに好きなだけ TimeItems を追加できるようにしたいということです。現在、TimeItem の入力フィールドは、外部キーの隠し入力、従業員を選択するためのコンボ ボックス、メモを入力するための基本的な入力ボックスで構成されています。

<div>
    <img src="" alt="Add row" id="add-timesheet-row" />        
    @Using Html.BeginForm("AddToTimesheet", "Project")
        @<div>
            <input type="hidden" name="TimeItems[0].TaskID" value="@Model.TaskID"/>
            <select name="TimeItems[0].EmployeeID">
                @For Each emp As SelectListItem In ViewBag.EmployeeID
                    @<option value="@emp.Value">@emp.Text</option>
                Next
            </select>
            <input type="text" name="TimeItems[0].Notes" value="Test Notes" />

            <div id="add-row-target" style="display: none"></div>

            <div class="button-submit">
                <input type="submit" value="Create" /> |
                @Html.ActionLink("Back", "Index")
            </div>
        </div>
    End Using
</div>

<script type="text/javascript">
    $(document).ready(function () {
        $("#add-timesheet-row").click(function () {
            $.get('@Url.Action("RenderTimeItems", New With {.id = Model.TaskID})', function(data) {
                $('#add-row-target').before(data);
            });
        });
    });
</script>

ここで起こっていることは、「行の追加」イメージがクリックされると、javascript が RenderTimeItems アクションを返し、それが部分的なビューを返すということです。その部分ビューには、入力 html が再び含まれています (hidden、combo、および textbox):

<input type="hidden" name="TimeItems[#].TaskID" value="@Model.TaskID"/>
<select name="TimeItems[#].EmployeeID">
    @For Each emp As SelectListItem In ViewBag.EmployeeID
        @<option value="@emp.Value">@emp.Text</option>
    Next
</select>
<input type="text" name="TimeItems[#].Notes" value="Test Notes" />

次に、この html が元のフォームに追加されます。私の部分ビューの問題は、コントローラーが TimeItems のコレクションを正しく解釈できるようにするには、「#」がTimeItems[#]実際の数値である必要があり、ユーザーが「行の追加」をクリックするたびにインクリメントする必要があることです。私の元のビューではTimeItems[0]、最初の TimeItem に を使用していることに注意してください。したがって、部分ビューの次のものは になりますTimeItems[1]。数値を追跡し、メイン ビューで [行の追加] をクリックしたときに数値を増やしながら、RenderTimeItems の呼び出し後に部分ビューで数値にアクセスするにはどうすればよいですか?

ユーザーがフォームを送信すると、AddToTimesheet アクションに移動し、コレクションを消費して、この例のように個々の TimeItem をデータベースに追加します。

<HttpPost()>
Function AddToTimesheet(ByVal TimeItems() As ppTimeItem) As ActionResult
    If TimeItems IsNot Nothing Then
        For Each time In TimeItems
            db.ppTimeItems.Add(time)
            db.SaveChanges()
        Next
    End If
    Return RedirectToAction("Index")
End Function

さらに、ユーザーがフォームを送信する前に (以前に追加した) TimeItem を削除できるようにしたい場合、コレクションからインデックスが削除されます。これには、適切に機能するために同時インデックスが含まれている必要があります。つまり、TimeItems[0]、TimeItems[1]、TimeItems[2]が追加された後にユーザーが を削除するとTimeItems[1]、TimeItems[2]残りのインデックスが 0 と 2 であるため、 が正しく追加されなくなります。何か考えはありますか?

4

1 に答える 1

1

最初に、ページにある TimeItem 行の数を追跡する必要があるため、すべての行にあるものが必要になります。動作しますが、「 」のようなクラスadd-row-targetを与えることをお勧めします:<div>timeItem

var numItems = $("#add-row-target").length;

引き続き部分ビューを返し、$.getコールバックで戻り値の '#'dataをnumItems.

$.get('@Url.Action("RenderTimeItems", New With {.id = Model.TaskID})', function(data) {
                var dataWithNumber = data.replace(/#/g , numItems);
                $('#add-row-target').before(dataWithNumber);
            });

必要に応じて、部分を返すアクション メソッドに数値を渡すことができます。

$.get('@Url.Action("RenderTimeItems", New With {.id = Model.TaskID})?number=' + numItems 


<input type="hidden" name="TimeItems[@Model.Number].TaskID" value="@Model.TaskID"/>
<select name="TimeItems[@Model.Number].EmployeeID">
    @For Each emp As SelectListItem In ViewBag.EmployeeID
        @<option value="@emp.Value">@emp.Text</option>
    Next
</select>
<input type="text" name="TimeItems[@Model.Number].Notes" value="Test Notes" />
于 2013-08-07T18:24:39.767 に答える