null value post on controller from html helper dropdown in mvc5 - c#

I use the mvc 5 for learning purpose.
When I send the data on controller from drop down list then object has null value in controller.
Model Code:
namespace Dropdownlist.Models
{
using System;
using System.Collections.Generic;
public partial class Country
{
public int ID { get; set; }
public string CountryName { get; set; }
}
}
Controller Code:
namespace Dropdownlist.Controllers
{
public class HOMEController : Controller
{
DropDownEntities db = new DropDownEntities();
public ActionResult Index()
{
return View();
}
[HttpPost]
public ActionResult Index(Country cn)
{
db.Countries.Add(cn);
db.SaveChanges();
return View(cn);
}
}
}
View Code:
#{
ViewBag.Title = "Index";
}
<h2>Index</h2>
#using (Html.BeginForm(FormMethod.Post))
{
<div>
#Html.DropDownList("ddlcountry", new List<SelectListItem>
{
new SelectListItem{ Text = "India", Value = "India"},
new SelectListItem{ Text = "UK", Value = "UK"},
new SelectListItem{ Text = "USA", Value = "USA"}
}, "Select a Country")
</div>
<div>
<input type="submit" value="Save" />
</div>
}
What am I doing wrong?

If you want both ID and CountryName value to be posted back, then you will need to have the control name match the property of your model, and your view should be strongly typed so that you can use Html.DropDownListFor() helper, right now you can do it like:
#model Dropdownlist.Models.Country
#{
ViewBag.Title = "Index";
}
<h2>Index</h2>
#using (Html.BeginForm(FormMethod.Post))
{
<div>
#Html.DropDownList("ID", new List<SelectListItem>
{
new SelectListItem{ Text = "India", Value = 1},
new SelectListItem{ Text = "UK", Value = 2},
new SelectListItem{ Text = "USA", Value = 2}
}, "Select a Country",new { id="ddlCountry"})
#Html.Hidden("CountryName")
</div>
<div>
<input type="submit" value="Save" />
</div>
}
and countryName you would need to set it in a hidden field and set it's value when dropdown index is changed like:
#section Scripts
{
<script type="text/javascript">
$(document).ready(function () {
$("#ddlCountry").on("change", function () {
$("#CountryName").val($(this).val());
});
});
</script>
}

If you want to set the CountryName property change your view to this:
....
#Html.DropDownListFor(x=>x.CountryName, new List<SelectListItem>
....

Load you drop down data from controller
ViewBag.DropDown = db.YourModel.ToList();
and then in your view
#Html.DropDownList("Name", (IEnumerable<SelectListItem>)ViewBag.DropDown, "Select ...")

you have several issues here. The dropdown has a name of "ddlcountry" but the action is expecting a Country object which does not have a property of ddlcountry. ddlcountry is a string india/uk/usa. The form should be returning an Id which the cross references another table. The form as it stands does not make any sense as there is only one piece of data.

There are several issues here but i think your after something like this:
an enum for your select list items:
public enum Countries
{
India = 1,
UK = 2,
USA = 3
}
then for the controller actions:
public ActionResult Index()
{
ViewBag.Country = Enum.GetValues(typeof(Countries)).Cast<Countries>().ToList().Select(r => new SelectListItem { Text = r.ToString(), Value = ((int)r).ToString() });
return View();
}
[HttpPost]
public ActionResult Index(Countries country)
{
var saveit = country;
// whatever you wish to do with the result;
return Content(saveit.ToString());
}
The View:
#using(Html.BeginForm("Index", "Home", FormMethod.Post))
{
#Html.DropDownList("Country")
<button type="submit" >Save</button>
}

Related

How to get DropdownList value from View to Controller

