asp.net-mvc-3 - ページの一部を更新

Question

一般、出席者情報、カスタマイズされた質問 (部分ビュー) などの 3 つの部門を含むページがあります。カスタマイズされた質問には、回答 (ドロップダウンリスト) とともに質問のリスト (テキストボックス) が表示されます。これには、ドロップダウンリストの回答フィールドを変更するための編集ボタンが含まれています。これで、編集ボタンがクリックされると、回答フィールドを変更するためのポップアップウィンドウが表示されます。ユーザーが保存ボタンをクリックすると、変更された回答がドロップダウンリストに反映されます。カスタマイズされた質問の部分ビューを既に作成しましたが、ドロップダウンリストの変更が回答の値に反映されませんでした。サンプルコードやアイデアはありますか?

コントローラ

[HttpPost]
       public ActionResult UpdateAnswers(string answers, string question, string controlid, int eventid)
       {
           var replacetext=string.Empty;
           if (answers.Length>0) 
             replacetext = answers.Replace("\n", ",");
           _service.UpdateAnswers(eventid, replacetext, controlid);
           var eventdetails = _service.GeteventByID(eventid);
           return PartialView( "CustomizedQuestions", eventdetails);
       }

部分図

@using EM.Website.Helpers
@model EM.Model.tbl_SBAem_Event
@{
    var dropdownList = new List<KeyValuePair<int, string>> {new KeyValuePair<int, string>(0, "Required"), new KeyValuePair<int, string>(1, "Optional"), new KeyValuePair<int, string>(2, "Hidden")};
    var selectList = new SelectList(dropdownList, "key", "value", 0);
}

@using (Html.BeginForm())
{
    @Html.ValidationSummary(true)
        <table class="table-customized-question">
                <tr>
                    <th class="td-customized-question-row"></th>
                    <th class="td-customized-question-row">Question Label</th>
                    <th class="td-customized-question-row">Display Mode</th>
                    <th class="td-customized-question-row">Answer Field</th>
                    <th class="td-customized-question-row">Edit Choices</th>
                </tr>
                <tr>
                    <td class="td-customized-question-firstrow">#1</td>
                    <td class="td-customized-question-row">@Html.EditorFor(model => model.EM_opt1Name)</td>
                    <td class="td-customized-question-row">@Html.DropDownListFor(model => model.EM_reqOpt1, selectList)</td>
                    <td class="td-customized-question-row">@Html.DropDownListFor(model => model.EM_opt1Values, @Html.SplitText(Model.EM_opt1Values, ','), new { @class = "dropdownlist-width" })</td>
                    <td>@Html.ActionImage("CustomizedQuestion", new { eventID = Model.EventMngID, question = Model.EM_opt1Name }, "~/Content/Images/edit.jpg", "Edit", new { @class = "editButton", title = Model.EM_opt1Name, answers = Model.EM_opt1Values, id = "EM_opt1Values", eventID = Model.EventMngID })</td>
                </tr>
                <tr>
                    <td class="td-customized-question-firstrow">#2</td>
                    <td class="td-customized-question-row">@Html.EditorFor(model => model.EM_opt2Name)</td>
                    <td class="td-customized-question-row">@Html.DropDownListFor(model => model.EM_reqOpt2, selectList)</td>

                    <td>@Html.ActionImage("CustomizedQuestion", new { eventID = Model.EventMngID, question = Model.EM_opt2Name }, "~/Content/Images/edit.jpg", "Edit", new { @class = "editButton", title = Model.EM_opt2Name, answers = Model.EM_opt2Values, id = "EM_opt2Values", eventID = Model.EventMngID })</td>
                </tr>
                <tr>
                    <td class="td-customized-question-firstrow">#3</td>
                    <td class="td-customized-question-row">@Html.EditorFor(model => model.EM_opt3Name)</td>
                    <td class="td-customized-question-row">@Html.DropDownListFor(model => model.EM_reqOpt3, selectList)</td>
                    <td class="td-customized-question-row">@Html.DropDownListFor(model => model.EM_opt3Values, @Html.SplitText(Model.EM_opt3Values, ','), new { @class = "dropdownlist-width" })</td>
                    <td>@Html.ActionImage("CustomizedQuestion", new { eventID = Model.EventMngID, question = Model.EM_opt3Name }, "~/Content/Images/edit.jpg", "Edit", new { @class = "editButton", title = Model.EM_opt3Name, answers = Model.EM_opt3Values, id = "EM_opt3Values", eventID = Model.EventMngID })</td>
                </tr>
                <tr>
                    <td class="td-customized-question-firstrow">#4</td>
                    <td class="td-customized-question-row">@Html.EditorFor(model => model.EM_opt4Name)</td>
                    <td class="td-customized-question-row">@Html.DropDownListFor(model => model.EM_reqOpt4, selectList)</td>
                    <td class="td-customized-question-row">@Html.DropDownListFor(model => model.EM_opt4Values, @Html.SplitText(Model.EM_opt4Values, ','), new { @class = "dropdownlist-width" })</td>
                    <td>@Html.ActionImage("CustomizedQuestion", new { eventID = Model.EventMngID, question = Model.EM_opt4Name }, "~/Content/Images/edit.jpg", "Edit", new { @class = "editButton", title = Model.EM_opt4Name, answers = Model.EM_opt4Values, id = "EM_opt4Values", eventID = Model.EventMngID })</td>
                </tr>
                <tr>
                    <td class="td-customized-question-firstrow">#5</td>
                    <td class="td-customized-question-row">@Html.EditorFor(model => model.EM_opt5Name)</td>
                    <td class="td-customized-question-row">@Html.DropDownListFor(model => model.EM_reqOpt5, selectList)</td>
                    <td class="td-customized-question-row">@Html.DropDownListFor(model => model.EM_opt5Values, @Html.SplitText(Model.EM_opt5Values, ','), new { @class = "dropdownlist-width" })</td>
                    <td>@Html.ActionImage("CustomizedQuestion", new { eventID = Model.EventMngID, question = Model.EM_opt5Name }, "~/Content/Images/edit.jpg", "Edit", new { @class = "editButton", title = Model.EM_opt5Name, answers = Model.EM_opt5Values, id = "EM_opt5Values", eventID = Model.EventMngID })</td>
                </tr>
                <tr>
                    <td class="td-customized-question-firstrow">#6</td>
                    <td class="td-customized-question-row">@Html.EditorFor(model => model.EM_opt6Name)</td>
                    <td class="td-customized-question-row">@Html.DropDownListFor(model => model.EM_reqOpt6, selectList)</td>
                    <td class="td-customized-question-row">@Html.DropDownListFor(model => model.EM_opt6Values, @Html.SplitText(Model.EM_opt6Values, ','), new { @class = "dropdownlist-width" })</td>
                    <td>@Html.ActionImage("CustomizedQuestion", new { eventID = Model.EventMngID, question = Model.EM_opt6Name }, "~/Content/Images/edit.jpg", "Edit", new { @class = "editButton", title = Model.EM_opt6Name, answers = Model.EM_opt6Values, id = "EM_opt6Values", eventID = Model.EventMngID })</td>
                </tr>
            </table>

}

