Hi mahesh213,
Refer below code.
Namespaces
using System.Configuration;
using System.Data;
using System.Data.SqlClient;
Controller
public class HomeController : Controller
{
// GET: /Home/
public ActionResult Index()
{
TempData["CountriesList"] = GetCountries();
TempData["StatesList"] = GetStates();
return View();
}
public JsonResult GetStates(string id)
{
List<SelectListItem> states = GetStates();
for (int i = 0; i < id.Split(',').Length; i++)
{
for (int j = 0; j < states.Count; j++)
{
if (states[j].Value.Split('_')[0] == id.Split(',')[i])
{
states[j].Selected = true;
}
}
}
return Json(states, JsonRequestBehavior.AllowGet);
}
public ActionResult Save(string[] Countries, string[] States)
{
return View();
}
private List<SelectListItem> GetCountries()
{
List<SelectListItem> countries = new List<SelectListItem>();
using (SqlConnection conn = new SqlConnection(ConfigurationManager.ConnectionStrings["constr"].ConnectionString))
{
SqlCommand cmd = new SqlCommand();
cmd.Connection = conn;
cmd.CommandText = "SELECT CountryId,CountryName FROM Countries";
cmd.CommandType = CommandType.Text;
conn.Open();
using (SqlDataReader sdr = cmd.ExecuteReader())
{
while (sdr.Read())
{
countries.Add(new SelectListItem
{
Text = sdr["CountryName"].ToString(),
Value = sdr["CountryId"].ToString()
});
}
}
conn.Close();
}
return countries;
}
private List<SelectListItem> GetStates()
{
List<SelectListItem> states = new List<SelectListItem>();
using (SqlConnection conn = new SqlConnection(ConfigurationManager.ConnectionStrings["constr"].ConnectionString))
{
SqlCommand cmd = new SqlCommand();
cmd.Connection = conn;
cmd.CommandText = "SELECT StateId,CountryId,StateName FROM States";
cmd.CommandType = CommandType.Text;
conn.Open();
using (SqlDataReader sdr = cmd.ExecuteReader())
{
while (sdr.Read())
{
states.Add(new SelectListItem
{
Text = sdr["StateName"].ToString(),
Value = sdr["CountryId"] + "_" + sdr["StateId"].ToString()
});
}
}
conn.Close();
}
return states;
}
}
View
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Index</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/css/bootstrap-multiselect.css" />
<script type="text/javascript" src="https://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/js/bootstrap-multiselect.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#Country').multiselect();
$('#State').multiselect();
$("#Country").change(function () {
var countryId = $("#Country").val();
$.ajax({
type: 'GET',
url: '/Home/GetStates/' + countryId,
success: function (result) {
$("#State").empty();
$('#State').multiselect('destroy');
$.each(result, function (i, state) {
if (state.Selected) {
$("#State").append('<option value="' + state.Value + '" selected=true>' + state.Text + '</option>');
} else {
$("#State").append('<option value="' + state.Value + '">' + state.Text + '</option>');
}
});
$('#State').multiselect();
}
});
});
$('#btnSave').on('click', function () {
var countries = $("#Country").val();
var states = $("#State").val();
if (countries != null && states != null > 0) {
var obj = {};
obj.Countries = countries;
obj.States = states;
$.ajax({
type: 'POST',
url: '/Home/Save/',
data: JSON.stringify(obj),
contentType: 'application/json; charset=utf-8',
dataType: 'json',
success: function (result) {
},
error: function (result) {
}
});
} else {
alert('Please select Country and State.');
}
});
});
</script>
</head>
<body>
<p>
<label>Select Country : <%:Html.ListBox("Country", TempData["CountriesList"] as List<SelectListItem>, "---Select---") %></label>
</p>
<p>
<label>Select State : <%:Html.ListBox("State", TempData["StatesList"] as List<SelectListItem>, "---Select---") %></label>
</p>
<button id="btnSave" type="button">Save</button>
</body>
</html>
