Как представить частичный вид в диалоговом окне 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 вместо Partial view, но в любом случае, как мне это сделать?

Answer 1

Вы можете использовать Jquery .get или .load методы. Например, чтобы заменить содержимое <div id="SomeElement"></div> с частичным видом возвращаемой 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 для достижения этого. Wrtire jquery ajax на странице просмотра и вызвать действие частичного просмотра из ajax. получите результат в формате html и замените его в диалоговом окне.

Put следующий код на основной вид страницы (кнопка страницы ShowInfo)

$(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 
          } 

       }); 
     }) 

    });