JQuery 자식 창에서 부모로 반환 값

Question

먼저 각 행에 대해 편집 단추가있는 레코드 목록이 있습니다 (아래 그림 1 부모 창 참조). 편집 버튼을 클릭하면 팝업 창에 응답 필드가 표시된 팝업이 표시됩니다 (이미지 2 하위 창 참조). 팝업 창에는 답변 값을 처리하는 텍스트 영역이 있으며 여기에서 사용자가 값을 추가/삭제할 수 있습니다. 사용자가 저장 버튼을 클릭하면 값이 데이터베이스에 저장되고 부모 창에서 편집하도록 선택된 특정 행에 대한 응답 필드의 수정 된 값이 반영됩니다.

여기 내 코드가 있습니다. 컨트롤러를 구현할 때 컨트롤러를 구현할 수없는 이유는 컨트롤러를 여기에 호출하여 dadabase에 데이터를 저장할 수 있는지 여부를 알 수 없기 때문입니다. .

저는 MVC를 처음 접했고, 제 문제를 도울 수있는 사람이 있기를 바랍니다.

컨트롤러 :

[HttpPost] 
     public ActionResult Sample(string answers, string question, string controlid, string eventid) 
     { 

      return View("CustomizedQuestion"); 
     } 

자바 스크립트 :

$(".editButton").live("click", function (e) { 
       e.preventDefault(); 
       var $title = $(this).attr("title"); 
       var $answers = $(this).attr("answers"); 
       var $controlid = $(this).attr("id"); 
       dropdownlist($controlid, $title, $answers); 
      }); 

function dropdownlist(controlid, title, answers, eventid) { 

var $answersreplaced = answers.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("Sample")', 
       type: 'POST', 
       dataType: 'json', 
       data: { answers: $('#answerlist').val(), 
         question: title, 
         controlid: controlid, 
         eventid: eventid 
        }, 

       success: function (resp) { 

        $(this).dialog("close"); 
       }, 

       error: function() { 
        alert('there was a problem saving the new answers, please try again'); 
        } 
      }); 

     }, 

     Cancel: function() { 

      $(this).dialog("close"); 

     } 

    } 

}); 

}; 

Answer 1

주석의 요청에 따라 :

$(".editButton").live("click", function (e) { 
     e.preventDefault(); 
     var $title = $(this).attr("title"); 
     var $answers = $(this).attr("answers"); 
     var $controlid = $(this).attr("id"); 
     var questionID = $(this).attr('questionID'); 
     dropdownlist(this, questionID, $controlid, $title, $answers); 
    }); 

function dropdownlist(el, questionID, controlid, title, answers) { 
    var $answersreplaced = answers.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() { 
        var dialog = $(this); 
        $.ajax(function() 
        { 
         url : 'controller-path', 
         type : 'POST', 
         dataType : 'json', 
         data : 
         { 
          Answers : $("#answerlist").val(), 
          QuestionID : questionID 
         }, 
         success : function(resp) 
         { 
          $(dialog).dialog("close"); 
          var newanswers = $("#answerlist").val(); 
          modifyanswers(controlid,newanswers); 
         }, 
         error : function() 
         { 
          alert('there was a problem saving the new answers, please try again'); 
         } 
        }); 
       }, 
       Cancel: function() { 
        $(this).dialog("close"); 
       } 
      } 
     }); 
}; 

을이 외에도, 당신은 답변에 관련된 행의 ID를 저장 questionID라는 이름의 속성을 추가해야합니다.

별도의 메모에서이 방법으로 속성을 사용하지 마십시오. answer와 titleID는 유효한 속성이 아니기 때문에 유효한 속성이므로 제목에 제목을 저장할 수 있습니다. 결과적으로 HTML 유효성 검사가 실패합니다.

다른 방법으로 저장하는 것이 좋습니다.