Search code examples
c#asp.net.netasp.net-mvcasp.net-mvc-5

Populating dropdown from SQL Server with ajax in C# and ASP.NET MVC

It seem that debugger doesnt enter at all at the success function. The dropdown im trying to populate is part of a modal in /Dokument/Dokument route when i press a button i get a modal with some fields. One of the fields is a dropdown which has to get values from Tipi table. In the dropdown I see nothing not even the message

Route config

namespace Archieve1
{
    public class RouteConfig
    {
        public static void RegisterRoutes(RouteCollection routes)
        {
            routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

            routes.MapRoute(
                name: "Default",
                url: "{controller}/{action}/{id}",
                defaults: new { controller = "Home", action = "Login", id = UrlParameter.Optional }
            );
        }
    }
}

AJAX script

script type="text/javascript">
    $(document).ready(function () {
        $.ajax({
            type: "GET",
            url: "/NgarkoDokumentController/GetTipi",
            data: "{}",
            success: function (data) {
                var s = '<option value="-1">Selektoni Tipin</option>';
                for (var i = 0; i < data.length; i++) {
                    s += '<option value="' + data[i].Id_Tipi + '">' + data[i].Emri_llojit + '</option>';
                }
                $("#tipiDropdown").html(s);
            }
        });
    });
</script>

Controller method

 using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Web.UI.WebControls;

namespace Archieve1.Controllers
{
    public class NgarkoDokumentController : Controller
    {

        public ActionResult Dokument()
        {
             return View();
        }
        // GET: NgarkoDokument

            
        public ActionResult GetTipi()
        {
            Test_kristiEntities db = new Test_kristiEntities();
            return Json(db.Tipi.Select(x => new
            {
                Id_Tipi = x.Id_Tipi,
                Emri_llojit = x.Emri_llojit
            }).ToList(), JsonRequestBehavior.AllowGet);

            // return View();
        }
    }
}

Model I built with some tables

namespace Archieve1.Models
{
    public class NgarkoDokument
    {
        public Dokumenti Dokumenti { get; set; }
        public Fusha_Indeksimit FushaIndeksimit { get; set; }
        public Vendndodhja_Fizike Vendndodhja_fizike { get; set; }
        public IEnumerable<Tipi> Tipi { get; set; }  
    }
}

And here is the html

@model Archieve1.Models.NgarkoDokument
    <select title="Lloji i dokumentit" name="lloji" class="form-control col-md-3 box" id="tipiDropdown"> </select>
Solution

  • The default route of ASP.NET MVC 5 {controller}/{action}/{id}, and the /{id} part is optional.

    {controller} refers to the class name of your C# controller, but it removes the word Controller at the end. In your example, the controller name would be NgarkoDokument.

    {action} refers to the method name of your action. In your example, GetTipi.

    So the route becomes /NgarkoDokument/GetTipi.

    Here's the relevant documentation: