1

私はJQueryとAsp.netMVC3（C＃）の両方に非常に慣れていないので、これが些細なことであるとお詫びします。タスクのリストを含むMVC部分ビュー（Index.cshtml）があります。これらのタスクは、リストスタイルのレイアウトにある個々のdivに含まれています。ダイアログを開く「タスクの追加」というボタンがあります。このダイアログは、コントローラーへのAJAX Json呼び出しを介して、追加されたタスクをデータベースに保存します。

これは私が問題を抱えているところです-ダイアログが閉じた後、タスクのリストを追加したばかりのタスクでリロードしたいと思います。ページ全体がリロードされる例と、コントローラーがレンダリングされたビューを返すことになっている例を見つけました。私の問題は、リロードしたい部分からダイアログが開かれていることです。私がやろうとしていることを達成する方法はありますか？

Index.cshtml

@model IEnumerable<TaskManagementApplication.Models.Project>

@{
    ViewBag.Title = "Index";
}



<h2>Index</h2>

<div id="ProjectAccordionWrapper">
    @foreach (var item in Model)
    {
        <div class="ProjectWrapper">
            <h3>@item.Name</h3>
            <div class="column">
                <button class="createTaskButton" id="@item.ProjectID">Create New Task</button>
                    @foreach(var task in item.Tasks) {
                        var buttonClass = "taskID" + task.TaskID;
                          <div class="portlet">
                            <div class="portlet-header">@task.TaskName</div>
                            <div class="portlet-content">@task.TaskDescription</div>
                            <button class="editTaskButton" id="@task.TaskID">Edit Task</button>
                          </div>   
                    }
            </div>
        </div>
    }
</div>

<div id="dialog-form" title="Create new user">
  <p class="validateTips">All form fields are required.</p>

  <form>
  <fieldset>
    <label for="TaskName">Task Name</label>
    <input type="text" name="TaskName" id="name" class="text ui-widget-content ui-corner-all" />
    <label for="TaskDescription">Task Description</label>
    <input type="text" name="TaskDescription" id="description" value="" class="text ui-widget-content ui-corner-all" />
    <input type="hidden" name="TaskID" id="ID" />
    <input type="hidden" name="ProjectID" id="ProjectID" />
  </fieldset>
  </form>
</div>

部分的なJavascript

function GetTask(id) {
    if (id.length > 0) {
        $.ajax({
            url: '/Project/GetTaskFromID',
            type: "POST",
            data: { "id": id },
            success: PopulateDialogFields,
            error: HandleError
        });
    }
}

function PopulateDialogFields(data) {
    $("#name").val(data.TaskName);
    $("#description").val(data.TaskDescription);
    $("#ID").val(data.TaskID);
}

function HandleError(data) {
    alert(data.error);
    var foo = data;
}

function SaveTask() {
    var taskName = $("#name").val();
    var taskDescription = $("#description").val();
    var id = $("#ID").val();
    var projectID = $("#ProjectID").val();
    if (id.length > 0) {
        $.ajax({
            url: '/Project/SaveTask',
            type: "POST",
            data: { "taskName": taskName, "taskDescription": taskDescription, "taskID": id }
        });
    }
    else {
        $.ajax({
            url: '/Project/SaveTask',
            type: "POST",
            data: { "taskName": taskName, "taskDescription": taskDescription, "projectID": projectID }
        });

    }
}

$("#dialog-form").dialog({
    autoOpen: false,
    height: 300,
    width: 350,
    modal: true,
    buttons: {
        "OK": function () {
                SaveTask();
                $(this).dialog("close");
        },
        Cancel: function () {
            $(this).dialog("close");
        }
    },
    close: function () {
        allFields.val("").removeClass("ui-state-error");
        window.location.reload(true);
    },
    open: function () {
        var id = $(this).data("id");
        var projectID = $(this).data("projectID");
        $("#ProjectID").val(projectID);
        var button = $("#" + id);
        GetTask(id);
    }
});

$(".editTaskButton")
  .button()
  .click(function () {
      $("#dialog-form").data('id', this.id).dialog("open");
  });

$(".createTaskButton")
  .button()
  .click(function () {
      $("#dialog-form").data('projectID', this.id).dialog("open");
  });
4

2 に答える 2

0

リストを別のアクションとビューにリファクタリングするのが最も簡単かもしれません。次に、元のビューとjQueryIndex.cshtmlのメソッドを介してこれを呼び出すことができます。.load()したがって、次のように仮定します。

プロジェクト管理者

[HttpGet]
[ChildActionOnly]
public ActionResult Tasks(int id)
{
    // create the appropriate model object as an IEnumerable of your Task type

    return View(model);
}

Tasks.cshtml

@foreach(var task in Model) {
    var buttonClass = "taskID" + task.TaskID;
      <div class="portlet">
        <div class="portlet-header">@task.TaskName</div>
        <div class="portlet-content">@task.TaskDescription</div>
        <button class="editTaskButton" id="@task.TaskID">Edit Task</button>
      </div>   
}

次のようにIndex.cshtmlを調整します。

@model IEnumerable<TaskManagementApplication.Models.Project>

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>   
<div id="ProjectAccordionWrapper">
    @foreach (var item in Model)
    {
        <div class="ProjectWrapper">
            <h3>@item.Name</h3>
            <div class="column">
                <button class="createTaskButton" id="@item.ProjectID">Create New Task</button>
                <div id="tasks-@item.ProjectID">
                   @Html.Action("Tasks", "Project", new { id = item.ProjectID })
                </div>
            </div>
        </div>
    }
</div>

    //... the rest of the view

そして最後に、

// this should happen inside the callback of your .ajax() method
$('#tasks-'+projectID).load('/project/tasks/'+ projectID);
于 2013-02-20T06:40:56.333 に答える
0

私は jQuery と ASP.NET MVC にも比較的慣れていませんが、最初に頭に浮かぶのは次のとおりです。

ページの AJAX-y の側面を維持するために、JSON 形式の のセットを返す POST を処理するメソッドを作成することをお勧めしますTaskManagementApplication.Models.Project。このメソッドは、オプションでフィルタリングされた結果を返すことができます。

マークアップは次のようになります。

<div id="ProjectAccordionWrapper">
    <div id="ProjectWrapperTemplate" class="ProjectWrapper" style="display: none;">
        <h3 id="itemName"></h3>
        <div class="column">
            <button class="createTaskButton" id="itemProjectID">Create New Task</button>
            <div id="portletTemplate" class="portlet">
                <div class="portlet-header" id="taskName"></div>
                <div class="portlet-content" id="taskDescription"></div>
                <button class="editTaskButton" id="taskID">Edit Task</button>
            </div>   
        </div>
    </div>
</div>

次に、jQuery でProjectWrapperTemplate要素を複製し、対応するすべてのフィールドを設定します。

$(function () {
    $.ajax({
        url: '/Project/GetTasks',
        type: "POST",
        data: { }
    }).done(function (data) {
        data.forEach(function (element) {
            AppendProjectWrapper(element);
        });
    });

    function AppendProjectWrapper(data) {
        var projectAccordionWrapper = $('#ProjectAccordionWrapper');

        var projectWrapper = $('#ProjectWrapperTemplate').clone(true, true);
        projectWrapper.id = nothing; // remove the id, so as to not have duplicates
        projectWrapper.style.display = nothing; // remove the style "display: none"

        var itemName = projectWrapper.children('#itemName'); // h3
        itemName.id = nothing;
        itemName.text(data.ItemName);

        var itemProjectID = projectWrapper.children('#itemProjectID'); // button Create New Task
        itemProjectID.id = data.ItemProjectID;

        var portletTemplate = projectWrapper.children('#portletTemplate'); // div
        data.Tasks.forEach(function (element) {
            var portlet = portletTemplate.clone();
            portlet.id = nothing;

            var taskName = portlet.children('#taskName');
            taskName.id = nothing;
            taskName.text(element.TaskName);

            var taskDescription = portlet.children('#taskDescription');
            taskDescription.id = nothing;
            taskDescription.text(element.TaskDescription);

            var editTaskButton = portlet.children('#taskID');
            editTaskButton.id = element.TaskID;

            portlet.appendTo(projectWrapper);
        });
        portletTemplate.remove(); // remove the portlet template element

        projectWrapper.appendTo(projectAccordionWrapper);
    }
}

最後に、現在保存されているタスクの'/Project/SaveTask'JSON 形式を返します。TaskManagementApplication.Models.Project

$.ajax({
    url: '/Project/SaveTask',
    type: "POST",
    data: { "taskName": taskName, "taskDescription": taskDescription, "taskID": id }
}).done(function (data) {
    AppendProjectWrapper(data);
});

の戻りデータは'/Project/GetTasks'次のようになります。

[
    {
        ItemName: '@item.Name',
        ItemProjectID: '@item.ProjectID',
        Tasks: [
            TaskName: '@task.TaskName',
            TaskDescription: '@task.TaskDescription',
            TaskID: '@task.TaskID'
        ]
    }
]

からの戻りデータは'/Project/SaveTask'、または最も外側の配列を除いて、同じ形式に従う必要があります。

このコードの多くはテストされていないことに注意してください。

于 2013-02-20T05:27:35.813 に答える