passing multiple models to controller to build ViewModel

Question

So I'm consuming a RESTFul API to get the data I need. This API returns json and i converted this to C# models. The API returns some general info about a vendor and an array with products. The array of products also consists out of arrays for pricing information and product availability etc...

The problem im facing is that when a product is selected by a user to buy i have to gather specific information out of the different array's. Currently I've made a ViewModel for the data that needs to be send to process the order. This is done by binding the actual data using hidden fields and use a HttpPost from the view, resulting in +/- 30 hidden fields to set the proper data values.

I'm kinda new to MVC and this seems dirty. I thought i would be able to pass the models(for example the VendorModel,ProductModel,PricingModel,AvailabilityModel) from the view(with a POST) to the controller and create the ViewModel(based on the models send) so that i can send that to the API.

Is this actually how it should be done or is my design faulty and should i approach this differently?

A side note: One of the things i found is that most people suggest to use an identifier to get the data you need but the problem is that the API doesn't have the right calls to get Product, Pricing, Availability data based on Id, its just one big object with array's based on the search query.

Edit

So after some information i decided to try out nested models and created a viewmodel like this:

public class TestViewModel
{
    public TestViewModel()
    {
        productInfo = new ProductInfo();
    }

    public ProductInfo productInfo { get; set; }   
}

My view is like this(super simpel):

@using (Html.BeginForm("CreateOrder","Products"))
{
    //Vender info etc...

    //This is how i render partial view now:
    {Html.RenderPartial("Info/ProductInfo", Product.ProductInformation.ProductInfo);} 

    <input type="submit" value="Order" class="btn btn-default" />
}

My controller(TestViewModel.ProductInfo is always null):

public ActionResult MakeReservation(TestViewModel testViewModel)
{
    //Doesnt do anything just debugging TestViewModel
    return View();
}

I'm not posting any inputs but just want to pass the modal with the data to the controller. How will MVC know which data to bind, because now it doesnt bind. Do i have to bind it myself somehow?

Answer 1

I had the similar situation and I have one suggestion, you can pass all the models to the view as save in a javascript object as JSON using the example code which I used like below-

<script type="text/javascript">
    var pageBlockOptionsJSON = @(Html.Raw(Json.Encode(DesignOrderBlocks)));
    var controlTypeJSON = @(Html.Raw(Json.Encode(controlList)));
</script>

Then you can do all the manipulations using jQuery to structure and create a javascript object and post that object to Controller Action. You can create the same or exact structure which is needed on the server. As specified in this url - http://www.nickriggs.com/posts/post-complex-javascript-objects-to-asp-net-mvc-controllers/

In this way you don't need to have use huge amount of hidden fields and you can do all the dirty work on the client side using jQuery.

I am sure this will help you out in doing the thing in the right way. Let me know if you need some details.

Answer 2

For people that somehow find this questions i solved this issue by saving the model to an database as an search result using entity framework. After getting the result i save it and create a viewmodel. After posting i send the id's that entity framework generated and search the right models in the database creating a new postviewmodel.