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

我的方法正确吗？

是的，你的方法是正确的。例如，您可以使用jQuery UI 对话框来实现弹出和编辑部分。这个想法是使用 AJAX 以避免刷新整个页面，而只刷新您感兴趣的部分。因此，将显示在模式对话框中的部分将包含一个表单，该表单将使用 AJAX 和服务器将返回包含有关问题的新信息的部分视图。

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())

asp.net-mvc-3 - 刷新页面的一部分

2 回答 2

Related

Reference