How to create a popup with a dropdownlist?

Question

How to create a popup with a dropdownlist?

Navigation

#1 by (1 votes)

1

How do I create a popup with a DROPDOWNLIST in Asp.net C# "MVC" or Javascript/Jquery ?

Can you call this popup through a ActionLink ?

javascript jquery asp.net-mvc

asked by anonymous 07.08.2015 / 19:22

1 answer

How to prepare a Java object to be sent (with values)? "NoReverseMatch at /" in Django, when I try to put a link on the [closed]

score 1 · Accepted Answer

In the examples below I will use Zurb Foundation to open a Modal:

If you want to open a Popup with content that already exists on the page, you do not have to use ActionLink , so it would be best to do with a <a href="#" /> tag

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><scripttype="text/javascript" src="http://cdn.foundation5.zurb.com/foundation.js"></script></head><body><divclass="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>

Now if the DropDownList is loaded dynamically, then the ideal is to make an AJAX request, in which case ActionLink will be very useful.

In this case we will use the same Model and add an 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><scripttype="text/javascript" src="http://cdn.foundation5.zurb.com/foundation.js"></script></head><body><divclass="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 - Options

@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>

And finally an example working in DotNetFiddle (without ActionLink):

link