다른 페이지로 이동하지 않고 jQuery 대화 상자에서 부분보기를 표시하는 방법

Question

두 컨트롤러 A와 B가 있습니다. A는 일부 데이터를 격자보기로 표시하는 역할을합니다. 선택한 레코드에 대한 추가 정보를 가져 오는 "ShowInfo"라는 버튼이 있다고 가정합니다. 선택한 레코드에 대한 정보를 검색하는 것은 컨트롤러 B의 작업입니다.

정보가 너무 작아서 다른보기로 이동하면 모퉁이에 작은 장소 만 차지할 것입니다. 따라서 어디서나 탐색하지 않고 jQuery 대화 상자에 정보를 가져오고 싶습니다. 그러나 나는 그것을하는 방법에 관해서는 약간 혼란 스럽다.

다음은 부분보기에서 해당 정보를 제공 할 책임이있는 컨트롤러 B의 작업 방법입니다.

public class BController:Controller{ 

    public ActionResult GetInfo(int recordID){ 
     RecordInfo info=RecordsRepository.GetRecordInfoById(recordID); 
     return PartialView(viewName:"RecordInfo",model:info); 
    } 
} 

나는 행동 방법이 다를 수 있습니다. 어쩌면 부분 뷰 대신 JSON을 반환해야하지만 어쨌든, 어떻게해야합니까?

Answer 1

기본보기 페이지 (은 showInfo 버튼 페이지)에 다음 코드

를 착용합니다. 예를 들어, 당신이 대답에 확장시겠습니까 GetInfo()

$('#ShowInfo').click(function() { 
    var url = '@Url.Action("GetInfo", "B")'; 
    var ID = someValue; // the value to pass to the GetInfo method 
    $.get(url, { recordID: ID }, function(data) { 
    $('#someElement').html(data); 
    }); 
}); 

Answer 2

Jquery ajax를 사용하여이를 수행 할 수 있습니다. 보기 페이지에서 jquery ajax를 작성하고 ajax에서 부분보기 조치를 호출하십시오. 결과를 html 형식으로 받고 대화 상자에서 바꿉니다. 당신은 JQuery와에게 .get 또는 .load 방법을 사용할 수 있습니다

$(document).ready(function(){ 
     $("#ShowInfo").on("click",function(){ ///give id to showinfo button and attr data-id is record id 
      var id=$(this).attr("data-id"); 
      $.ajax({ 
        type: "POST", 
        url: "B/GetInfo", 
        data: JSON.stringify({ recordID: id }), 
        dataType: "html", 
        success: function (html) 
          { 
           ////put the html response in dialog box 
          } 

       }); 
     }) 

    });