Как я могу отобразить частичную страницу при нажатии кнопки HTML? - PullRequest
Новая
       2

Как я могу отобразить частичную страницу при нажатии кнопки HTML?

8 голосов
/ 08 сентября 2011

Я новичок в MVC3.0 и должен использовать jquery. Мне интересно, кто-то может помочь с тем, как я могу отобразить страницу частичного просмотра при нажатии кнопки HTML?

Я знаю, что это действительно просто, кнопка может называться «email to», которая будет использовать частичный вид, называемый «emailForm». Но мне нужна помощь.

Ответы [ 2 ]

14 голосов
/ 08 сентября 2011

Я бы сказал, что ответ @ smdrager - это желаемый маршрут, если это возможно. Если вам нужно , чтобы получить html из ajax-запроса, однако, есть множество способов сделать это ... вот один из примеров:)

В вашем шаблоне у вас будет кнопка или ссылка и контейнер div для вашего контента: 

<a href="javascript:void(0)" id="emailTo">email to</a>
<div id="emailToContent"></div>

Вам понадобится быстрый javascript для подключения функциональности на стороне клиента: 

<script type="text/javascript">
  $("#emailTo").click(function(){
    $.get("<url to partial>", function(data){$("#emailToContent").html(data);}
  });
</script>

Затем в вашем контроллере вам нужно действие, которое возвращает ваше частичное значение: 

public ActionResult EmailTo()
{
  ...
  return PartialView("some partial")
}

Убедитесь, что URL-адрес, переданный в вызов javascript $.get, указывает на действие, которое возвращает ваш частичный элемент.

Это очень базовая реализация, которая может легко усложниться, если ваша ситуация усложняется (обработка исключений, передача параметров и т. Д.), Но общий макет работает для меня, когда мне нужен простой ajax-запрос для запуска.

14 голосов
/ 08 сентября 2011

Вы можете визуализировать страницу заранее, но внутри скрытого div или использовать AJAX для загрузки ее после щелчка.

Hidden Div 

<div style="display:none;" id="partial">
    @Html.Partial("SomePartial")
</div>

<button type="button" id="show-partial" />

и скрипт 

$('#show-partial').click(function(){
    $('#partial').show();
});

Загрузка с помощью Ajax

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

<div id="partial"></div>

<button type="button" id="load-partial" />

и скрипт 

$('#load-partial').click(function(){
    $('#partial').load('/TheController/TheAction/');
});
...