Refresh portion of the page - asp.net-mvc-3

Question

I have a page that contains 3 divisions such as General, Attendee Information and Customized Questions (Partial view). The Customized questions will display a list of questions (textbox) along with the answer(dropdownlist) , which contains an edit button to modify the answer field in the dropdownlist. Now, when the edit button was clicked, a pop-up window will appear to modify the answer field, once the user clicked the save button the modified answer should reflects in the dropdownlist. I already created a partial view for Customized Questions but still the answer value didn't reflect the changes in the dropdownlist. Any sample codes or ideas?
Controller
[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);
}
Partial View
#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");
}
}
});
};

Answer 1

Do my approach is correct?
Yes, your approach is correct. You could for example use jQuery UI dialog to implement the popup and editing part. The idea is to use AJAX in order to avoid refreshing the whole page but only the portion you are interested in. So the partial that will be shown in the modal dialog will contain a form that will be submitted to a controller action using AJAX and the server will return the partial view with the new information about the questions.

Answer 2

You must use
$.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)) , not
#using (Html.BeginForm())