0

I have a View with 2 DropDownListFor. This View is loaded with a certain ViewModel. The flow demands that when the user selects an Item from the second DropDownListfor, present in the View, another DropDownListFor must show with other data. To solve this I used a PartialView, obtained using a ajax request, with a different ViewModel just for this PartialView. Now the problem is how can I submit data from the View and the PartialView using a ViewModel and not FormsCollection? Is having two different ViewModels the correct way to tackle this kind of problem? Every example shows the use of only one ViewModel per View but what happens if the Data of that ViewModel isn't all loaded when the View is created?

I created a PartialView and specific ViewModel for it. To be able to submit only the MainViewModel with all data, I had to create the same property on both the ViewModels of the View and PartialView. But does this makes sense?

public class AlertViewModel
{
        public string AlertDescription { get; set; }
        public List<DropdownModel> AlertTypesList { get; set; }
        public long SelectedAlertType { get; set; }
        public List<DropdownModel> CustomersList { get; set; }
        public long SelectedCustomer { get; set; }
        public long[] SelectedProducts { get; set; }
        public DateTime StartDate { get; set; }
        public DateTime EndDate { get; set; }
}

public class AlertProductListViewModel
{
        public long[] SelectedProducts { get; set; }
        public List<DropdownModel> ProductList { get; set; }
}
AtomicBrownie
  • 1
  • 2

1 Answers1

0

Put your members on separted class.

public class Alert
{
        public string AlertDescription { get; set; }
        public List<DropdownModel> AlertTypesList { get; set; }
        public long SelectedAlertType { get; set; }
        public List<DropdownModel> CustomersList { get; set; }
        public long SelectedCustomer { get; set; }
        public long[] SelectedProducts { get; set; }
        public DateTime StartDate { get; set; }
        public DateTime EndDate { get; set; }
}

public class AlertProduct
{
        public long[] SelectedProducts { get; set; }
        public List<DropdownModel> ProductList { get; set; }
}

  public class MyViewModel
  {
    public Alert Alert{ get; set; }
    public AlertProduct AlertProduct{ get; set; }        
  }
}

Your DropDown

@using SolutionPath.ProjectPath.ModelFolder.MyViewModel 
@Html.DropDownListFor(model => model.Alert.AlertTypesList)
@Html.DropDownListFor(model => model.Alert.CustomersList)
@Html.DropDownListFor(model => model.AlertProduct.ProductList)

Your Controller

public ActionResult MyController(MyViewModel viewModel)
{
  //Some code
  return view();
}
Nilson Martins
  • 49
  • 11
  • How can I submit MyViewModel when the View uses MyClassOne and the PartialView MyClassTwo? The PartialView has a DropDown that only is populated when an option from the DropDown on that View is selected. This has made me have two ViewModels instead of one. How can I merge both ViewModels when submitting the form? – AtomicBrownie Sep 17 '19 at 17:04
  • It's easy, you'll annote "@using MySolution.MyProject.MyModel.MyViewModel" inside all your views (partial or not). So all classes inside MyViewModel will be avaliable. – Nilson Martins Sep 17 '19 at 17:09
  • I have changes names to a better understanding. – Nilson Martins Sep 17 '19 at 17:23
  • `@Html.DropDownListFor(model => model.AlertProduct.ProductList)` This comes from a Request after the View is loaded. This means that MyViewModel will go to the View with only with the Alert property filled because the property AlertProduct only is instantiated when I select an option from the `@Html.DropDownListFor(model => model.Alert.CustomersList)`. I didn't explain this before, my fault, the View and the PartialView come in different requests. Because I need a CustomerID to be able to fetch his List of Products. – AtomicBrownie Sep 18 '19 at 08:41
  • Hence the need to have 2 ViewModels I think or have only one ViewModel but not loaded completely for the View and PartialView? This is more a question of how to do it the correct way, because I tried the one ViewModel route, partially loaded for each View, submitted it and it worked. Model binding worked well. But is this the way to do it? That's what is confusing me. – AtomicBrownie Sep 18 '19 at 08:41
  • Oh man what´s your really problem??? I'd asked by better way to submit data with 2 distinct object and now you´re talking about request fetch data... Request data is one thing, Submit data is another. If you have problem to fetch and input data, I suggest you to publish your fully code. – Nilson Martins Sep 18 '19 at 14:27
  • I am not talking about request data. I was explaining the flow of actions. The problem is that the partialView is not loaded at the same time as the View. So the ViewModel goes to the View "incomplete", without the ProductList, because this list is only populated when the User selects a Customer, then the Partialview is obtained by another request to the Controller, at this point, should I send a different ViewModel for the PartialView or use the same Viewmodel but with only the ProductList property populated and the rest of the properties null, because the PartialView doesn't need them. – AtomicBrownie Sep 18 '19 at 15:32
  • Ah Ok. I understand! You want do request a new data from controller to load the second dropdownlist, without a new reload because you receive null object reference... In this case, you need to use Ajax to load only one dropdownlist. You can use ASP.NET Ajax, but recommend to use jQuery Ajax. https://stackoverflow.com/questions/17095443/how-to-use-simple-ajax-beginform-in-asp-net-mvc-4 https://stackoverflow.com/questions/41235212/how-to-access-and-display-the-data-from-database-using-ajax-jquery-asp-net-mvc – Nilson Martins Sep 18 '19 at 19:35