Monday, 24 November 2014

How to bind Dropdownlist inside WebGrid in MVC 4 Razor or how to populate dropdownlist inside webgrid in ASP.NET with MVC 4 Razor using C#

Hi friends, in this article I will explain about how to bind Dropdownlist inside WebGrid in MVC 4 Razor or how to populate dropdownlist inside webgrid in ASP.NET with MVC 4 Razor.
Here in this example I have one class and have four fields like UserID, UserName,Address and MaritalStatus. When page is load the data of User Details will be bind in web grid and Marital Status is bind on the dropdownlist inside the web grid.

Model(UserModel.cs):
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace MVCWebGridDropDownlist.Models
{
    public class UserModel
    {
        public List<User> userList { get; set; }
    }

    public class User
    {
        public int UserID { get; set; }
        public string UserName { get; set; }
        public string Address { get; set; }
        public SelectList MaritalStatus { get; set; }
    }

    public class Marital_Status
    {
        public int ID { get; set; }
        public string MaritalStatus { get; set; }
    }

}

Controller(UserController.cs):
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using MVCWebGridDropDownlist.Models;

namespace MVCWebGridDropDownlist.Controllers
{
    public class UserController : Controller
    {
        public ActionResult Index()
        {
            UserModel obj = new UserModel();
            obj.userList = GetUserList();
            return View(obj);
        }

        public List<User> GetUserList()
        {
            List<User> user = new List<User>();
            user.Add(new User { UserID = 1, UserName = "Kishore", Address = "XXXXXXXXX", MaritalStatus = GetMaritalStatus() });
            user.Add(new User { UserID = 2, UserName = "Raghav", Address = "XXXXXXXXX", MaritalStatus = GetMaritalStatus() });
            user.Add(new User { UserID = 3, UserName = "Satyam", Address = "XXXXXXXXX", MaritalStatus = GetMaritalStatus() });
            user.Add(new User { UserID = 4, UserName = "SambhaShiva", Address = "XXXXXXXXX", MaritalStatus = GetMaritalStatus() });
            user.Add(new User { UserID = 5, UserName = "Nageswar", Address = "XXXXXXXXX", MaritalStatus = GetMaritalStatus() });
            user.Add(new User { UserID = 6, UserName = "SaiR", Address = "XXXXXXXXX", MaritalStatus = GetMaritalStatus() });
          
            return user;
        }

        public SelectList GetMaritalStatus()
        {
            List<Marital_Status> status = new List<Marital_Status>();
            status.Add(new Marital_Status { ID = 1, MaritalStatus = "Single" });
            status.Add(new Marital_Status { ID = 2, MaritalStatus = "Married" });
            status.Add(new Marital_Status { ID = 3, MaritalStatus = "Divorced" });
            status.Add(new Marital_Status { ID = 4, MaritalStatus = "Widowed" });
            SelectList objMStatus = new SelectList(status, "ID", "MaritalStatus");
            return objMStatus;
        }
    }
}

View(Index.cshtml):
@model MVCWebGridDropDownlist.Models.UserModel
@{
    ViewBag.Title = " How to bind dropdownlist in WebGrid in MVC";
}
<style type="text/css">
    .webGrid
    {
        margin: 4px;
        border-collapse: collapse;
        width: 500px;
        font-family: Tahoma;
        font-size:small;
    }
    .grid-header
    {
        background-color: #990000;
        font-weight: bold;
        color: White !important;
    }
    .webGrid th a
    {
        color: White;
        text-decoration: none;
    }
    .webGrid th, .webGrid td
    {
        border: 1px solid black;
        padding: 5px;
    }
    .alt
    {
        background-color: #F4EFEF;
    }
    .webGrid th a:hover
    {
        text-decoration: underline;
    }
    .to-the-right
    {
        text-align: right;
    }
</style>
@{
    var grid = new WebGrid(source: Model.userList,
      rowsPerPage: 5);
    @grid.GetHtml(
        tableStyle: "webGrid",
        headerStyle: "grid-header",
        rowStyle: "gridRow",
        alternatingRowStyle: "alt",
        mode: WebGridPagerModes.All,
        firstText: "<< First",
        previousText: " < Previous",
        nextText: "Next >",
        lastText: "Last >>",
        caption: "User Details",
        columns: grid.Columns(
        grid.Column("UserID", "User ID"),
        grid.Column("UserName", "User Name"),
        grid.Column("Address", "Address"),
        grid.Column(header: "Marital Status", format: @item => Html.DropDownList("value", (IEnumerable<SelectListItem>)Model.userList[0].MaritalStatus
))))
}


The output of the above code as shown in the below figure.

You can download the code by clicking on the below Download image. 

No comments:

Post a Comment

© 2012-2014 Aspdotnet-Kishore.blogspot.com. All Rights Reserved.
The content is copyrighted to Kishore and may not be reproduced on other websites without permission from the owner.