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.
I already explained in the previous articles about MVC Export Data to Excel using C# || Export Data from Database Table to Excel File in MVC ASP.NET , MVC Jquery UI accordion expand/collaspe all in ASP.NET and MVC : File Upload in ASP.Net MVC application || How to Upload and delete Uploaded file in MVC
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.
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
))))
}
|
You can download the code by clicking on the below Download image.
No comments:
Post a Comment