Question

我有一个页面, 包含3个分区, 如 General、参与者信息和自定义问题( partial view) 。自定义问题将显示一个问题列表( textbox) 和答案( 下调列表), 其中含有一个编辑按钮, 以修改下调列表中的答复字段。现在, 当点击编辑按钮时, 弹出窗口将显示修改答案字段, 一旦用户单击了保存按钮, 修改后的答复应该反映在下调列表中。我已经为自定义问题创建了部分视图, 但答案值仍然没有反映下调列表中的变化。任何样本代码或想法?

<强 > 主计长

[HttpPost]
       public ActionResult UpdateAnswers(string answers, string question, string controlid, int eventid)
       {
           var replacetext=string.Empty;
           if (answers.Length>0) 
             replacetext = answers.Replace("
", ",");
           _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;
");
            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");
                    }
                }
            });
        };

Answer 1

我的方法是正确的吗?

是的, 您的方法是正确的。例如, 您可以使用 < a href=" http:// jqueryui. com/ demos/ dialog/ " rel=" nofollow" >jQuery UI 对话框 < / a > 来实施弹出和编辑部分。想法是使用 AJAX 来避免刷新整页, 但只更新您感兴趣的部分。因此模式对话框中显示的部分将包含一个表格, 该表格将使用 AJAX 提交给控制器动作, 服务器将返回部分视图, 并提供有关问题的新信息。

Answer 2

您必须使用

 $.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 ("动作","控制器","控制器", ajaxoptions)), 不是)

@ 使用 (Html. beginForm ())

友情链接