ASP.NET MVC 5: Как вы визуализируете частичный вид в div от ссылки на действие?

Question

Я новичок в ASP.NET и веб-разработке любого вида. Я искал много часов для решения моей проблемы, но, похоже, мне не кажется, что мой частичный вид появляется в div.

То, что происходит, это представление появляется, но оно заменяет всю страницу, а не появляется в div на главной странице.

Мой контроллер выглядит примерно так:

public class MyController 
{ 
    public ActionResult ShowView(int id) 
    { 
     // get view model from id 
     return PartialView(viewModel); 
    } 
} 

Мой Главный вид выглядит как этот

@model List<viewModelType> 

<div> 
    @foreach (var item in Model) 
    { 
     <div> 
      @Html.ActionLink(item.Name, "ShowView", new { id = item.ID }, new { @class = "btn-sm" }) 
     </div> 
    } 
</div> 

<div> 
    // here is where I want to partial view to go! 
</div> 

Это то, что частичный вид выглядит следующим образом:

@model viewModelType 
<div>Model.DataToDisplay</div> 

Answer 1

Хорошо, я понял это с помощью Христоса.

Основной вид должен выглядеть следующим образом:

@model List<viewModelType> 

<div> 
    @foreach (var item in Model) 
    { 
     <div> 
      <button class="js-showViewBtn" data-itemId=@item.ID>item.Name</button> 
     </div> 
    } 
</div> 

<div class="js-show-view"> 
    // here is where I want to partial view to go! 
</div> 

<script type="text/javascript"> 
    $(function() { 
     $('.js-showViewBtn').click(function (e) { 
      e.preventDefault(); 
      var itemId = $(this).data("itemId"); 

      $.ajax({ 
       method: "GET", 
       url: "/MyController/ShowView", 
       data: { id: itemId }, 
       cache: false 
      }).success(function(data){ 
       $('.js-show-view').html(data); 
      }); 
     }) 
    }); 
</script> 

По какой-то причине идентификатор элемента не возвращается, поэтому я попытался это так, и это сработало. Надеюсь, это тоже поможет другим.

Благодарим за помощь Christos.

Answer 2

Вам нужно немного JavaScript, чтобы сделать то, что вы хотите. В принципе, вам нужно подключить обработчик событий клика для ваших ссылок, и когда пользователь нажмет на один из них, будет вызван запрос ajax.

@model List<viewModelType> 

<div> 
    @foreach (var item in Model) 
    { 
     <div> 
      @Html.ActionLink(item.Name, "ShowView", new { id = item.ID }, new { @class = "btn-sm js-show-view-btn" }) 
     </div> 
    } 
</div> 

<div class="js-show-view"> 
    // here is where I want to partial view to go! 
</div> 
<!-- Before the following script been loaded, he jQuery should have been loaded --> 
<script> 
    $(function(){ 
     $(".js-show-view-btn").click(function(e){ 
      e.preventDefault(); 
      $.ajax({ 
       method: "GET", 
       url: "/MyController/ShowView", 
       data: { id = $(e).id }, 
       cache: false 
      }).success(function(data) 
      { 
       $(".js-show-view").html(data); 
      }); 
     }) 
    }); 
</script> 

Answer 3

Будет ли это работать на вас?

[ChildActionOnly] 
public class MyController 
{ 
    public ActionResult ShowView(int id) 
    { 
     // get view model from id 
     return PartialView(viewModel); 
    } 
} 

А на ваш взгляд:

<div> 
    // here is where I want to partial view to go! 
    @Html.Action("ShowView") 
</div>