title: Post form always returning null
body: <p>I have an application in asp .net mvc 4 as follows:</p>
  
  <p><strong>1.ProductsController.cs</strong></p>
  
  <pre><code>namespace MvcApplication2.Controllers
  {
      public class ProductsController : Controller
      {
          //
          // GET: /Products/
  
          [HttpGet]
          public ActionResult Products()
          {
              List&lt;Product&gt; prList = new List&lt;Product&gt;();
              Product p1 = new Product();
              p1.ProductName = "J &amp; J";
              p1.Price = 40;
              p1.Ratings = 5;
              prList.Add(p1);
              Product p2 =  new Product();
              p2.ProductName = "Himalaya";
              p2.Price = 20;
              p2.Ratings = 2;
              prList.Add(p2);
              return View(prList);
  
          }
  
          [HttpPost]
          public ActionResult Products(FormCollection prList,List&lt;MvcApplication2.Models.Product&gt; fg) 
          {
              return View(prList);
          }
  
      }
  }
  </code></pre>
  
  <p><strong>2. ProductList.cs</strong></p>
  
  <pre><code>namespace MvcApplication2.Models
  {
  
  
      public class Product
      {
          public string ProductName { get; set; }
          public int Price { get; set; }
          public int Ratings { get; set; }
      }
  
  }
  </code></pre>
  
  <p><strong>3. Products.cshtml</strong></p>
  
  <pre><code>@{
      Layout = null;
  
  }
  
  &lt;!DOCTYPE html&gt;
  
  &lt;html&gt;
  &lt;head&gt;
      &lt;meta name="viewport" content="width=device-width" /&gt;
      &lt;title&gt;Products&lt;/title&gt;
      @Styles.Render("~/Content/css")
          @Scripts.Render("~/bundles/modernizr")
  
      &lt;script src="~/Scripts/jquery-3.2.1.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  @model IEnumerable&lt;MvcApplication2.Models.Product&gt;
  @using (@Html.BeginForm("Products", "Products", FormMethod.Post))
  {
  &lt;body&gt;
      &lt;div style="width:100%;height:100%;position: relative "&gt;
          &lt;div style="width:100%;top:0px;height:40px;position:relative;background-color:purple"&gt;
              &lt;input type="submit" value="Sort price" style="float : right;width:30px;" id="SearchId" /&gt;
              @Html.TextBox("Search Box", null, new { @style = "float:right;width:80px "});
              &lt;input type="submit" value="submit" /&gt;  
          &lt;/div&gt;
          &lt;div id="tableDiv"&gt;
              &lt;table id="tableId"&gt;
                  &lt;tr&gt;
                      &lt;th&gt;Name&lt;/th&gt;
                      &lt;th&gt;Price in Rs.&lt;/th&gt;
                      &lt;th&gt;Ratings&lt;/th&gt;
                  &lt;/tr&gt;
  @foreach (var drawing in Model)
  {
  
                  &lt;tr&gt;
                      &lt;td&gt;@drawing.ProductName&lt;/td&gt;
                      &lt;td&gt;@drawing.Price&lt;/td&gt;
                      &lt;td&gt;@drawing.Ratings&lt;/td&gt;
                  &lt;/tr&gt;
  
  }
              &lt;/table&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  }
  &lt;/html&gt;
  </code></pre>
  
  <p>Whenever I navigate to <em><a href="http://localhost:5858/Products/Products" rel="nofollow noreferrer">http://localhost:5858/Products/Products</a></em> and click and on submit , the contol comes to <code>[HttpPost]</code> in Products methods, but the model is always empty .</p>
  
  <p>What is it that I am missing here?I am expecting the same model to be returned when the page was loaded , why is it that the model is becoming empty?</p>