Jquery-Ajax

$(".editButton").live("click", function (e) {
                e.preventDefault();
                var $title = $(this).attr("title");
                var $answers = $(this).attr("answers");
                var $controlid = $(this).attr("id");
                var $eventId = $(this).attr("eventID");
                dropdownlist($controlid, $title, $answers, $eventId);
            });

 function dropdownlist(controlid, title, answer, eventid) {
            var $answersreplaced = answer.replace(/\,/g, "&nbsp;\r");
            var $deleteDialog = $('<div><textarea id="answerlist"  rows="10" cols="50">' + $answersreplaced + '</textarea><div><div style="font-size:9px">(To change back to an open answer field, delete all choices above and save)</div>');
            $deleteDialog.dialog({
                resizable: false,
                height: 280,
                width: 350,
                title: title + " - Edit Choices",
                modal: true,
                buttons: {
                    "Save": function () {
                        $.ajax({
                            url: '@Url.Action("UpdateAnswers")',
                            type: 'POST',
                            dataType: 'html',
                            context: $(this),
                            data: {
                                answers: $("#answerlist").val(),
                                question: title,
                                controlid: controlid,
                                eventid: eventid
                            },
                            success: function (result) {
                                $(this).dialog("close");
                                alert(result);
                                $("#"+controlid+"").html(data); 
                            },
                            error: function () {
                                //xhr, ajaxOptions, thrownError
                                alert('there was a problem saving the new answers, please try again');
                            }
                        });
                    },
                    Cancel: function () {
                        $(this).dialog("close");
                    }
                }
            });
        };

score 0 · Accepted Answer

使用する必要があります

 $.ajax({
            type: "POST",
            url: '@Url.Action("action", "controller")',

            data: "{... parameterd}",
            contentType: "application/json; charset=utf-8",
            success: function (data) {
                      .. $("#yourDivID").html(data);
            }
        });

@using（Ajax.BeginForm（ "action"、 "controller"、ajaxOptions））、ではない

@using（Html.BeginForm（））

score 0 · Accepted Answer

私のアプローチは正しいですか？

はい、あなたのアプローチは正しいです。たとえば、jQuery UI ダイアログを使用して、ポップアップと編集部分を実装できます。ページ全体を更新するのを避け、関心のある部分のみを更新するために AJAX を使用するという考え方です。そのため、モーダルダイアログに表示されるパーシャルには、AJAX を使用してコントローラーアクションに送信されるフォームが含まれます。サーバーは、質問に関する新しい情報を含む部分ビューを返します。

asp.net-mvc-3 - ページの一部を更新

2 に答える 2

Related

Reference