Hi anjali600,
Check this example. Now please take its reference and correct your code.
Model
public class CustomerModel
{
public int ID { get; set; }
public string Name { get; set; }
public string Country { get; set; }
public IEnumerable<SelectListItem> CountrySelectList { get; set; }
}
Controller
public ActionResult Index()
{
return View();
}
public ActionResult GetData()
{
using (CustomerEntities db = new CustomerEntities())
{
List<CustomerModel> bookList = db.Customers.Select(x => new CustomerModel
{
ID = x.CustomerId,
Name = x.Name,
Country = x.Country
}).ToList();
return Json(new { data = bookList }, JsonRequestBehavior.AllowGet);
}
}
[HttpGet]
public ActionResult StoreOrEdit(int id = 0)
{
if (id == 0)
{
CustomerModel model = new CustomerModel();
model.CountrySelectList = GetCountrySelectList();
return View(model);
}
else
{
using (CustomerEntities db = new CustomerEntities())
{
CustomerModel model = db.Customers.Where(x => x.CustomerId == id).Select(x => new CustomerModel
{
ID = x.CustomerId,
Name = x.Name,
Country = x.Country
}).FirstOrDefault();
model.CountrySelectList = GetCountrySelectList();
return View(model);
}
}
}
public SelectList GetCountrySelectList()
{
CustomerEntities db = new CustomerEntities();
return new SelectList(db.Customers.ToList(), "CustomerID", "Country");
}
[HttpPost]
public ActionResult StoreOrEdit(CustomerModel bookob)
{
return View();
}
}
View
Index
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body>
<a class="btn btn-primary" style="margin-bottom:10px" onclick="PopupForm('@Url.Action("StoreOrEdit","Home")')"><i class="fa fa-plus"></i>Add New</a>
<table id="tblCustomers" class="table table-striped table-bordered" style="width:100%">
<thead style="width:100%">
<tr style="width:100%">
<th>ID</th>
<th>Name</th>
<th>Country</th>
<th></th>
</tr>
</thead>
</table>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/blitzer/jquery-ui.css" />
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://cdn.datatables.net/1.10.21/css/dataTables.bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js" type="text/javascript"></script>
<script src="//cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/dataTables.bootstrap.min.js"></script>
<script type="text/javascript">
var Popup, dataTable;
$(document).ready(function () {
dataTable = $("#tblCustomers").DataTable({
"ajax": {
"url": "/Home/GetData",
"type": "GET",
"datatype": "json"
},
"columns": [
{ "data": "ID" },
{ "data": "Name" },
{ "data": "Country", "width":"100px"},
{
"data": "ID", "render": function (data) {
return "<a class='btn btn-success btn-sm' onclick=PopupForm('@Url.Action("StoreOrEdit", "Home")/" + data + "')>" +
"<i class='fa fa-pencil'></i>Edit</a>" +
"<a class='btn btn-danger btn-sm' style='margin-left:5px' onclick=Delete(" + data + ")><i class='fa fa-trash'></i>Delete</a>";
},
"orderable": false,
"searchable": false,
"width": "150px",
"Visible":"false"
}
],
"language": {
"emptyTable" : "No data found please click on <b>Add New </b> Button"
}
});
});
function PopupForm(url) {
var formDiv = $('<div/>');
$.get(url)
.done(function (response) {
formDiv.html(response);
Popup = formDiv.dialog({
autoOpen: true,
resizable: false,
title: 'Fill Customer Details',
height: 600,
width: 600,
close: function () {
Popup.dialog('destroy').remove();
}
});
})
.fail(function (r) {
});
}
</script>
</body>
</html>
StoreOrEdit
@model _606380_DropDownList_Edit_MVC.Models.CustomerModel
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>StoreOrEdit</title>
</head>
<body>
@using (Html.BeginForm("StoreOrEdit", "Home", FormMethod.Post))
{
@Html.HiddenFor(model => model.ID)
<div class="form-group">
@Html.LabelFor(model => model.Name, new { @class = "control-label" })
@Html.EditorFor(model => model.Name, new { htmlAttributes = new { @class = "form-control", style = "Width:50%" } })
</div>
<div class="form-group">
@Html.HiddenFor(model => model.Country, new { @id = "hfCountry" })
@Html.LabelFor(model => model.Country, new { @class = "control-label" })
@Html.DropDownListFor(model => model.Country, Model.CountrySelectList, "Select", new { @id = "ddlCountry" })
</div>
<div class="form-group">
<input type="submit" value="Submit" class="btn btn-success" />
<input type="reset" value="Reset" class="btn btn-warning" />
</div>
}
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var country = $('#hfCountry').val();
$('#ddlCountry option').map(function () {
if ($(this).text() == country) {
return this;
}
}).attr('selected', 'selected');
});
</script>
</body>
</html>
