0

タスク ビューを含むプロジェクトがあります。次のコードが含まれています。

@{
    ViewBag.Title = "Tasks";
}         

<div>
<div>@Html.Action("TaskList", "Dispatch", new { hidAccId = "3", hidUserId = "0" })</div>
<div>@Html.Action("TaskDetail", "Dispatch")</div>  
</div>

そのため、タスク ビューがレンダリングされると、実際には他の 2 つの部分ビューが呼び出されます。

最初の部分ビューでは、基本的にタスクの表が表示されます。情報はほとんどありません。データの行を選択すると、強調表示されて行 ID が表示されるようにしています。

2 番目の部分ビュー (同じページの最初のビューの下に配置) には、詳細なタスクが表示されます。

アイデアは、最初の部分ビューから選択された行 ID を取得し、それを 2 番目の部分ビューのフォームに渡すことです。Ajax を使用してフォームを送信し、新しく選択されたタスクの詳細情報を取得します。

どうすればこれを達成できますか? 2番目のリフレッシュで最初の部分ビューを破壊せずにできるようにしたいと思います。

助けてくれてありがとう、

4

2 に答える 2

0

TaskList 部分ビューが次のようになっているとします。

<table>
    <tr>
        <th>
            TaskCol1
        </th>
        <th>
            TaskCol2
        </th>
        <th>
            TaskCol3
        </th>
        <th>
            TaskCol4
        </th>
        <th></th>
    </tr>

@foreach (var item in Model) {
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.TaskCol1)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.TaskCol2)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.TaskCol3)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.TaskCol4)
        </td>
        <td>
            @Html.HiddenFor(modelItem => item.TaskId)
        </td>
    </tr>
}

</table>

あなたの TaskDetail 部分ビューの間：

@using (Html.BeginForm()) {
    @Html.ValidationSummary(true)
    <fieldset>
        <legend>Task</legend>

        @Html.HiddenFor(model => model.TaskId)

        <div class="editor-label">
            @Html.LabelFor(model => model.TaskCol1)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.TaskCol1)
            @Html.ValidationMessageFor(model => model.TaskCol1)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.TaskCol2)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.TaskCol2)
            @Html.ValidationMessageFor(model => model.TaskCol2)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.TaskCol3)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.TaskCol3)
            @Html.ValidationMessageFor(model => model.TaskCol3)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.TaskCol4)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.TaskCol4)
            @Html.ValidationMessageFor(model => model.TaskCol4)
        </div>
    </fieldset>
}

ajax 経由でサーバー側のメソッドを呼び出すテーブル行のクリック イベントを処理できます。

$(function () {
    $("tr").click(function () {
        var itemId = $("input[type='hidden']", this).val();

        $.getJSON("/Home/GetDetails", { id: itemId }, function (data) {
            $("#TaskId").val(data.TaskId);
            $("#TaskCol1").val(data.TaskCol1);
            $("#TaskCol2").val(data.TaskCol2);
            $("#TaskCol3").val(data.TaskCol3);
            $("#TaskCol4").val(data.TaskCol4);
        });
    });
});

最後に、コントローラーには次のメソッドが必要です。

public ActionResult GetDetails(int id)
{
    TaskEntities entities = new TaskEntities();

    var item =
        (from t in entities.Tasks
        where t.TaskId == id
        select t).FirstOrDefault();

    return Json(item, JsonRequestBehavior.AllowGet);
}
于 2012-07-23T06:50:11.467 に答える
0

「TaskDetail」ビューを持つ div に一意の ID を与えます。

<div id="taskDetailsDiv">@Html.Action("TaskDetail", "Dispatch")</div>

TaskListView で、javascript 関数をアタッチして詳細ビューを更新するコードを追加します。

<% foreach (TaskListRow row in ViewData.Model)
//make tablerows and add this for data that will trigger an update of details view
<a href="javascript:DisplayEditView(" + row.uniqueId + ")">Edit</a>
%>

//Add this at the bottom of the list view
<script language="javascript" type="text/javascript">
function DisplayEditView(uniqueRowId){
var url = '@(Url.Action("TaskDetail", "Dispatch"))';
url += "\?id" + uniqueRowId;
$.get(url, function(data){
$("taskDetailsDiv").html(data.toString);
}
}
</script>

これは、jquery と ajax を使用して、ページを更新せずにデータを取得して表示します。

于 2012-07-23T06:19:37.303 に答える