validation is not firing on textbox in RAZOR?

Question

1below I have posted my total coding of view. Here validation is not firing on the textbox. I dont know how to sort out this problem. This view is executing. if I press the search textbox without entering the text in textbox, its not validating.Also tell me wheather I have to use TextBox or TextBoxFor. I am fresher and new to mvc3. Please tell me the solution.

    @model  IEnumerable< ShoppingCart.Models.ShoppingClass>
        @{
            ViewBag.Title = "Display";

        }
<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>

@Html.ValidationSummary(true)
 @using (Html.BeginForm("Display","Home", FormMethod.Post, new { id = "loginForm" }))


        {

            //for (int i = 0; i < 1; i++)
            //{
            <table><tr>o<td> @Html.Label("BrandName")</td>
            <td>@Html.TextBox("BrandName") <div> @Html.ValidationMessage("BrandName")</div></td>
         <td></td></tr></table>



    @*    <table><tr><td>

         @Html.LabelFor(o=>o[i].BrandName)</td>
        <td>@Html.EditorFor(o => o[i].BrandName) <div>@Html.ValidationMessageFor(o => o[i].BrandName)</div></td>
        <td></td></tr></table>*@



          //  }
               <input type="submit" value="Search" name="Search" />
        }



  @{
    var grid = new WebGrid(source: Model, defaultSort: "Drug_Code", rowsPerPage: 20);
 <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

Edit: added a more complete example.

I'm not sure from the comments above if it's working to your satisfaction or not, but I think the root of your issue is that you are trying to use a model of IEnumerable where you don't need one. I understand that you need it for your grid, but what if you either put the grid or the search box in a PartialView? The PartialView could have its own model, and then you wouldn't need to fit your search box into a model that doesn't really fit.

The way I understand it, you're not actually passing data into the search box. You are only using the model at the search box so you get field validation. Let me know if that is incorrect.

Edit your view to look like this:

@model  IEnumerable< ShoppingCart.Models.ShoppingClass>
    @{
        ViewBag.Title = "Display";
    }
   <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>

@Html.ValidationSummary(true)

@{Html.RenderPartial("_Search", Model.First());} //Need to make sure Model.First() actually exists, or you'll get error when it doesn't
//If you change your partial view to have a view model with just brand name, call it like this:
//@Html.RenderPartial("_Search", new _SearchViewModel())
//If you're only using the view model for required field validation on the return trip, then you don't actually need to pass data down to it.

@{
  var grid = new WebGrid(source: Model, defaultSort: "Drug_Code", rowsPerPage: 20);
 <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>

  }

Create a Partial View (_Search):

@model ShoppingCart.Models.ShoppingClass
//You could also create a different View Model that just has brand name, and pass the data down another way
//See examples in the code for the view

@Html.ValidationSummary(true)
@using (Html.BeginForm("Display","Home", FormMethod.Post, new { id = "loginForm" }))
{
    <table><tr><td>

     @Html.LabelFor(o=>o.BrandName)</td>
    <td>@Html.EditorFor(o => o.BrandName) <div>@Html.ValidationMessageFor(o => o.BrandName)</div></td>
    <td></td></tr></table>

    <input type="submit" value="Search" name="Search" />
}