MVC 4 - Dropdownlistfor using IDs - Retrieving postback value - c#

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.

Related

MVC ViewModel not posting back

I have seen lots of examples on this, but cannot get any working. I have built this example to prove/disprove passing back of the view model SomeDataViewModel.
I am trying to post back the dropdownlist data. Everything works ok, but the OtherData property on TestViewModel never returns the collect that was passed in.
Have tried adding:
#Html.HiddenFor(m => Model.OtherData)
but again this just produces the following error;
The parameter conversion from type 'System.String' to type 'SomeDataViewModel' failed because no type converter can convert between these types
The Code:
ViewModels
TestViewmodel
public class TestViewModel
{
public TestViewModel()
{
OtherData = new List<SomeDataViewModel>();
}
public int Id { get; set; }
public String Name { get; set; }
public DateTime DoB { get; set; }
public int SelectedOtherData { get; set; }
public List<SomeDataViewModel> OtherData { get; set; }
public IEnumerable<SelectListItem> TolistData()
{
IEnumerable<SelectListItem> ret = OtherData.Select(i => new SelectListItem() { Text = i.Text, Value=i.Value });
return ret;
}
}
SomeDataViewmodel
public class SomeDataViewModel
{
public string Value { get; set; }
public string Text { get; set; }
}
View
#model TestViewModel
#{
ViewBag.Title = "Home Page";
}
#using (Html.BeginForm("Index","Home"))
{
<div class="row">
<div class="col-md-12">
<br />
#Html.EditorFor(m => Model.Id)
<br />
#Html.EditorFor(m => Model.Name)
<br />
#Html.EditorFor(m => Model.DoB)
<br/>
#Html.DropDownListFor(m => Model.SelectedOtherData, Model.TolistData(), new { id = "OtherData" })
<p><a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301865">Learn more ยป</a></p>
</div>
</div>
<button id="dosomething" formmethod="post">Post</button>
}
Controller
public ActionResult Index()
{
var model = new TestViewModel() {
Id = 99,
Name = "Billy",
DoB = DateTime.Now
};
model.OtherData.Add(
new SomeDataViewModel { Text = "Bob", Value = "1" });
model.OtherData.Add(
new SomeDataViewModel { Text = "Sally", Value = "2" });
return View(model);
}
[HttpPost]
public ActionResult Index(TestViewModel retModel)
{
if (ModelState.IsValid)
{
if (retModel.OtherData.Count() == 0)
{
var dud = true;
}
}
return View(retModel);
}
You can't render hidden inputs for complex data with #Html.HiddenFor helper.
You should use it only with simple types. Becouse you got array you should write something like this:
#for(int i = 0; i < Model.OtherData.Count(); i++)
{
#Html.HiddenFor(m => Model.OtherData[i].Text)
#Html.HiddenFor(m => Model.OtherData[i].Value)
//... other fields.
#Html.HiddenFor(m => Model.OtherData[i].OtherProperty)
}
Use for loop instead of foreach becouse you should same your mappings for right binding on form POST.
Certainly there is a type conversion error. your SelectedOtherData is type of int while selectlistitem value is type of string

null value post on controller from html helper dropdown in mvc5

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>
}

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>
}

MVC4 DropDownList from DB

