ViewModel에서 Ajax ASP .NET MVC

Question

으로 업데이트 목록 뷰에 표시되는 Model 개체의 목록 (List)이 있습니다. 페이지를 새로 고치지 않고 목록에 추가하고 싶습니다. 따라서 Ajax는 훌륭한 솔루션이라고 생각합니다. 임씨는 현재 일하는 데 어려움을 겪고 있습니다.

내보기는 목록이 포함 된 PartialView를 렌더링합니다.

누군가가 컨트롤러에 목록을 전달한 다음 전체 페이지를 업데이트하지 않고보기로 되돌릴 수있는 힌트를 줄 수 있습니까?

제 질문에 도움이 되었기를 바랍니다.

/크리스

편집 :

나는 JQuery와 함께 노력했습니다. 다음과 같습니다

<script> 
$(document).ready(function() { 
    $("#btnSave").click(function() { 

     $.ajax(
      { 
       type: "POST", //HTTP POST Method 
       url: "/Video/Index", // Controller/View 
       data: { //Passing data 
        testString: $("#txtArea").val(), 
        videoID: '@(Model.Video.iVideo_ID)', 
        taskID: document.getElementById('dropVal').value 
       } 
      }).success(function() { 
       $("#proever").load("/Video/Index"); 
      }); 
    }) 
}) 

을 난 내 컨트롤러 방법 HttpPost 얻을이 방법. 그리고 매개 변수를 성공적으로 전달합니다.

[HttpPost] 
    public ActionResult Index(CommentViewModel viewModel) 
    { 
     System.Diagnostics.Debug.WriteLine(viewModel.testString); 
     System.Diagnostics.Debug.WriteLine(viewModel.videoID); 
     System.Diagnostics.Debug.WriteLine(viewModel.taskID); 



     viewModel.testString = "new text string"; 

     return View(viewModel); 
    } 

문제는 내가 뭘 잘못 .. 다시보기로 업데이트 뷰 모델을 얻을 수있는 지금? 나는 내가 그것을 다시보기로 업데이트받을 수 있는지 목록 있지만, 단지 테스트 문자열을 업데이트하지 않는이 예에서는 ..

Answer 1

내가이 같은 문제를 해결 관심있는 사람 HttpPost 메서드에서 오류없이 HttpPost를 통해 데이터베이스에 주석을 추가하고 jquery는 뷰에 오류를 추가합니다.

Answer 2

이 작업을 시도 할 수 있습니다 :

$(document).ready(function() { 
    $("#btnSave").click(function() { 
    var model = { 
        testString: $("#txtArea").val(), 
        videoID: '@(Model.Video.iVideo_ID)', 
        taskID: document.getElementById('dropVal').value 
       }; 
     $.ajax(
      { 
       type: "POST", //HTTP POST Method 
       url: "/Video/Index", // Controller/View      
       data: JSON.stringify({ viewModel: model }) 
       async: false, 
       processData: false, 
       contentType: false, 
       dataType: 'json' 
      }).success(function (json) { 
       $("#proever").html(json.responseText); 
      }); 
    }) 
}) 

Answer 3

당신은 사용할 필요가 귀하의 경우 영구 데이터 저장소. 현재 비동기 게시물 요청은 뷰 모델 데이터를 변경하지만 .load (...) jquery 함수로 뷰를로드하려고하면 이후 http 요청에서 데이터가 손실됩니다.

1 http 컨트롤러에 대한 비동기 요청을 전송하여 db 저장소의 데이터를 변경합니다. 2 http get index 동작에서 db에서 뷰 모델 데이터를 읽습니다.

<script> 
$(document).ready(function() { 
    $("#btnSave").click(function() { 

     $.ajax(
      { 
       type: "POST", //HTTP POST Method 
       url: "/Video/AddComment", // Controller/View 
       data: { //Passing data 
        //Reading text box values using Jquery 
        sComment: $("#txtArea").val(), 
        videoID: '@(Model.Video.iVideo_ID)', 
        taskID: document.getElementById('dropVal').value 
       } 
      }).success(function() { 
       console.log("good"); 
       var txt = document.getElementById('txtArea').value; 
       console.log(txt); 

       var taskId = document.getElementById('dropVal').value; 
       var taskCont = $("#dropVal option:selected").text(); 
       var taskContNum = Number(taskCont) - 1 
       console.log(taskCont); 

       var node = document.createTextNode(txt); 

       var para = document.createElement("div"); 
       para.appendChild(node); 

       document.getElementById('taskPalace').appendChild(para); 

       document.getElementById('cola-' + '' + taskContNum).appendChild(para); 

       document.getElementById('txtArea').value = ""; 
      }); 
    }) 
}) 

이

그래서 요청이 성공하면 (. $는 ("#의 proever") 부하 ("/ 비디오/색인")) 사람들을 위해