Like Title
I step by step with examples
I can pass SelectItemList to View from controller to do DropDownList
But I Can't get a value from View to Controller
Have someone can teach me how to do with MVC
this is my
Controller
var Course = getCourseList.getCourse();
if (Course.Any())
{
List<SelectListItem> items = new List<SelectListItem>();
foreach (var course in Course)
{
items.Add(new SelectListItem()
{
Text = course.RC_NAME,
Value = course.RC_MAJORCODE,
});
}
ViewBag.SelectList = items;
}
And this is my View
#using YTDT_OAuth.Models
#model List<CourseInfo>
#using (Html.BeginForm("CourseSave", "Home"))
{
#Html.AntiForgeryToken()
<div class="form-horizontal">
<table class="table">
<tr>
<th scope="row">first</th>
<td>#Html.DropDownList("SelectList", null, "default", new {#id = "a" })</td>
#foreach (var item in Model)
{
<p>#item.RC_MAJORCODE</p>
}
</tr>
</table>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Save" class="btn btn-default" />
</div>
</div>
</div>
}
and I want to do something in this controller
[HttpPost]
[AllowAnonymous]
[ValidateAntiForgeryToken]
public ActionResult CourseSave(CourseInfo CourseDataz)
{
// the value is received in the controller.
return View();
}
I personally like to use strongly-typed Model instead of ViewBag. ViewData and ViewBag are dynamic, and they throw run-time error rather than compile-time error.
Sample Code
Model
public class CourseInfo
{
public string SelectedMajorCode { get; set; }
public IList<SelectListItem> AvailableMajorNames { get; set; }
public CourseInfo()
{
AvailableMajorNames = new List<SelectListItem>();
}
}
View
#model DemoMvc.Models.CourseInfo
#using (Html.BeginForm("Index", "Home"))
{
#Html.DropDownListFor(m => m.SelectedMajorCode, Model.AvailableMajorNames)
<input type="submit" value="Submit"/>
}
Controller
public class HomeController : Controller
{
public ActionResult Index()
{
var model = new CourseInfo
{
AvailableMajorNames = GetColorListItems()
};
return View(model);
}
[HttpPost]
public ActionResult Index(CourseInfo model)
{
if (ModelState.IsValid)
{
var majorCode = model.SelectedMajorCode;
return View("Success");
}
// If we got this far, something failed, redisplay form
// ** IMPORTANT : Fill AvailableMajorNames again;
// otherwise, DropDownList will be blank. **
model.AvailableMajorNames = GetMajorListItems();
return View(model);
}
private IList<SelectListItem> GetMajorListItems()
{
// This could be from database.
return new List<SelectListItem>
{
new SelectListItem {Text = "One", Value = "1"},
new SelectListItem {Text = "Two", Value = "2"}
};
}
}

How to get selected value from DropDownList [duplicate]

