我有一个包含3个部门的页面，例如General，Attendee Information和Customized Questions（Partial view）。自定义问题将显示问题列表（文本框）以及答案（下拉列表），其中包含用于修改下拉列表中答案字段的编辑按钮。现在，当单击编辑按钮时，将出现一个弹出窗口以修改答案字段，一旦用户单击保存按钮，修改后的答案应在下拉列表中反映出来。我已经为自定义问题创建了部分视图，但答案值仍未反映下拉列表中的更改。任何样本代码或想法？
控制器
[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, " \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");
}
}
});
};
答案 0 :(得分：0)
我的方法是否正确？
是的，您的方法是正确的。例如，您可以使用jQuery UI dialog来实现弹出和编辑部分。我们的想法是使用AJAX以避免刷新整个页面而只刷新你感兴趣的部分。因此，模态对话框中显示的部分将包含一个表单，该表单将使用AJAX提交给控制器操作服务器将返回部分视图，其中包含有关问题的新信息。
答案 1 :(得分：0)
您必须使用
$.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（））