페이지 새로 고침

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와 - 아약스

$(".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())