Here i am trying to create dynamic dropdown list which load items from the Viewmodel of View,
here is my model
I have created view model as below
passing View model to MVC View
public ActionResult Create()
{
OrgVM model = new OrgVM();
model.regions = getRegions();
return View(model);
}
private List<Region> getRegions()
{
var list = new List<Region>();
list = context.Set<Region>().ToList().Select(s => new Region
{
Id = s.RegionId,
Name = s.Name,
}).ToList();
return list;
}
now here in Create View am calling View model as below,
#model xyz.ViewModels.OrgVM
and am generating dropdown like
#Html.DropDownListFor(x => Model.regions, new SelectList(Model.regions), htmlAttributes: new { #class = "form-control" })
and it looks like below snapp, where it has to show dyanamic values in that dropdown list.
Resolved this with little R and D
#Html.DropDownListFor(m => Model.regions,Model.regions.Select(d => new
SelectListItem()
{
Value = d.RegionId.ToString(),
Text = d.Name.ToString()
}))
Related
My question is two-fold.
I have a View that gets data on the change of a drop down selection.
The data retrieved is a List property of a ViewModel class using an Ajax call.
This data is shown as a selection of check boxes for the user to select any number of them.
If I return a Partial View from an AJAX call, this is easy enough, but from what I have experienced, this doesn't work for POST'ing back to the controller. Nothing is bound correctly.
From what I have read the correct way is to use EditorFor, So firstly, I cannot figure out how to populate the EditorFor from the AJAX call.
Secondly, If I test by sending initial data from my GET, the EditorFor displays the correct checkbox options, but when I POST, the count of the items is 0.
View:
#model EngineeringAssistantMVC.Controllers.FirmwareController.FirmwareViewModel
#using (Html.BeginForm("Upload", "Firmware", FormMethod.Post, new { #id = "uploadFirmwareForm", #class = "form-horizontal" }))
{
<!-- Device -->
<div class="form-group">
<div class="col-lg-1">
#Html.LabelFor(x => x.Device, htmlAttributes: new { #class = "control-label" })
</div>
<div class="col-lg-2">
#Html.DropDownListFor(x => x.Device, ViewBag.Devices as IEnumerable<SelectListItem>, new { #class = "form-control", #id = "Devices" })
</div>
<div class="col-lg-9">
#Html.ValidationMessageFor(x => x.Device, "", new { #class = "text-danger" })
</div>
</div>
#Html.EditorFor(x => x.SelectedModels, "SelectedModels", new { #id = "Models" })
#Html.HiddenFor(x => x.SelectedModels)
}
And the AJAX call:
function GetModels() {
$.ajax({
type: "GET",
url: '#Url.Action("GetModels", "Firmware", null)',
data: { SelectedDevice: $('#Devices').val() },
success: function (dataSet) {
//$('#Models').html(dataSet);
//$('#Models').data(dataSet);
//$('#Models').val(dataSet);
// How do I populate the EditorFor from the dataSet returned?
},
error: function (err) {
console.log("ERROR: " + err.responseText);
},
})
}
SelectedModels EditFor Template:
#model IEnumerable<EngineeringAssistantMVC.ViewModels.ModelViewModel>
#foreach (var item in Model)
{
#Html.CheckBoxFor(x => item.IsSelected)
#Html.Label(item.Description)
#Html.HiddenFor(x => item.ModelId)
#Html.HiddenFor(x => item.IsSelected)
#Html.HiddenFor(x => item.Description)
}
Controller:
[HttpPost]
public ActionResult Upload(HttpPostedFileBase uploadFile, FirmwareViewModel firmwareViewModel)
{
// firmwareViewModel.SelectedModels count is 0 here
}
ModelFirmware Class:
public class ModelFirmware
{
public int ModelFirmwareId { get; set; }
public int FirmwareId { get; set; }
public int ModelId { get; set; }
}
FirmwareViewModel:
public class FirmwareViewModel
{
public int FirmwareViewModelId { get; set; }
[Required]
public string Device { get; set; }
public ICollection<ModelViewModel> SelectedModels { get; set; }
}
I just can't get it to work correctly.
EDIT 1: - Add method that returns the models
[HttpGet]
public ActionResult GetModels(string SelectedDevice)
{
var deviceAbbreviation = _dbContext.Radios.Where(x => x.RadioName == SelectedDevice).Select(x => x.ProjectAbbreviation).FirstOrDefault();
var models = _dbContext.AnatomyModels.Where(x => x.SerialPrefix.StartsWith(deviceAbbreviation.Trim()) && x.ParentId == 0).ToList();
List<ModelViewModel> mvms = models.Select(x => new ModelViewModel()
{
ModelId = x.AnatomyModelId,
Description = x.SerialPrefix,
IsSelected = false,
}).ToList();
return Json(mvms);
}
There are numerous issues with your code.
First your not using the EditorTemplate correctly. Change its name to ModelViewModel.cshtml to match the name of the class, and locate it in the /Views/Shared/EditorTemplates (or /Views/YourControllerName/EditorTemplates) folder. The template is then based on a single object (note also the LabelFor() required to create a label associated with the checkbox, and you need to delete the hidden input for IsSelected)
#model ModelViewModel
#Html.CheckBoxFor(m => m.IsSelected)
#Html.LabelFor(m => m.IsSelected, Model.Description)
#Html.HiddenFor(m => m.ModelId)
#Html.HiddenFor(m => m.Description)
Refer also Post an HTML Table to ADO.NET DataTable to understand why your foreach loop would never have created the correct name attributes for model binding.
Then in the main view use
<div id="container">
#Html.EditorFor(m => m.SelectedModels)
</div>
and remove the hidden input for SelectedModels (but before you do, inspect the html for that element to understand why its value would never bind). The EditorFor() method will correctly generate the html for each item in your collection.
Next, change your GetModels() method to return a partial view based on FirmwareViewModel since that is what you will be posting back. Note that you could return a JsonResult, but that would mean generating a whole lot of html in the ajax call back that would not be strongly typed.
[HttpGet]
public PartialViewResult GetModels(string SelectedDevice)
{
var deviceAbbreviation = _dbContext.Radios.Where(x => x.RadioName == SelectedDevice).Select(x => x.ProjectAbbreviation).FirstOrDefault();
var models = _dbContext.AnatomyModels.Where(x => x.SerialPrefix.StartsWith(deviceAbbreviation.Trim()) && x.ParentId == 0).ToList();
List<ModelViewModel> mvms = models.Select(x => new ModelViewModel()
{
ModelId = x.AnatomyModelId,
Description = x.SerialPrefix,
IsSelected = false, // not really necessary since its the default
}).ToList();
FirmwareViewModel model = new FirmwareViewModel
{
SelectedModels = mvms
};
return PartialView(model);
}
and your GetModels.cshtml view will be
#model FirmwareViewModel
#Html.EditorFor(m => m.SelectedModels)
Then, modify your ajax call to add the partial view in the success callback
$.ajax({
type: "GET",
url: '#Url.Action("GetModels", "Firmware")', // do not need to add 3rd parameter
data: { SelectedDevice: $('#Devices').val() },
success: function (response) {
$('#container').html(response);
},
error: function (err) {
console.log("ERROR: " + err.responseText);
},
})
The .html() function will replace any elements already existing in the <div id="container"> element
Finally, since your using a view model, make use of it and do not use ViewBag. Your view model should contain a IEnumerable<SelectListItem> Devices property which you populate in the GET method (and use #Html.DropDownListFor(x => x.Device, Model.Devices, new { #class = "form-control" }) in the view (note also that the method generates id="Device"). It should also contain a HttpPostedFileBase property to avoid the additional parameter in the POST method, and allow you to add validation attributes.
I have a few users with roles created in my MVC 5 application. I have a ticket Model which contains basic ticket info. But now I want to add a property called "Assigned To" to this ticket Model and I want to assign this property value to the users available.
In my view I want to have a drop down list of all available Users so I can select a user to assign the ticket to. How can I create this property in my Model and how to make it a drop down list in my view? Thanks
Update 1:
in my Index() method I already have an existing actionresult model to return to view and its like this:
Models.Application model = db.Applications
.Include("Source")
.Include(.....)
.SingleOrDefault(m => m.Id == id);
if (model == null)
{
return new HttpNotFoundResult();
}
return View(model);
How can I incorporate the code you suggest in the Index() method with what I already have?
Query your database to get the list of users, then transpose this into your view model. Make sure you DONT pass the User class directly from the DB as you will send the password, salt etc to the browser. You should transpose it from a DB shape to a VM shape, containing only the fields required in the view.
ViewModel:
class MyViewModel
{
public IEnumerable<User> Users { get; set; }
public string User { get; set;}
}
[HttpGet]
public ActionResult Index()
{
var viewModel = new MyViewModel()
{
Users = <map users from db>
};
return this.View(viewModel);
}
View:
<div class="form-group">
#Html.LabelFor(m => m.User)
<div class="col-md-10">
#Html.DropDownListFor(x => x.User, new SelectList(Model.Users, "Id", "Name"), new { #class = "form-control" })
#Html.ValidationMessageFor(m => m.OriginStation, "", new { #class = "text-danger" })
</div>
</div>
Then your form postback handler:
[HttpPost]
public ActionResult Index(MyViewModel viewModel)
{
viewModel.User now contains the id of the user
}
I want to add another dropdownlist. The below code works for one dropdown, but how would I add one for Categories?
public ActionResult Create()
{
var ddl = new Users();
ddl.DropDowns = userRepository.Getddl("Departments").Select(c => new SelectListItem
{
Value = c.DropdownID.ToString(),
Text = c.DropdownText
});
ViewData["ListofProfiles"] = new SelectList(ListofProfiles, "Value", "Text");
return View(ddl);
}
Try to avoid the ViewData approach.Switch to Strongly typed way of doing this. Add another property to your View Model to carry one more dropdown items
public class User
{
public int SelectedCountry { set;get;}
public int SelectedProfile { set;get;}
public List<SelectListItem> Countries {set;get;}
public List<SelectListItem> Profiles {set;get;}
public User()
{
Countries =new List<SelectListItem>();
Profiles =new List<SelectListItem>();
}
}
Now set the collection in your GET action
public ActionResult Create()
{
var vm=new User();
vm.Countries=GetCountryItems();
vm.Profiles=GetProfileItems();
return View(vm);
}
Where GetCountryItems and GetProfileItems are 2 methods which returns a list of SelectListItem objects for countries and Profiles from db.
Do not make your controllers FAT. Just keep it simple and clean. Move away your code which fetch data from repository to a different layer. Easy to read and maintain :)
And in your strongly typed view,
#mode User
#using(Html.BeginForm())
{
#Html.DropDownListFor(m => m.SelectedCountry,
new SelectList(Model.Countries, "Value", "Text"), "Select")
#Html.DropDownListFor(m => m.SelectedProfile,
new SelectList(Model.Profiles, "Value", "Text"), "Select")
<input type="submit" />
}
I have a generic list method that returns a CategoryID and CategoryName.
I have spent enough time researching and cant seem to put it together. I very new at MVC.
Here is my DropdownList Method in a repository. I get back the data... So far so good.
public List<DropdownList> GetDDl()
{
return catDDL;
}
Here is my CONTROLLER CODE(attempt at it)
IEnumerable<SelectListItem> liCat =
userRepository.Getddl().Select(c => new SelectListItem
{
Value = c.DropDownID.ToString(),
Text = c.DropDownText
}
ViewBag.catItems = new SelecList(liCat,"Value","Text");
Here is my VIEW
#Html.Dropdownlist("catItems","Select Category)
Try to avoid dynamic stuff like ViewBag and ViewData. Use strongly typed views.
ViewModel is just a POCO class which we will use to transfer data between your view and the action method. It will be specific to the view.
ex : if you want to create a view which creates a product. So create a viewmodel like this
public class Product
{
public string Name { set;get;}
public IEnumerable<SelectListItem> Categories{ get; set; }
public string SelectedCategoryId { get; set; }
//Other Properties as needed
}
now in your GET action method, you create an object of this view model and initialize the values and send to the view.
public ActionResult Create()
{
var vm=new Product();
vm.Categories=userRepository.Getddl().
Select(c => new SelectListItem
{
Value = c.DropDownID.ToString(),
Text = c.DropDownText
});
return View(vm);
}
Now make your view strongly typed to our Product class and use the Html.DropDownListFor helper method.
#model PersonsProduct
#using (Html.BeginForm())
{
#Html.DropDownListFor(x => x.SelectedCategoryId,
new SelectList(Model.Categories,"Value","Text"), "Select")
<input type="submit" value="save" />
}
Now in your HttpPost , you can get the form values like this
[HttpPost]
public ActionResult Create(Product model)
{
if(ModelState.IsValid)
{
//check model.SelectedCategoryId
//save and redirect
}
//to do :reload the dropdown again.
return view(model);
}
Should just be:
Controller:
IEnumerable<SelectListItem> liCat = userRepository.Getddl().Select(c => new SelectListItem
{
Value = c.DropDownID.ToString(),
Text = c.DropDownText
}
ViewBag.catItems = liCat
View:
#Html.Dropdownlist("catItems", ViewBag.catItems)
I'm trying to get the drop down list to have my item selected when there is an item, but it never does. I've Googled this and tried many different methods, but they all seem to use a ViewModel containing the list instead of using ViewBag, but I would like to stick to the ViewBag if possible.
My controller:
[HttpGet]
public ActionResult Index(int? id)
{
ViewBag.SelectList = new SelectList(rep.GetItemList(), "id", "type");
if (id.HasValue)
{
var model = rep.GetItemByID(id.Value);
if ( model != null )
{
return View(model);
}
}
return View();
}
My View:
<div class="editor-field">
#Html.DropDownListFor(model => model.itemID, (SelectList)ViewBag.SelectList)
#Html.ValidationMessageFor(model => model.itemID)
</div>
This doesn't have my item selected in the DropDownList, and I've also tried having a list in the ViewBag and then constructing the SelectList in the View, which some posts say should solve the problem:
<div class="editor-field">
#Html.DropDownListFor(model => model.itemID, new SelectList(ViewBag.SelectList, "id", "type", Model.itemID))
#Html.ValidationMessageFor(model => model.itemID)
</div>
But none of it seems to work. So I was wondering if there is anyone where that is able to spot what I'm doing wrong?
make sure your itemID property is set in the model you are passing to the view
if (id.HasValue)
{
var model = rep.GetItemByID(id.Value);
model.itemID=id.Value;
return View(model);
}
I would try setting the selected value from the begining since SelectList is immutable.
[HttpGet]
public ActionResult Index(int? id)
{
if (id.HasValue)
{
ViewBag.SelectList = new SelectList(rep.GetItemList(), "id", "type", id );
var model = rep.GetItemByID(id.Value);
if ( model != null )
{
return View(model);
}
}
else
{
ViewBag.SelectList = new SelectList(rep.GetItemList(), "id", "type");
}
return View();
}
In your View use it like this:
#Html.DropDownListFor(model => model.itemID, (SelectList)ViewBag.SelectList, "Please select...")