вызовите частичный вид, используя @ url.action, используя jQuery

назовите частичный вид на @ url.action. Я показываю записи с использованием url.action и хочу загрузить частичное представление, когда пользователь нажимает на записи.вызовите частичный вид, используя @ url.action, используя jQuery

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

<td> 
<a href="@Url.Action("Details", new { id=item.TeamId})"> 
@Html.DisplayFor(modelItem => item.TeamName) 
</a> 
</td>

вот мой Див, в котором я размещения Частичный вид

<div id="detailsPlace" class="dialog_content3" style="display:none"></div> 
     @Html.Partial("_TeamDetails") 
    </div>

вот мой частичный вид, который я хочу сделать

@model light.ViewModels.ViewDetailTeam 
@{ 
    var item = Model.Team; 
} 

    <div class="dialogModal_header">@Html.Label(item.TeamName)</div> 
    <div class="dialogModal_content"> 
     <div class="main-content"> 
      <div class="navi-but"> 
        @Html.Label(item.TeamName) 
       </div> 
        @Html.Label(item.Description) 
       </div> 
      </div> 
     </div>

и вот мой контроллер

public ActionResult Details(int id) 
     { 

      lightCoreModel.User loggedInUser = new lightCoreModel.User(); 


       ViewDetailTeam viewDetailTeam = new ViewDetailTeam(); 
       ViewData["DetailModel"] = viewDetailTeam; 
       viewDetailTeam.Retrieve(id); 
       return PartialView("_TeamDetails",viewDetailTeam); 

     } 
now i am facing this problem with pop up its showing me the following screen.

enter image description here

источник

2014-11-17 Felixerity

Так в чем проблема с вашим кодом? Загружает ли это частичное представление в виде всего изображения? Не могли бы вы объяснить реальные сообщения об ошибках/ошибках? – wf4

Если вы хотите сделать это динамически с веб-страницы, вам нужно будет взглянуть на Ajax. По сути, вы хотите, чтобы ваш метод Ajax вызывал и действие на вашем контроллере, которое вернет ваше частичное представление. Затем вы делаете что-то вроде $ (myContainer) .html (partialView) в обратном вызове OnSuccess или Done в вашем методе Ajax. –

Вам потребуется Ajax, чтобы сделать это. Во-первых, добавить блок скрипта на ваш взгляд, с этим кодом:

<script type="text/javascript"> 
    $(function() { 
     $('.details').click(function() { 
      var $buttonClicked = $(this); 
      var id = $buttonClicked.attr('data-id'); 

      $.ajax({ 
       url: '@Url.Action("Details")', 
       type: 'GET', 
       data: { id: id }, 
       success: function (partialView) { 
        $('#detailsPlace').html(partialView); 
        $('#detailsPlace').show(); 
       } 
      }); 
     }); 
    }); 
</script>

Затем измените свой якорный тег к этому:

<a href="#" class="details" data-id="@item.TeamId">Details</a>

вызов Ajax будет срабатывать каждый раз, когда элемент с классом деталей щелкнул. После нажатия идентификатор, который хранится в атрибуте data-id, будет передан вместе с контроллером. Когда ваш контроллер передает частичный вид назад, частичный вид будет загружен в функцию успеха вызова ajax, и будет показано значение параметра, так как на дисплее установлено значение none.

источник

2014-11-17 15:39:29 JB06

thanku его работа теперь, но другая проблема возникает в первый раз, когда я нажимаю на запись, она просто показывает экран затухания с перекрестным символом всплывающего окна, но когда я нажимаю его в следующий раз, он показывает всплывающее окно. – Felixerity

У вас есть фотографии? – JB06

Я не могу добавить скриншот в комментарии. основная проблема заключается в том, что при первом обратном обращении к странице он не показывает ничего, кроме пустого экрана затухания с перекрестным символом всплывающего окна, но после закрытия этого всплывающего окна снова я нажимаю ссылку на ссылку href link, она работает так, как ожидалось. ты меня достал. – Felixerity

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

Первого пакета установки jQuery.Ajax.Unobtrusive с помощью команды

Install-Package jQuery.Ajax. Ненавязчивый

и убедитесь, что JQuery-xxxx.js и jquery.unobtrusive-ajax.js включены перед списком

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

<a href="@Url.Action("Details", new { id=item.TeamId})" data-ajax='true' data-ajax-update='#detailsPlace' data-ajax-mode='replace'>

или

@Ajax.ActionLink("Details", 
       "Details", 
        new { id=item.TeamId}, 
       new AjaxOptions { HttpMethod = "GET", 
       InsertionMode = InsertionMode.Replace, 
       UpdateTargetId = "detailsPlace"})

и в верхней части View добавить код

if (Request.IsAjaxRequest()) 
{ 
    Layout=null; 
}

для получения дополнительной информации http://chsakell.com/2013/05/12/mvc-unobtrusive-ajax/

источник

2014-11-17 15:32:26

Ну частичный вид - рендеринг, но всплывающее окно не работает. – Felixerity

Попробуйте вызвать $ ('# detailsPlace'). Show(); в конце представления, если он не работает, скажите мне, что –

работает, но возникает другая проблема, когда я нажимаю на запись, которую она просто показывает экран затухания с перекрестным символом всплывающего окна, но когда я нажимаю его в следующий раз, он показывает всплывающее окно. – Felixerity

Если вы хотите разместить Parti alView в div, вы можете попробовать Ajax helper. Сначала попробуйте изменить ActionResult на PartialViewResult. Один из определений Ajax помощника заключается в следующем:

@Ajax.ActionLink("Display name", 
     "Your partial action name", 
     "Controller name", 
     new { /* object values */ }, // e.g. ID = yourmodel.ID or null 
      new AjaxOptions { 
       HttpMethod = "GET", 
       UpdateTargetId = "your div id without #", 
       InsertionMode = InsertionMode.Replace 
      })

источник

2014-11-17 15:38:05 Celdor

вызовите частичный вид, используя @ url.action, используя jQuery

ответ

Смежные вопросы