Обновить часть страницы

Question

У меня есть страница, которая содержит 3 раздела, такие как Общие, Информация о Участнике и Индивидуальные вопросы (Частичный вид). Настроенные вопросы будут отображать список вопросов (текстовое поле) вместе с ответом (dropdownlist), который содержит кнопку редактирования, чтобы изменить поле ответа в раскрывающемся списке. Теперь, когда нажата кнопка редактирования, появится всплывающее окно, чтобы изменить поле ответа, как только пользователь нажал кнопку сохранения, измененный ответ должен отразиться в раскрывающемся списке. Я уже создал частичное представление для настраиваемых вопросов, но все же значение ответа не отражало изменений в раскрывающемся списке. Любой образец кода или идеи?

Контроллер

[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"); 
        } 
       } 
      }); 
     }; 

Answer 1

Правильно ли мой подход?

Да, ваш подход правильный. Например, вы можете использовать jQuery UI dialog для реализации всплывающей и редактируемой части. Идея состоит в том, чтобы использовать 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)), а не

@using (Html.BeginForm())