I have dropdownlist, which I have filled from database. Now I need to get the selected value in Controller do some manipulation. But not getting the idea. Code which I have tried.
Model
public class MobileViewModel
{
public List<tbInsertMobile> MobileList;
public SelectList Vendor { get; set; }
}
Controller
public ActionResult ShowAllMobileDetails()
{
MobileViewModel MV = new MobileViewModel();
MV.MobileList = db.Usp_InsertUpdateDelete(null, "", "", null, "", 4, MergeOption.AppendOnly).ToList();
MV.Vendor = new SelectList(db.Usp_VendorList(), "VendorId", "VendorName");
return View(MV);
}
[HttpPost]
public ActionResult ShowAllMobileDetails(MobileViewModel MV)
{
string strDDLValue = ""; // Here i need the dropdownlist value
return View(MV);
}
View
<table>
<tr>
<td>Mobile Manufacured</td>
<td>#Html.DropDownList("ddlVendor", Model.Vendor, "Select Manufacurer") </td>
</tr>
<tr>
<td>
</td>
<td>
<input id="Submit1" type="submit" value="search" />
</td>
</tr>
</table>
1st Approach (via Request or FormCollection):
You can read it from Request using Request.Form , your dropdown name is ddlVendor so pass ddlVendor key in the formCollection to get its value that is posted by form:
string strDDLValue = Request.Form["ddlVendor"].ToString();
or Use FormCollection:
[HttpPost]
public ActionResult ShowAllMobileDetails(MobileViewModel MV,FormCollection form)
{
string strDDLValue = form["ddlVendor"].ToString();
return View(MV);
}
2nd Approach (Via Model):
If you want with Model binding then add a property in Model:
public class MobileViewModel
{
public List<tbInsertMobile> MobileList;
public SelectList Vendor { get; set; }
public string SelectedVendor {get;set;}
}
and in View:
#Html.DropDownListFor(m=>m.SelectedVendor , Model.Vendor, "Select Manufacurer")
and in Action:
[HttpPost]
public ActionResult ShowAllMobileDetails(MobileViewModel MV)
{
string SelectedValue = MV.SelectedVendor;
return View(MV);
}
UPDATE:
If you want to post the text of selected item as well, you have to add a hidden field and on drop down selection change set selected item text in the hidden field:
public class MobileViewModel
{
public List<tbInsertMobile> MobileList;
public SelectList Vendor { get; set; }
public string SelectVendor {get;set;}
public string SelectedvendorText { get; set; }
}
use jquery to set hidden field:
<script type="text/javascript">
$(function(){
$("#SelectedVendor").on("change", function {
$("#SelectedvendorText").val($(this).text());
});
});
</script>
#Html.DropDownListFor(m=>m.SelectedVendor , Model.Vendor, "Select Manufacurer")
#Html.HiddenFor(m=>m.SelectedvendorText)
Model
Very basic model with Gender field. GetGenderSelectItems() returns select items needed to populate DropDownList.
public enum Gender
{
Male, Female
}
public class MyModel
{
public Gender Gender { get; set; }
public static IEnumerable<SelectListItem> GetGenderSelectItems()
{
yield return new SelectListItem { Text = "Male", Value = "Male" };
yield return new SelectListItem { Text = "Female", Value = "Female" };
}
}
View
Please make sure you wrapped your #Html.DropDownListFor in a form tag.
#model MyModel
#using (Html.BeginForm("MyController", "MyAction", FormMethod.Post)
{
#Html.DropDownListFor(m => m.Gender, MyModel.GetGenderSelectItems())
<input type="submit" value="Send" />
}
Controller
Your .cshtml Razor view name should be the same as controller action name and folder name should match controller name e.g Views\MyController\MyAction.cshtml.
public class MyController : Controller
{
public ActionResult MyAction()
{
// shows your form when you load the page
return View();
}
[HttpPost]
public ActionResult MyAction(MyModel model)
{
// the value is received in the controller.
var selectedGender = model.Gender;
return View(model);
}
}
Going further
Now let's make it strongly-typed and enum independent:
var genderSelectItems = Enum.GetValues(typeof(Gender))
.Cast<string>()
.Select(genderString => new SelectListItem
{
Text = genderString,
Value = genderString,
}).AsEnumerable();
MVC 5/6/Razor Pages
I think the best way is with strongly typed model, because Viewbags are being aboused too much already :)
MVC 5 example
Your Get Action
public async Task<ActionResult> Register()
{
var model = new RegistrationViewModel
{
Roles = GetRoles()
};
return View(model);
}
Your View Model
public class RegistrationViewModel
{
public string Name { get; set; }
public int? RoleId { get; set; }
public List<SelectListItem> Roles { get; set; }
}
Your View
<div class="form-group">
#Html.LabelFor(model => model.RoleId, htmlAttributes: new { #class = "col-form-label" })
<div class="col-form-txt">
#Html.DropDownListFor(model => model.RoleId, Model.Roles, "--Select Role--", new { #class = "form-control" })
#Html.ValidationMessageFor(model => model.RoleId, "", new { #class = "text-danger" })
</div>
</div>
Your Post Action
[HttpPost, ValidateAntiForgeryToken]
public async Task<ActionResult> Register(RegistrationViewModel model)
{
if (ModelState.IsValid)
{
var _roleId = model.RoleId,
MVC 6 It'll be a little different
Get Action
public async Task<ActionResult> Register()
{
var _roles = new List<SelectListItem>();
_roles.Add(new SelectListItem
{
Text = "Select",
Value = ""
});
foreach (var role in GetRoles())
{
_roles.Add(new SelectListItem
{
Text = z.Name,
Value = z.Id
});
}
var model = new RegistrationViewModel
{
Roles = _roles
};
return View(model);
}
Your View Model will be same as MVC 5
Your View will be like
<select asp-for="RoleId" asp-items="Model.Roles"></select>
Post will also be same
Razor Pages
Your Page Model
[BindProperty]
public int User User { get; set; } = 1;
public List<SelectListItem> Roles { get; set; }
public void OnGet()
{
Roles = new List<SelectListItem> {
new SelectListItem { Value = "1", Text = "X" },
new SelectListItem { Value = "2", Text = "Y" },
new SelectListItem { Value = "3", Text = "Z" },
};
}
<select asp-for="User" asp-items="Model.Roles">
<option value="">Select Role</option>
</select>
I hope it may help someone :)
If you want to use #Html.DropDownList , follow.
Controller:
var categoryList = context.Categories.Select(c => c.CategoryName).ToList();
ViewBag.CategoryList = categoryList;
View:
#Html.DropDownList("Category", new SelectList(ViewBag.CategoryList), "Choose Category", new { #class = "form-control" })
$("#Category").on("change", function () {
var q = $("#Category").val();
console.log("val = " + q);
});
If you're looking for something lightweight, I'd append a parameter to your action.
[HttpPost]
public ActionResult ShowAllMobileDetails(MobileViewModel MV, string ddlVendor)
{
string strDDLValue = ddlVendor; // Of course, this becomes silly.
return View(MV);
}
What's happening in your code now, is you're passing the first string argument of "ddlVendor" to Html.DropDownList, and that's telling the MVC framework to create a <select> element with a name of "ddlVendor." When the user submits the form client-side, then, it will contain a value to that key.
When MVC tries to parse that request into MV, it's going to look for MobileList and Vendor and not find either, so it's not going to be populated. By adding this parameter, or using FormCollection as another answer has suggested, you're asking MVC to specifically look for a form element with that name, so it should then populate the parameter value with the posted value.
Use SelectList to bind #HtmlDropdownListFor and specify selectedValue parameter in it.
http://msdn.microsoft.com/en-us/library/dd492553(v=vs.108).aspx
Example : you can do like this for getting venderid
#Html.DropDownListFor(m => m.VendorId,Model.Vendor)
public class MobileViewModel
{
public List<tbInsertMobile> MobileList;
public SelectList Vendor { get; set; }
public int VenderID{get;set;}
}
[HttpPost]
public ActionResult Action(MobileViewModel model)
{
var Id = model.VenderID;
I was having the same issue in asp.NET razor C#
I had a ComboBox filled with titles from an EventMessage, and I wanted to show the Content of this message with its selected value to show it in a label or TextField or any other Control...
My ComboBox was filled like this:
#Html.DropDownList("EventBerichten", new SelectList(ViewBag.EventBerichten, "EventBerichtenID", "Titel"), new { #class = "form-control", onchange = "$(this.form).submit();" })
In my EventController I had a function to go to the page, in which I wanted to show my ComboBox (which is of a different model type, so I had to use a partial view)?
The function to get from index to page in which to load the partial view:
public ActionResult EventDetail(int id)
{
Event eventOrg = db.Event.Include(s => s.Files).SingleOrDefault(s => s.EventID == id);
// EventOrg eventOrg = db.EventOrgs.Find(id);
if (eventOrg == null)
{
return HttpNotFound();
}
ViewBag.EventBerichten = GetEventBerichtenLijst(id);
ViewBag.eventOrg = eventOrg;
return View(eventOrg);
}
The function for the partial view is here:
public PartialViewResult InhoudByIdPartial(int id)
{
return PartialView(
db.EventBericht.Where(r => r.EventID == id).ToList());
}
The function to fill EventBerichten:
public List<EventBerichten> GetEventBerichtenLijst(int id)
{
var eventLijst = db.EventBericht.ToList();
var berLijst = new List<EventBerichten>();
foreach (var ber in eventLijst)
{
if (ber.EventID == id )
{
berLijst.Add(ber);
}
}
return berLijst;
}
The partialView Model looks like this:
#model IEnumerable<STUVF_back_end.Models.EventBerichten>
<table>
<tr>
<th>
EventID
</th>
<th>
Titel
</th>
<th>
Inhoud
</th>
<th>
BerichtDatum
</th>
<th>
BerichtTijd
</th>
</tr>
#foreach (var item in Model)
{
<tr>
<td>
#Html.DisplayFor(modelItem => item.EventID)
</td>
<td>
#Html.DisplayFor(modelItem => item.Titel)
</td>
<td>
#Html.DisplayFor(modelItem => item.Inhoud)
</td>
<td>
#Html.DisplayFor(modelItem => item.BerichtDatum)
</td>
<td>
#Html.DisplayFor(modelItem => item.BerichtTijd)
</td>
</tr>
}
</table>
VIEUW: This is the script used to get my output in the view
<script type="text/javascript">
$(document).ready(function () {
$("#EventBerichten").change(function () {
$("#log").ajaxError(function (event, jqxhr, settings, exception) {
alert(exception);
});
var BerichtSelected = $("select option:selected").first().text();
$.get('#Url.Action("InhoudByIdPartial")',
{ EventBerichtID: BerichtSelected }, function (data) {
$("#target").html(data);
});
});
});
</script>
#{
Html.RenderAction("InhoudByIdPartial", Model.EventID);
}
<fieldset>
<legend>Berichten over dit Evenement</legend>
<div>
#Html.DropDownList("EventBerichten", new SelectList(ViewBag.EventBerichten, "EventBerichtenID", "Titel"), new { #class = "form-control", onchange = "$(this.form).submit();" })
</div>
<br />
<div id="target">
</div>
<div id="log">
</div>
</fieldset>
Thanks - this helped me to understand better ansd solve a problem I had.
The JQuery provided to get the text of selectedItem did NOT wwork for me
I changed it to
$(function () {
$("#SelectedVender").on("change", function () {
$("#SelectedvendorText").val($(**"#SelectedVender option:selected"**).text());
});
});
Simple solution not sure if this has been suggested or not. This also may not work for some things. That being said this is the simple solution below.
new SelectListItem { Value = "1", Text = "Waiting Invoices", Selected = true}
List<SelectListItem> InvoiceStatusDD = new List<SelectListItem>();
InvoiceStatusDD.Add(new SelectListItem { Value = "0", Text = "All Invoices" });
InvoiceStatusDD.Add(new SelectListItem { Value = "1", Text = "Waiting Invoices", Selected = true});
InvoiceStatusDD.Add(new SelectListItem { Value = "7", Text = "Client Approved Invoices" });
#Html.DropDownList("InvoiceStatus", InvoiceStatusDD)
You can also do something like this for a database driven select list. you will need to set selected in your controller
#Html.DropDownList("ApprovalProfile", (IEnumerable<SelectListItem>)ViewData["ApprovalProfiles"], "All Employees")
Something like this but better solutions exist this is just one method.
foreach (CountryModel item in CountryModel.GetCountryList())
{
if (item.CountryPhoneCode.Trim() != "974")
{
countries.Add(new SelectListItem { Text = item.CountryName + " +(" + item.CountryPhoneCode + ")", Value = item.CountryPhoneCode });
}
else {
countries.Add(new SelectListItem { Text = item.CountryName + " +(" + item.CountryPhoneCode + ")", Value = item.CountryPhoneCode,Selected=true });
}
}

How to insert dynamically generated dropdownlist value into DB by using MVC

Need help in MVC : Please help in Creating dropdownlist(child) based on the count from a dropdownlist selected value(integer)- consider it as a parent control. And insert the child dropdownlist selected values to the database using MVC Eg; If 3 is selected in parent dropdownlist,3 new dropdownlist needs to be created and selected values of 3 dropdownlist needs to be inserted into DB--By using MVC dropdownlist . While I tried,only first child dropdownlist selected value is getting inserted or three times..Please help in resolving it
First Creating parent dropdownlist. Starting with Home Controller, i create a list
public ActionResult Index()
{
List<int> key =new List<int>();
key.Add(1); key.Add(2); key.Add(3); key.Add(4); key.Add(5);
ViewBag.RequiredKey = new SelectList(key);
return View();
}
In the Index View i show the parent dropdownlist
#using (Html.BeginForm("SelectedDropDownResult", "Home",FormMethod.Post))
{
#Html.DropDownList("SelectedDropDownValue", (SelectList)ViewBag.RequiredKey, new { #class = "form-control" })
<input type="submit" value="Submit">
}
Here in this dropdownlist user selects a value which is posted to the action named SelectedDropDownResult in the Home controller
public ActionResult SelectedDropDownResult(FormCollection fc)
{
int dropDown = int.Parse(fc["SelectedDropDownValue"]);
ViewBag.dropDownValue = dropDown;
List<int> key = new List<int>();
key.Add(1); key.Add(2); key.Add(3); key.Add(4); key.Add(5);
ViewBag.RequiredKey = new SelectList(key);
return View();
}
Using FormCollection lets extract the user selected value in parent drop down
#{
ViewBag.Title = "SelectedDropDownResult";
}
<h3> Generating #ViewBag.dropDownValue based on parent drop down selected value</h3>
#using (Html.BeginForm("ChildDropDown", "Home", FormMethod.Post))
{
<input type="hidden" name="childDropDownValue" value=#ViewBag.dropDownValue>
for (int i=0; i< #ViewBag.dropDownValue;i++ )
{
#Html.DropDownList("SelectedDropDownValue"+i, (SelectList)ViewBag.RequiredKey, new { #class = "form-control" })
}
<input type="submit" value="Submit">
}
Here child drop down lists are created based on the count of parent list and action ChildDropDown is called to save data to database
public ActionResult ChildDropDown(FormCollection fc)
{
List<int> child=new List<int>();
int dropDown = int.Parse(fc["childDropDownValue"]);
for(int i=0;i<dropDown;i++)
{
child.Add(int.Parse(fc["SelectedDropDownValue"+i]));
}
// code to add data child list to the database
return View();
}
}
You can now add code to save data to the database in ChildDropDown action of Home controller
A sample how you can hold your child Dropdowns value.
ViewModels-
public class TestModelViewModel
{
public int ParentId { get; set; }
public IEnumerable<ParentListViewModel> ParentList { get; set; }
public int ChildId { get; set; }
public IEnumerable<ParentListViewModel> ChildList { get; set; }
public IEnumerable<int> ChildIds { get; set; }
}
public class ParentListViewModel
{
public int Id { get; set; }
public string Value { get; set; }
}
public class ChildListViewModel
{
public int ChildId { get; set; }
public string ChildValue { get; set; }
}
Controller-
public ActionResult Index()
{
var model = new TestModelViewModel
{
ParentList = new List<ParentListViewModel>
{
new ParentListViewModel{
Id = 1,
Value = "One"
},new ParentListViewModel{
Id = 2,
Value = "Two"
},new ParentListViewModel{
Id = 3,
Value = "Three"
},
}
};
return View(model);
}
[HttpPost]
public ActionResult Index(TestModelViewModel model)
{
var ChildIds = model.ChildIds;
/* now you can save these ChildIds to your db */
return View(model);
}
View-
#model WebApplication1.Models.TestModel
#{
ViewBag.Title = "Home Page";
}
#using (Html.BeginForm("Index", "Home", FormMethod.Post, new { area=""}))
{
<div class="row">
<div class="col-md-12">
<h2>Parent List</h2>
<p>
<select id="ParentList" name="ParentId">
<option value="">--- select parent list ---</option>
#foreach (var item in Model.ParentList)
{
<option value="#item.Id">#item.Value</option>
}
</select>
</p>
</div>
<div class="col-md-12">
<h2>Child List</h2>
<p id="childListCotnainer">
</p>
</div>
<div class="col-lg-12"><input class="btn btn-default" type="submit" value="submit" /> </div>
</div>
}
#section scripts{
<script>
$(function () {
$("#ParentList").change(function () {
var length = parseInt($(this).val());
var dropHtml = '';
for (i = 0; i < length; i++) {
dropHtml += '<select name="ChildIds"><option value="1">Child One</option><option value="2">Child Two</option><option value="3">Child Three</option></select><br /><br />';
}
$("#childListCotnainer").html(dropHtml);
});
});
</script>
}

MVC 4 - Dropdownlistfor using IDs - Retrieving postback value

I am new to MVC 4 so this is probably a newbie mistake. I am having trouble binding my dropdown list to my model. I am trying to display a selection that the user is making from a dropdownlist using DropDownListFor. See the following code:
CostsPerSqFoot Model:
public class CostsPerSqFoot
{
public List<Prices> RatesList { get; set; }
public CostsPerSqFoot()
{
RatesList = new List<Prices>()
{
new Prices() {Id = 1, Rate = 1.00m},
new Prices() {Id = 2, Rate = 2.00m},
new Prices() {Id = 3, Rate = 5.00m},
new Prices() {Id = 4, Rate = 10.00m}
};
}
}
Prices Model:
public class Prices
{
public int? Id { get; set; }
public decimal? Rate { get; set; }
}
CostDetails Model (where I create a list of SelectListItem):
public class CostDetails
{
public int? Id { get; set; }
public Measurements Measurements { get; set; }
public List<SelectListItem> Costs { get; set; }
public CostDetails()
{
}
public CostDetails(List<Prices> rates)
{
Costs = new List<SelectListItem>();
foreach (var rate in rates)
{
Costs.Add(new SelectListItem()
{
Text =string.Format("{0:c}", rate.Rate), Value = rate.Id.ToString()
});
}
}
}
Here are my controller ActionResult methods:
public ActionResult Index()
{
var rates = new CostsPerSqFoot();
var model = new CostDetails(rates.RatesList);
return View(model);
}
[HttpPost]
public ActionResult Calculations(CostDetails model)
{
if (ModelState.IsValid)
return View(model);
else
return View("Index", model);
}
On my Index view, I have the following form that contains the dropdownlist and the view is using the CostDetails model:
#model FlooringCalculatorMVC.Models.CostDetails
// a few lines of HTML
#using (Html.BeginForm("Calculations", "Home", FormMethod.Post))
{
#Html.ValidationSummary()
#Html.LabelFor(m => m.Measurements.Length)
#Html.TextBoxFor(m =>m.Measurements.Length, new {placeholder = "Enter length"})
<br/>
<br/>
#Html.LabelFor(m => m.Measurements.Width)
#Html.TextBoxFor(m =>m.Measurements.Width, new {placeholder = "Enter width"})
<br/>
<br/>
#Html.LabelFor(m => m.Costs)
#Html.DropDownListFor(m =>m.Id, Model.Costs, "- Select a rate -")
<button type="submit">Calculate</button>
}
Finally, I would just like to display the selected dropdown option that the user made when clicking "submit". On the "Calculations" view, I only have the following:
#model FlooringCalculatorMVC.Models.CostDetails
#{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Calculations</title>
</head>
<body>
<div>
#Model.Costs
</div>
</body>
</html>
What could I be doing wrong? Thanks in advance.
If Id is the record id I would create a selected field in your model. then you could do something like
#Html.DropDownListFor(x => x.Selected, Model.Costs).
The selected field will be populated with the value of the selected record. If you are wanting the selected text then you can query Model.Costs or use jquery.

