Home > ASP.NET MVC > ASP.NET # MVC # 5 – ASP.NET MVC DropDownList [Easy way to filll Asp.Net MVC Dropdownlist and call OnChange event on it]

ASP.NET # MVC # 5 – ASP.NET MVC DropDownList [Easy way to filll Asp.Net MVC Dropdownlist and call OnChange event on it]

Hi Geeks,

It is very confusing to work with the DropDownList of ASP.Net MVC.

In this post we will see the easiest example :-

1) To fill  the DropDownlist from database.

2) To call the JavaScript method on onChange event of it.

Example:

Step I

We have a class Employee_Details as follows.

 

public class Employee_Detail
   {
       public int Employee_Id { get; set; }
       public string Employee_Name { get; set; }
       public IEnumerable lstEmployee{get;set;};

   }

 

Step II

We take one strongly typed view named it as Employee inheriting the class Employee_Detail created above.

In the following view ,

We have the Dropdownlist “ddlEmployee” ,we call a java script method  onDropdownChange on its onChange event.

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<AllInMvc.ViewModels.Employee_Detail>" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">

   
Employee Detail

</asp:Content>

<
asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

   
<%using (Ajax.BeginForm("SaveEmpDeptDetails", "Employee", new AjaxOptions()))

      {  %>

    <h2>

       
Employee Detail</h2>

    <
div class="Width30">

       
Employee Name

    </div>

    <
div class="Width60">


       <%=Html.DropDownList("ddlEmployee", new SelectList(Model.lstEmployee,        "Emp_Number", "First_Name", 0), "Select", new { @style = "width:250px",@onchange = "onDropdownChange();"



 
})%>

<script type="text/javascript">

        function
onDropdownChange() {

            alert(‘Succeed’);

        }

    </script>

     </div>

    <
br />

   
<%} %>

</asp:Content>

 

Step III

In the Controller we will right one method called GetEmoloyee ,

We have used the Ado.net entity model class to fetch the data from the database.

EntityAllInMvc is the kind of Ado.net entity Model.

The return type of the following method is ActionResult , so it will return the model to the view defined above named as Employee.

public ActionResult GetEmployee()

      {

          Employee_Department obj = new Employee_Department();

         
          //Entity class object

         
AllInMvc.EDMX.EntityAllInMvc entity = new EDMX.EntityAllInMvc();

          obj.lstEmployee = entity.Employee_Details.Select(c => new { c.Emp_Number,   c.First_Name });

          return View("Employee", obj);

      }

 

Thank you.

Hope this will help you.

Advertisements
Categories: ASP.NET MVC
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: