How to hide the webgrid when execute the page in mvc3 razor? - asp.net-mvc-3

Question

When I remove the webgrid and layout=null in the view, its executing and client side validation message is displaying... but When I execute the page with layout= nlll and Webgrid it displaying the below error "A data source must be bound before this operation can be performed"
Controller :
[AcceptVerbs(HttpVerbs.Get)]
public ActionResult Display()
{
return View();
}
[AcceptVerbs(HttpVerbs.Post)]
public ActionResult Display(string brandname)
{
ShoppingClass s = new ShoppingClass();
var ob= s.Searching(brandname);
return View(ob);
}
view :
#model List<ShoppingCart.Models.ShoppingClass>
#{
ViewBag.Title = "Display";
Layout = null;
}
#{
var grid = new WebGrid(source: Model, defaultSort: "Drug_Code", rowsPerPage: 20);
}
<script src="#Url.Content("~/Scripts/jquery.validate.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.validate.unobtrusive.js")" type="text/javascript"></script>
#using (Html.BeginForm(null, null, FormMethod.Post))
{
for (int i = 0; i < 1; i++)
{
#*
<table><tr><td> #Html.Label("BrandName")</td>
<td>#Html.TextBox("BrandName")<div>#Html.ValidationMessage("BrandName")</div></td>
<td><input type="submit" value="Search" name="Search" /></td></tr></table>*#
<table><tr><td> #Html.LabelFor(o => o[i].BrandName)</td>
<td>#Html.TextBoxFor(o => o[i].BrandName)<div>#Html.ValidationMessageFor(o => o[i].BrandName)</div></td>
<td><input type="submit" value="Search" name="Search" /></td></tr></table>
}
}
<div id="grid">
#grid.GetHtml(tableStyle: "listing-border", headerStyle: "gridhead", footerStyle: "paging", rowStyle: "td-dark", alternatingRowStyle: "td-light",
columns: grid.Columns(
grid.Column("GenericName", format: #<text>#item.GenericName</text>),
grid.Column("BrandName", format: #<text>#item.BrandName</text>),
grid.Column("Purchaseqty", format: #<text>#item.Purchaseqty</text>),
grid.Column("Purchaseprice", format: #<text>#item.Purchaseprice</text>),
grid.Column("Drug_Code", format: #<text>#item.Drug_Code</text>),
grid.Column(header: "", format: (item) => Ajax.ActionLink("Add to Cart", "ADDTOCART",
new { brandname = #item.BrandName, purchaseqty = #item.Purchaseqty, drugcode = #item.Drug_Code }, new AjaxOptions { HttpMethod = "Post", OnSuccess = "ADDTOCART" }))
)
)
</div>

Answer 1

If you want to hide the grid if the model is null, then you can put an if statement in that checks if the model is null... ie.
if (model != null)
{
// Make and populate grid here
}