Hi sunnyk21,
To post the selected item, you have to add HiddenFor and on drop down selection change set selected item text and value in the hidden field.
Check this example. Now please take its reference and correct your code.
Model
public class ItemRequest
{
public int Id { get; set; }
public int ItemCode { get; set; }
public string ItemName { get; set; }
public string Status { get; set; }
public Nullable<int> Count { get; set; }
public IEnumerable<Country> ItemCollection { get; set; }
}
Controller
public class HomeController : Controller
{
// GET: /Home/
public ActionResult Index()
{
ItemRequest ir = new ItemRequest();
using (ProductEntitites db = new ProductEntitites())
{
ir.ItemCollection = db.Countries.ToList();
}
return View(ir);
}
[HttpPost]
public ActionResult NewRequest(ItemRequest ir)
{
ProductEntitites db = new ProductEntitites();
TempData["itemcode"] = "Item Name : " + ir.ItemName + "\\nCitem Code: " + ir.ItemCode;
return RedirectToAction("index");
}
}
View
<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<_Pass_Chosen_DropDownList_Selected_Value.Models.ItemRequest>" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>NewRequest</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link rel="stylesheet" href="../../Content/Chosen/chosen.min.css" />
<script type="text/javascript" src="../../Scripts/chosen.jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$('#dditemlist').chosen();
$("#dditemlist").on("change", function () {
$("#ItemCode").val($(this).find('option:selected').val());
$("#ItemName").val($(this).find('option:selected').text());
});
});
</script>
</head>
<body>
<% using (Html.BeginForm("NewRequest", "Home", FormMethod.Post))
{%>
<div class="container">
<div class="row">
<div class="col-md-3">
</div>
<div class="col-md-9">
<br />
<br />
<%:Html.HiddenFor(model => model.ItemCode) %>
<%:Html.HiddenFor(model => model.ItemName) %>
<%:Html.DropDownListFor(model => model.ItemCode, new SelectList(Model.ItemCollection, "CountryId", "CountryName"), new { id = "dditemlist" })%>
</div>
</div>
<div class="row">
<div class="col-md-3">
</div>
<div class="col-md-9">
<input type="submit" value="Add To card" />
</div>
</div>
</div>
<% if (TempData["itemcode"] != null)
{%>
<script type="text/javascript">
window.onload = function () {
alert('<%=TempData["itemcode"] %>');
};
</script>
<% } %>
<% } %>
</body>
</html>
Screenshot
