Не знаете, как правильно использовать частичный вид

Question

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

Начну с главным видом:

@{ 
     ViewBag.Title = "getRolesByYear"; 
    } 
    </script> 
    <script type="text/javascript"> 


     getRolesForYear(parseInt(@DateTime.Now.Year)); 

     $(function() { 
      $('#years a').click(function() { 
       var year = $(this).text(); 
       console.log(year); 
       getRolesForYear(parseInt(year)); 
      }); 
     }) 
     //console.log(year); 


     function getRolesForYear(year) { 
      console.log(year); 
      $.ajax({ 
       type: "POST", 
       url: '@Url.Action("getRolesByYear", "WorkRoles")', 
       dataType: "json", 
       data: { 
        year: year 
       }, 
       success: successFunc, 
       error: errorFunc 
      }); 

      function successFunc(data, status) { 
       console.log('x'); 
       } 

      } 

      function errorFunc() { 
       alert('error'); 
      } 
     } 



    </script> 

    <div id = "years" class="btn-group btn-group-justified timeline"> 
     <a href="#@DateTime.Now.Year" class="btn btn-primary">@DateTime.Now.Year</a> 
     <a href="#@DateTime.Now.AddYears(-1).Year" class="btn btn-primary">@DateTime.Now.AddYears(-1).Year</a> 
     <a href="#@DateTime.Now.AddYears(-2).Year" class="btn btn-primary">@DateTime.Now.AddYears(-2).Year</a> 
    </div> 

<div id"partial"></div> 

В этой связи у меня есть три кнопки, с другим годом для каждой кнопки. При загрузке страницы или нажатии кнопки мыши я делаю вызов ajax для action method с параметром int.

Это упрощенная версия моего метода действия:

public ActionResult getRolesByYear(int year) 
    { 


     // a couple of queries here 


     var list = list of RoleViewModel objects; 

     return PartialView(list); 

А вот PartialView:

@model IEnumerable<eksp.Models.RoleViewModel> 


@foreach (var item in Model) 
{ 
    <div class="jumbotron"> 
     <h2>item.Role.RoleName</h2> 

     <h1> item.Role.RoleDescription</h1> 
     <p class="lead">Focus start : item.Role.FocusStart</p> 
     <p>Focus end : item.Role.FocusStart </p> 

    </div> 
} 

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

Answer 1

Ваш вызов ajax вызовет метод действия, который возвращает результат частичного просмотра (разметка, сгенерированная при выполнении частичного представления). Я думаю, вам просто нужно использовать ответ вызова ajax для обновления вашего DOM.

Если вы хотите обновить содержимое div с неполным идентификатором с ответом, вы можете сделать это в обработчике событий вашего вызова ajax.

success : function(response) 
{ 
    $("#partial").html(response); 
} 

Я также рекомендовал бы назвать getRolesForYear метод на документе готового события.

$(function() { 

     getRolesForYear(parseInt(@DateTime.Now.Year)); 

     $('#years a').click(function() { 
      var year = $(this).text(); 
      console.log(year); 
      getRolesForYear(parseInt(year)); 
     }); 
}) 

Кроме того, если ваш главный вид также является результатом метода действия getRolesByYear, вы, вероятно, хотите, чтобы вернуть частичный результат просмотра только на вызов Ajax, другие вызовы, вы можете вернуть частичный вид

public ActionResult getRolesByYear(int year) 
{ 
    var list = list of RoleViewModel objects; 
    if(Request.IsAjaxRequest()) 
    { 
     return PartialView(list); 
    } 
    else 
    { 
     return View(list); 
    } 
} 

Здесь тот же метод действий обрабатывает запрос на главный просмотр и вызов ajax. Он возвращает один и тот же вид для вызова ajax, но использует вызов PartialView, поэтому макет будет проигнорирован. Но если у вас есть определенный вид, который вы хотите вернуть, вы также можете это сделать.

if(Request.IsAjaxRequest()) 
{ 
    return PartialView("_yearlyRoles",list); 
} 

Answer 2

Одна из причин, по которой мне нравится использовать частичные представления для передачи данных через вызовы Ajax. Например, если я хочу начать поиск, чтобы избежать вызова сервера, я просто использую вызов ajax для контроллера, который возвращает результаты поиска через частичный вид. В вашем примере yoy нужно загрузить результаты в частичном div.

function successFunc(data, status) { 
    $("#partial").html(data); 
}