How to get the value of a html dropdown list in MVC 4

I'm new to MVC and I'm creating a Registration form for my app and I want to add a dropdownlist and I coded ahtml dropdownlist like given below
<select id="drpType">
<option value="0">Single</option>
<option value="1">Married</option>
</select>
And I want to get the selected value how can I achieve that and how to create a default #Html.DropDownList in MVC for the above scenario
You should give your dropdown a name (the id is not necessary):
<select id="drpType" name="drpType">
<option value="0">Single</option>
<option value="1">Married</option>
</select>
and then in the corresponding controller action to which the form is submitted you could have a parameter with the same name which will contain the selected value:
[HttpPost]
public ActionResult SomeAction(string drpType)
{
// ... drpType will contain the selected value (0 or 1)
}
But the correct way to achieve this is to use a view model:
public class MyViewModel
{
[Display(Name = "Marital status")]
public string SelectedMaritalStatus { get; set; }
public IEnumerable<SelectListItem> MaritalStatuses
{
get
{
return new[]
{
new SelectListItem { Value = "0", Text = "Single" },
new SelectListItem { Value = "1", Text = "Married" },
};
}
}
}
and then you could have a controller with 2 actions (one for rendering the form and one for processing the results):
public class HomeController: Controller
{
public ActionResult Index()
{
var model = new MyViewModel();
return View(model);
}
[HttpPost]
public ActionResult Index(MyViewModel model)
{
// ... model.SelectedMaritalStatus will contain the selected value (0 or 1)
}
}
and now you could have a strongly typed view in which you can use the DropDownListFor helper:
#model MyViewModel
#using (Html.BeginForm())
{
<div>
#Html.LabelFor(x => x.SelectedMaritalStatus)
#Html.DropDownListFor(x => x.SelectedMaritalStatus, Model.MaritalStatuses)
</div>
<button type="submit">OK</button>
}

Categories