Como faço para criar um popup com um DROPDOWNLIST
em Asp.net C#
"MVC" ou Javascript/Jquery
?
Da para chamar esse popup através de um ActionLink
?
Stack Overflow em Português é um site de perguntas e respostas para programadores profissionais e entusiastas. Leva apenas um minuto para se inscrever.
Inscreva-se para participar desta comunidadeComo faço para criar um popup com um DROPDOWNLIST
em Asp.net C#
"MVC" ou Javascript/Jquery
?
Da para chamar esse popup através de um ActionLink
?
Nos exemplos abaixo irei utilizar o Zurb Foundation para abrir um Modal:
Caso queira abrir um Popup com um conteudo que já exista na pagina, não tem pq usar um ActionLink
, então o melhor seria fazer com uma tag <a href="#" />
Model
using System;
namespace SampleApp
{
public class Opcao
{
public int ID { get; set; }
public string Descricao { get; set; }
}
}
Controller
using System;
using System.Web.Mvc;
using System.Collections.Generic;
namespace SampleApp
{
public class HomeController : Controller
{
[HttpGet]
public ActionResult Index()
{
var opcoes = new List<Opcao>();
for (int i = 1; i <= 15; i++)
{
opcoes.Add(new Opcao {
ID = i,
Descricao = Guid.NewGuid().ToString()
});
}
return View(opcoes);
}
}
}
View Index
@model IEnumerable<SampleApp.Opcao>
@{
Layout = null;
}
<!DOCTYPE html>
<!-- template from http://getbootstrap.com/getting-started -->
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="http://cdn.foundation5.zurb.com/foundation.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="http://cdn.foundation5.zurb.com/foundation.js"></script>
</head>
<body>
<div class="container">
<a href="#" data-reveal-id="modal">Abrir PopUp</a>
<div id="modal" class="reveal-modal" data-reveal>
<p>
@Html.Label("Opcoes", "Opcoes")
@Html.DropDownList("Opcoes", Model.Select(item => new SelectListItem {
Value = item.ID.ToString(),
Text = item.Descricao
}))
</p>
<a class="close-reveal-modal" aria-label="Close">×</a>
</div>
</div>
<script type="text/javascript">
$(function () {
$(document).foundation();
});
</script>
</body>
</html>
Agora se o DropDownList é carregado de forma dinamica, então o ideal é fazer uma requisição AJAX, neste caso o ActionLink
será muito util.
Neste caso iremos usar a mesma Model e adicionar uma Action/View
Controller
using System;
using System.Web.Mvc;
using System.Collections.Generic;
namespace SampleApp
{
public class HomeController : Controller
{
[HttpGet]
public ActionResult Index()
{
return View(opcoes);
}
[HttpGet]
public ActionResult Opcoes()
{
if (Request.IsAjaxRequest())
{
var opcoes = new List<Opcao>();
for (int i = 1; i <= 15; i++)
{
opcoes.Add(new Opcao {
ID = i,
Descricao = Guid.NewGuid().ToString()
});
}
return View(opcoes);
}
return new HttpStatusCodeResult(HttpStatusCode.Forbidden, "Forbidden");
}
}
}
View - Index
@{
Layout = null;
}
<!DOCTYPE html>
<!-- template from http://getbootstrap.com/getting-started -->
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="http://cdn.foundation5.zurb.com/foundation.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="http://cdn.foundation5.zurb.com/foundation.js"></script>
</head>
<body>
<div class="container">
@Html.ActionLink("Abrir PopUp", "Home", "Opcoes", null, new {
@class = "reveal-modal",
@data_reveal_id = "modal",
@data_reveal_ajax = "true"
})
<div id="modal" class="reveal-modal" data-reveal>
</div>
</div>
<script type="text/javascript">
$(function () {
$(document).foundation();
});
</script>
</body>
</html>
View - Opcoes
@model IEnumerable<SampleApp.Opcao>
@{
Layout = null;
}
<p>
@Html.Label("Opcoes", "Opcoes")
@Html.DropDownList("Opcoes", Model.Select(item => new SelectListItem {
Value = item.ID.ToString(),
Text = item.Descricao
}))
</p>
<a class="close-reveal-modal" aria-label="Close">×</a>
E por fim um exemplo funcionando no DotNetFiddle (sem ActionLink):