Problem:
Hello I'm having troubles all of a sudden with my DropDownListFor which was working just fine. I was styling my web app a bit but didn't change anything on dropdownlistfor
<!-- Genre -->
<div class="form-group">
#Html.LabelFor(m => m.Genre)
#Html.DropDownListFor(m => m.Genre, new SelectList(Model.Genres.OrderBy(n=>n.Name), "Id", "Name"), "Select Genre", new { #class = "form-control" })
#Html.ValidationMessageFor(m => m.Genre)
</div>
And in Controller
[Authorize]
public ActionResult Create()
{
var viewModel = new GigFormViewModel
{
Genres = _context.Genres.ToList()
};
return View(viewModel);
}
Okay so, here's the visual of my problem:
Blank display box
Yet the item is selected and will save properly to database
So it's just visual thing that bothers me..saving and everything else is working just fine.
I even inspected element and color of the items are black tried to change background of display box in case font is white so I can see it but nope, the selection just does not display at all.
Edit: Viewmodel ->
public class GigFormViewModel
{
[Required]
public string Name { get; set; }
[Required]
public string Venue { get; set; }
[Required]
[FutureDate]
public string Date { get; set; }
[Required]
[ValidTime]
public string Time { get; set; }
[Required]
public int Genre { get; set; }
public IEnumerable<Genre> Genres { get; set; }
public DateTime GetDateTime()
{
return DateTime.Parse(string.Format("{0} {1}", Date, Time));
}
And Genre class
public class Genre
{
public byte Id { get; set; }
[Required]
[StringLength(255)]
public string Name { get; set; }
}
Try with this change
#Html.DropDownListFor(m => m.Genre, new SelectList(Model.Genres.OrderBy(n=>n.Name), "Id", "Name",0), "Select Genre", new { #class = "form-control" })
may be it will work for you..;)
Related
I have a DropDownListFor that doesn't seem to be setting the expected Model property. Here's the HTML:
#using (Html.BeginForm())
{
#Html.DropDownListFor(x => x.SelectedItem,
new SelectList(Model.ItemList, "Id", "Desc"), null,
new { #class = "selected-list", #size = "3" });
<div>
#Model.SelectedItem
</div>
<input type="submit" value="Do Stuff"
asp-controller="My"
asp-action="DoStuff"
asp-route-itemId="#Model.SelectedItem" />
</div>
}
The div is just there for debugging purposes, and it either shows 0 or blank.
The underlying model has a property:
public int SelectedItem { get; set; }
I've also tried a string:
public string SelectedItem { get; set; } = String.Empty;
(Hence why 0 or blank)
The actual list itself displays fine, it just doesn't update the model on select. How can I get it to update the model?
If you use asp-route-itemId, your action need contains parameter named itemId to receive the value. But for your scenario, it seems to be useless to receive such value, because it will always receive the value you set instead of the dropdown changed value.
Here is a simple demo you could follow and check if any difference with yours:
Model
public class TestVM
{
public string SelectedItem { get; set; } = String.Empty;
public List<Item> ItemList { get; set; }
}
public class Item
{
public int Id { get; set; }
public string Desc { get; set; }
}
View(Index.cshtml)
#model TestVM
#using (Html.BeginForm())
{
#Html.DropDownListFor(x => x.SelectedItem,
new SelectList(Model.ItemList, "Id", "Desc"), null,
new { #class = "selected-list", #size = "3" });
<div>
#Model.SelectedItem
</div>
<input type="submit" value="Do Stuff"
asp-controller="Home"
asp-action="DoStuff" />
}
Controller
[HttpGet]
public IActionResult Index()
{
//Note: hard-coded the model just for easy testing.....
var model = new TestVM()
{
SelectedItem = "1",
ItemList = new List<Item>()
{
new Item(){Id=1,Desc="aa"},
new Item(){Id=2,Desc="bb"},
new Item(){Id=3,Desc="cc"}
}
};
return View(model);
}
[HttpPost]
public IActionResult DoStuff(TestVM model)
{
return View("index", model);
}
Result
I am trying to save some changes to a database.
The view gets a Model, and should be able to make changes and have them saved. However, when i submit the form, the ContactInfo parameter in the post method is not null, but all the properties are.
I'm using MVC5 with Razor. the script is in a seperate .ts-file
In controller:
[HttpPost]
public bool SaveInfoChanges(ContactInfo editedContactInfo)
{
// Save data
return true;
}
Script:
export function saveInfoChanges() {
$("#EditContactInfoForm").submit();
};
HTML:
#if (true)
{
#using (Html.BeginForm("SaveInfoChanges", "ContactInfoBox", FormMethod.Post, new { id = "EditContactInfoForm" }))
}
<table>
#Html.HiddenFor(model => model.Name)
#Html.HiddenFor(model => model.Address1)
#Html.HiddenFor(model => model.Address2)
#Html.HiddenFor(model => model.ZipAndCity)
#Html.HiddenFor(model => model.Country)
<tr>
<td>test</td>
<td>
#Html.TextBoxFor(model => model.Address3, new { id = "ContactTypeInput", placeholder = "", style = "width:300px" })
</td>
</tr>
</table>
}
}
Model:
public class ContactInfo
{
public string ContactInfoBoxHeaderText { get; set; }
public string Name { get; set; }
public string Address1 { get; set; }
public string Address2 { get; set; }
public string Address3 { get; set; }
public string ZipAndCity { get; set; }
public string Country { get; set; }
}
I can't think of more relevant information to give, but please don't hesitate to ask.
Thanks in advance!
Removing the #if solved the problem. I just need to find another way to hide/show the elements.
Ok, looks like someone should run into this, but I have not found anything that helps. This is my scenario.
I have a clients and skills model. The objective is to allow clients to rate each of a set of skills, all of them.
So, here I'll paste model, viewModel, Controller and View. at the end the crucial question
MODEL
namespace ClientSkills.Models
{
public class Client
{
public int ClientId { get; set; }
public string Name { get; set; }
public ICollection<ClientSkills> Skills { get; set; }
}
public class Skill
{
public int SkillId { get; set; }
public string Name { get; set; }
public ICollection<ClientSkills> Clients { get; set; }
}
public class Rating
{
public int RatingId { get; set; }
public string Name { get; set; }
public ICollection<ClientSkills> ClientSkills { get; set; }
}
public class ClientSkills
{
[Key, Column(Order=0)]
public int ClientId { get; set; }
[Key, Column(Order = 1)]
public int SkillId { get; set; }
public int RatingId { get; set; }
public Rating Rating { get; set; }
public Skill Skill { get; set; }
public Client Client { get; set; }
}
public partial class ApplicationDbContext : IdentityDbContext<ApplicationUser>
{
public DbSet<Client> Client { get; set; }
public DbSet<Skill> Skill { get; set; }
public DbSet<Rating> Rating { get; set; }
public DbSet<ClientSkills> ClientSkills { get; set; }
}
}
VIEW MODEL
namespace ClientSkills.Models
{
public class RateViewModel
{
public RateViewModel()
{
this.Skills = new List<SkillViewModel>();
}
public RateViewModel(Client client)
{
this.ClientId = client.ClientId;
this.Skills = new List<SkillViewModel>();
if (client.Skills.Count == 0)
{
var context = new ApplicationDbContext();
foreach (var skill in context.Skill)
{
var skillVM = new SkillViewModel(skill);
skillVM.SelectedRatingid = context.Rating.First(r => r.Name == "No aplica").RatingId;
Skills.Add(skillVM);
}
}
else
{
foreach (var item in client.Skills)
{
var skillVM = new SkillViewModel(item);
skillVM.SelectedRatingid = item.SkillId;
this.Skills.Add(skillVM);
}
}
}
public int ClientId { get; set; }
public List<SkillViewModel> Skills { get; set; }
}
public class SkillViewModel
{
public SkillViewModel()
{
Ratings = new List<Rating>();
}
public SkillViewModel(Skill skill)
{
var context = new ApplicationDbContext();
this.Ratings = context.Rating.ToList();
this.SkillId = skill.SkillId;
this.SkillName = skill.Name;
}
public SkillViewModel(ClientSkills item)
{
var context = new ApplicationDbContext();
this.Ratings = context.Rating.ToList();
this.SkillId = item.SkillId;
this.SkillName = item.Skill.Name;
this.SelectedRatingid = item.RatingId;
}
public List<Rating> Ratings { get; set; }
public int SelectedRatingid { get; set; }
public int SkillId { get; set; }
public string SkillName { get; set; }
}
}
CONTROLLER
namespace ClientSkills.Controllers
{
public class RateController : Controller
{
//
// GET: /Rate/Create
public ActionResult Create()
{
//first, we assume there is an already selected user
var context = new ApplicationDbContext();
var client = context
.Client
.Include(c => c.Skills)
.First(c => c.Name.ToLower() == "ricker");
var model = new RateViewModel(client);
return View(model);
}
}
}
VIEW
This View is made creating a Create view with the wizard, deleting the useless field it creates and putting the code below
<table>
<tr>
<td>Skill</td>
<td>Rate</td>
</tr>
#foreach (var item in Model.Skills)
{
<tr>
<td>
#Html.DisplayFor(model => model.Skills.First(i => i.SkillName == item.SkillName).SkillName, new { #class = "control-label col-md-2" })
</td>
<td>
#Html.DropDownListFor(x => item.SelectedRatingid, new SelectList(item.Ratings, "RatingId", "Name"), "Seleccione el valor")
</td>
</tr>
}
</table>
The problem is that in the RateViewModel(Client client) constructor in the line skillVM.SelectedRatingid = context.Rating.First(r => r.Name == "No aplica").RatingId; I set a default value for the selectedRatingId property. I need to make sure all clients has all skills rated even if they forgot or bypass one of them.
When the view is loaded, and I was sure the ratesid was well set, the skill names look ok but the drop dpwn lists does not show the selected default value.
How can I make the view to bind the selectedRatingId property to the drop down list control?
Passing selected value to SelectList:
#Html.DropDownListFor(x => item.SelectedRatingid, new SelectList(item.Ratings, "RatingId", "Name", item.SelectedRatingid), "Seleccione el valor")
As I understand it (rightly or wrongly) that last parameter is an object if it matches with one of the options values - it is selected else the first one in the options is selected.
More info about the Selectlist overload.
I have 3 entity classes; Team, TeamContact and TeamAddress.
Relationships
-Team one-to-one TeamContact
-TeamContact one-to-on TeamAddress
Create Method
[HttpPost]
public ActionResult Create(Team model)
{
if (ModelState.IsValid)
{
new Team
{
Name = model.Name,
Division = model.Division,
Description = model.Description,
TeamContact = new TeamContact
{
EmailAddress = model.TeamContact.EmailAddress,
PhoneNumber = model.TeamContact.PhoneNumber,
TeamAddress = new TeamAddress
{
Box = model.TeamContact.TeamAddress.Box,
StreetName = model.TeamContact.TeamAddress.StreetName,
StreetNumber = model.TeamContact.TeamAddress.StreetNumber,
City = model.TeamContact.TeamAddress.City,
PostalCode = model.TeamContact.TeamAddress.PostalCode,
Province = model.TeamContact.TeamAddress.Province
}
}
};
_dataSource.Save();
}
return View(model);
}
My problem is that when i try scaffolding a create view, only labels and fields of entity Team are scaffolding. The view is being strongly typed agains team entity, my guess is that this is where the source of my problem is. See below.
Create View
#model Soccer.Domain.Entities.Club.Team
#{
ViewBag.Title = "Create";
}
<h2>Create</h2>
#using (Html.BeginForm()) {
#Html.ValidationSummary(true)
<fieldset>
<legend>Team</legend>
<div class="editor-label">
#Html.LabelFor(model => model.Name)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.Name)
#Html.ValidationMessageFor(model => model.Name)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.Division)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.Division)
#Html.ValidationMessageFor(model => model.Division)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.Description)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.Description)
#Html.ValidationMessageFor(model => model.Description)
</div>
<p>
<input type="submit" value="Create" />
</p>
</fieldset>
}
Team
namespace Soccer.Domain.Entities.Club
{
public class Team
{
//Holds players into a specific teams
[HiddenInput(DisplayValue = false)]
public virtual int Id { get; set; }
[Display(Name = "Full Name:")]
public virtual string Name { get; set; }
//Current playing division
[Display(Name = "Division:")]
public virtual string Division { get; set; }
[Display(Name = "About the team:")]
[DataType(DataType.MultilineText)]
public virtual string Description { get; set; }
public virtual TeamContact TeamContact { get; set; }
public virtual ICollection<Player> Players { get; set; }
}
}
TeamContact
namespace Soccer.Domain.Entities.Club
{
public class TeamContact
{
[Key]
[ForeignKey("Team")]
[HiddenInput(DisplayValue = false)]
public virtual int TeamId { get; set; }
[DataType(DataType.EmailAddress)]
[Display(Name = "Email:")]
public virtual string EmailAddress { get; set; }
[DataType(DataType.PhoneNumber)]
[Display(Name = "Phone:")]
public virtual string PhoneNumber { get; set; }
public virtual Team Team { get; set; }
public virtual TeamAddress TeamAddress { get; set; }
}
}
TeamAddress
namespace Soccer.Domain.Entities.Club
{
public class TeamAddress
{
//Team Mailing address
[Key]
[ForeignKey("TeamContact")]
[HiddenInput(DisplayValue = false)]
public virtual int TeamContactId { get; set; }
[Display(Name = "P.O.Box:")]
public virtual string Box { get; set; }
[Display(Name = "Street Name:")]
public virtual string StreetName { get; set; }
[Display(Name = "Street Number:")]
public virtual string StreetNumber { get; set; }
[Display(Name = "City:")]
public virtual string City { get; set; }
[Display(Name = "Postal Code:")]
public virtual string PostalCode { get; set; }
[Display(Name = "Province:")]
public virtual string Province { get; set; }
public virtual TeamContact TeamContact { get; set; }
}
}
What can i do to get passed this?
You can use an EditorTemplate in your view that will render out content within the context of the Team object, so that the model binder will work when you post your form
1) In the folder where your view currently is, create a sub-folder called 'EditorTemplates'
2) Create a new partial view in this folder, name it the same as the model you are trying to scaffold, e.g. TeamContact
3) Write your HTML in the new view for the TeamContact model
4) In your current view for Team, you can now do this...
#Html.EditorFor(model => model.TeamContact)
MVC will recognise that you have a custom template for this object type and will use your partial view to render the page.
When you look at the markup in the HTML page, you will see it renders controls as
Team.TeamContact.EmailAddress
...giving the TeamContact a context against the Team object.
Editor templates are excellent for this sort of thing, particularly if you have a collection of child objects - MVC will correctly index all of your items in the view
One additional thing, you should probably consider splitting out your 'entity domain' objects from what you are trying to render in the view. View Models are used for this, and allow you to keep your domain\data objects out of the presentation layer.
I'm trying to create a drop down list that populates from a database. I have:
public class Employee
{
[Key]
public int Id { get; set; }
[Required]
public String FirstName { get; set; }
[Required]
public String LastName { get; set; }
[Required]
public String JobTitle { get; set; }
}
public class Project
{
[Key]
public int Id { get; set; }
[Required]
public String ProjectName { get; set; }
[Required]
public String CompanyName { get; set; }
}
public class ProjectHour
{
[Key]
public int Id { get; set; }
[Required]
public decimal Hours { get; set; }
[Required]
public DateTime Date { get; set; }
public virtual ICollection<Employee> employeeId { get; set; }
public virtual ICollection<Project> projectId { get; set; }
}
What I want is to create a form that will create new project hours associated with a project and an employee. I'm trying to use dropdownlists to display the employees and the projects on the create form. Obviously, I'm completely new at this, but what I have so far is:
[HttpPost]
public ActionResult CreateProjectHour(ProjectHour newProjectHour)
{
using (var db = new TimesheetContext())
{
IEnumerable<SelectListItem> emp = db.Employees
.Select(c => new SelectListItem
{
Value = c.Id.ToString(),
Text = c.LastName
});
ViewBag.EmployeeId = emp;
db.ProjectHours.Add(newProjectHour);
db.SaveChanges();
}
return RedirectToAction("ProjectHourList");
}
}
And on the form:
#model TimesheetMVC.Models.ProjectHour
...
#Html.DropDownListFor(model => model.employeeId, (SelectList)ViewBag.EmployeeId)
Which is apparently horribly wrong. Any help would be much appreciated...!
Don't use the same name EmployeeId. You need 2 things to create a dropdown list in ASP.NET MVC: a scalar property that will hold the selected value and a collection property that will contain the possible values. But since you are using the ViewBag (which I totally recommend against) you could do the following:
ViewBag.Employees = emp;
and in your view:
#Html.DropDownListFor(
model => model.employeeId,
(IEnumerable<SelectListItem>)ViewBag.Employees
)
But as I said this is not at all an approach that I recommend. I recommend using view models. So define an IEnumerable<SelectListItem> property on your view model:
public IEnumerable<SelectListItem> Employees { get; set; }
and in your controller populate this view model property and then make your view strongly typed to the view model.
Or you could just do a
in the controller
SelectList selectList = new SelectList(db.Employees, "Id", "LastName");
ViewBag.EmployeeList = selectList;
and in the View
#Html.DropDownBoxFor(model => model.id_Employee, ViewBag.EmployeeList as SelectList)
I find this approach easier.
EmployeeId is an IEnumerable<SelectListItem>, not a SelectList.
Therefore, your cast cannot work.
You need to explicitly create a SelectList.