I'm trying to make very simple forum, but I have problem with DropDownList. I have two models:
ForumThread.cs
public partial class ForumThread
{
public ForumThread()
{
this.ForumCategory = new HashSet<ForumCategory>();
}
public int TH_ID { get; set; }
public System.DateTime DATE { get; set; }
public string TOPIC { get; set; }
public string USER { get; set; }
public virtual ICollection<ForumCategory> ForumCategory { get; set; }
}
ForumCategory.cs
public partial class ForumCategory
{
public ForumCategory()
{
this.ForumThread = new HashSet<ForumThread>();
}
public int CA_ID { get; set; }
public string CATEGORY { get; set; }
public bool isSelected { get; set; }
public virtual ICollection<ForumThread> ForumThread { get; set; }
}
I tried to make "Create" function with view:
Create
#model AnimeWeb.Models.ForumThread
#{
ViewBag.Title = "Create";
}
<h2>New Thread</h2>
#using (Html.BeginForm()) {
#Html.AntiForgeryToken()
#Html.ValidationSummary(true)
<fieldset>
<div class="editor-field">
#Html.HiddenFor(model => model.TH_ID)
</div>
<div class="editor-label">
TOPIC
</div>
<div class="editor-field">
#Html.EditorFor(model => model.TOPIC)
#Html.ValidationMessageFor(model => model.TOPIC)
</div>
<div class="editor-label">
CATEGORY
</div>
<div class="editor-field">
#Html.EditorFor(model => model.ForumCategory)
</div>
<p>
<input type="submit" value="Create" />
</p>
</fieldset>
}
And PartialView for ForumCategory:
ForumCategory
#model AnimeWeb.Models.FORUMCATEGORY
#Html.HiddenFor(model => model.CA_ID)
#Html.HiddenFor(model => model.CATEGORY)
<div>
#Html.DropDownListFor(item => Model.CA_ID, ViewBag.CA_ID as SelectList, "-- Select --")
</div>
ForumController
public ActionResult Create()
{
var db = new MainDatabaseEntities();
var viewModel = new ForumThread
{
ForumCategory = db.ForumCategory.Select(c => new { CA_ID = c.CA_ID, CATEGORY = c.CATEGORY, isSelected = false }).ToList().Select(g => new ForumCategory
{
CA_ID = g.CA_ID,
CATEGORY = g.CATEGORY,
isSelected = false
}).ToList(),
};
return View(viewModel);
}
//
// POST: /Forum/Create
[HttpPost]
public ActionResult Create(ForumThread forumthread, String user, int id)
{
var db = new MainDatabaseEntities();
var newthread = new ForumThread
{
TH_ID = forumthread.TH_ID,
DATE = DateTime.Now,
TOPIC = forumthread.TOPIC,
USER = forumthread.USER,
ForumCategory = new List<ForumCategory>()
};
foreach (var selectedCategory in forumthread.FORUMCATEGORY.Where(c => c.isSelected))
{
var category = new ForumCategory { CA_ID = selectedCategory.CA_ID };
db.ForumCategory.Attach(category);
newthread.ForumCategory.Add(category);
}
db.ForumThread.Add(newthread);
db.SaveChanges();
return RedirectToAction("Index");
}
And it obviously doesn't work. I tried to use other threads on this forum but nothing helped. Could someone explain me how to make this work?
The error is in partial view of ForumCategory:
The ViewData item that has the key 'CA_ID' is of type 'System.Int32' but must be of type 'IEnumerable<SelectListItem>'.
In your PartialView for ForumCategory, your cast is not correct:
#Html.DropDownListFor(item => Model.CA_ID, ViewBag.CA_ID as SelectList, "-- Select --")
You have to use a SelectList (List of SelectListItem) that you can implement for example in a method in your model:
public List<SelectListItem> GetCategories()
{
var db = new MainDatabaseEntities();
List<SelectListItem> list = new List<SelectListItem>();
// Add empty item if needed
SelectListItem commonItem = new SelectListItem();
commonItem.Text = "--- Select ---";
commonItem.Value = "-1";
commonItem.Selected = true;
list.Add(commonItem);
// Add items from Database
foreach (ForumCategory fc in db.ForumCategory)
{
SelectListItem i = new SelectListItem();
i.Text = fc.CATEGORY;
i.Value = fc.CA_ID.ToString();
list.Add(i);
}
return list;
}
And then you can have you dropdown like that:
#Html.DropDownList("DropName", Model.GetCategories())
There may be other errors in some parts of your code, I just answered to the one you quoted
In your editortemplate, you have:
ViewBag.CA_ID as SelectList
But you don't show where you fill the ViewBag. Instead you might want to do something like this:
#Html.DropDownListFor(m => m.CA_ID,
new SelectList(Model.ForumCategory,
"CA_ID", "CATEGORY", Model.CA_ID))
As also explained in MVC3 DropDownListFor - a simple example?.

Categories