How to create a popup with a dropdownlist?

Asked

Viewed 175 times

1

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

You can call this popup through a ActionLink ?

javascript jquery asp.net-mvc

  • http://stackoverflow.com/a/8065042/2912399

  • https://dotnetfiddle.net/V0pr0A

  • @Tobymosque, I can do this by clicking on an Actionlink ?

  • @mustache knows that ?

1 answer

1


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

If you want to open a Popup with a content that already exists on the page, you do not have to use a ActionLink, then the best would be to do with a 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>

Now if the Dropdownlist is loaded dynamically, then the ideal is to make an AJAX request, in this case the 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>
        <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 - 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 on Dotnetfiddle (without Actionlink):

https://dotnetfiddle.net/V0pr0A

  • I’ll try. Thanks.

Browser other questions tagged javascript jquery asp.net-mvc

You are not signed in. Login or sign up in order to post.