Search form and search result in same viewpage in asp.net mvc

Question

I'm trying to create a module that has search form and search result together like following picture

In that module I have 4 dropdownlist and one text field

this is What I did upto now

This is Model Class

public class ProductCollectionVM
{
    public IEnumerable<ProductCollection> List_ProductCollection { get; set; }
    public ProductCollection Form_ProductCollection { get; set; }
}

public class ProductCollection
{
    public string Product_ID { get; set; }        
    public string ProductType_ID { get; set; }
    public string ProductCategory_ID { get; set; }
    // more properties
}

This is my cshtml view page

@model albaraka.Models.ProductCollectionVM
....
@using (Html.BeginForm("Product_Search", "Home", FormMethod.Get))
{
    ....
    @Html.LabelFor(x => x.Form_ProductCollection.ProductType_ID, htmlAttributes: new { @class = "control-label col-md-2" })
    @Html.DropDownListFor(x => x.Form_ProductCollection.ProductType_ID, (SelectList)ViewBag.Product_TypeListEn, "Select Product Type", new { @class = "form-control" })
    @Html.ValidationMessageFor(x => x.Form_ProductCollection.ProductType_ID, "", new { @class = "text-danger" }) @Html.ValidationMessageFor(x => x.Form_ProductCollection.Product_TypeAr, "", new { @class = "text-danger" })

    @Html.LabelFor(x => x.Form_ProductCollection.ProductCategory_ID, htmlAttributes: new { @class = "control-label col-md-2" })
    @Html.DropDownListFor(x => x.Form_ProductCollection.ProductCategory_ID, (SelectList)ViewBag.Product_CategoryListEn, "Select Product Category", new { @class = "form-control" })
    @Html.ValidationMessageFor(x => x.Form_ProductCollection.ProductCategory_ID, "", new { @class = "text-danger" })

   // .... more controls

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

<table class="table">
    <tr>
        <th>@Html.DisplayNameFor(y => y.Form_ProductCollection.Product_ID</th>
        <th>@Html.DisplayNameFor(y => y.Form_ProductCollection.ProductType_ID)</th>
        // more table headings
    </tr>
    @foreach (var item in Model.List_ProductCollection)
    {
        <tr>
            <td>@Html.DisplayFor(modelItem => item.Product_ID)</td>
            <td>@Html.DisplayFor(modelItem => item.ProductType_ID)</td>
            // .....
        </tr>
    }
</table>

This is controller class

public ActionResult Product_Search([Bind(Prefix = "Form_ProductCollection")]ProductCollection _Productcollection , ProductCollection PC)
{
    Product_Type_DropDownListEn();          
    Product_Category_DropDownListEn();
    Country_DropDownList();
    Subsidary_DropDownListEn();
    var incomplete_products = (from P in db.AB_Product
                               join S in db.AB_Subsidary on P.Subsidary_ID equals S.SubsidaryID
                               where P.Status != "Active"
                               select new ProductCollection
                               {
                                   Product_ID = P.ProductID,
                                   ProductType_ID = P.ProductTypeID,
                                   ProductCategory_ID = P.ProductCategoryID,
                                   Product_Name_En = P.ProductTitleEn,
                                   Susidary_ID = P.Subsidary_ID,
                                   Country_ID = S.Country,
                                   CreatedDate = P.CreatedDate,
                                   Status = P.Status
                               }).ToList();

    if (!string.IsNullOrWhiteSpace(PC.ProductType_ID))
        incomplete_products = incomplete_products.Where(p => p.ProductType_ID.StartsWith(PC.ProductType_ID)).ToList();
    // .... more filtering
    return View(incomplete_products);
}

But once I do debug this getting following error

The model item passed into the dictionary is of type 'System.Collections.Generic.List`1[Project_Name.Models.ProductCollection]', but this dictionary requires a model item of type 'Project_Name.Models.ProductCollectionVM'.

Is this correct approach in my controller class , Or is there any other better way to do this in same view

Answer 1

Your view declares the model as @model albaraka.Models.ProductCollectionVM, but when you submit, you return the view as IEnumerable<ProductCollection> hence the error.

In the POST method, you need to initialize a new instance of ProductCollectionVM and return it

public ActionResult Product_Search(.....)
{
  // filter your collection
  var incomplete_products = ....
  ProductCollectionVM model = new ProductCollectionVM()
  {
    List_ProductCollection = incomplete_products;
  };
  return View(model)
}

However, you will get better performance by using ajax to submit the form values and return either a partial view of the table or JSON containing the table values and update the DOM in the success callback. Refer this DotNetFiddle for a simplified example

Answer 2

In your Controller you return this class:

select new ProductCollection

But on your View you use:

@model albaraka.Models.ProductCollectionVM

You should change class in your Controller to ProductCollectionVM