DotnetSparrow
DotnetSparrow

Reputation: 27996

validation of select element in asp.net MVc 4 Razor view

I have a dropdown in asp.net MVC 4 razor view like this:

@{Html.EnableClientValidation(true);}
@using (Html.BeginForm("AddToCart", "Home", FormMethod.Post, new { id = "product-options" }))
{
    <select id="items">
        <option value="0">Select</option>
        @foreach (var option in item.OptionValues)
        {
            <option @option.ItemOptionValueID>@option.Value</option>
        }
    </select>

    <a href="javascript:$('#product-options').submit();" class="btn btn-orange-2ln">
        <span>Continue Shopping</span>
    </a>
}




[HttpPost]
public ActionResult AddToCart(int Id, other properties ...)
{
    CartItemInfo model = new CartItemInfo();
    model.CustomerID =1;
    ItemBiz.AddItemToCart(model);
    int cartCount = 0;
    if (User.Identity.IsAuthenticated)
    {
        int CustomerId = MembershipBiz.GetCustomerIDByUserID(WebSecurity.CurrentUserId);
        cartCount = ItemBiz.GetCartItemsByCustomerID(CustomerId).Count();
    }
    return view();
}

I want to make it compulsory field so that if "Select" is option, user sees an error message. how to do this ?

Upvotes: 0

Views: 1984

Answers (2)

Ishtiaq
Ishtiaq

Reputation: 1058

Do not set the value for "Select" option and mark the select field as required.

<select id="items" required>
<option >Select</option>

Upvotes: 1

psantiago
psantiago

Reputation: 714

It seems like you may not be using a model in your razor view? If you did, this task would be much simpler. Your model could look like this:

public class MyModel
{
    [Required]
    public int? MyValue { get; set; }

    public List<SelectListItem> MyOptions
    {
        get
        {
            var myOptions = new List<SelectListItem>
                {
                    new SelectListItem
                        {
                            Text = "Select",
                            Value = String.Empty
                        }
                };
            foreach (var option in item.OptionValues)
            {
                myOptions.Add(new SelectListItem
                    {
                        Text = option.Value,
                        Value = option.ItemOptionValueID
                    });
            }
            return myOptions;
        }
    }
}

Then your razor view could look something like:

@using (Html.BeginForm("AddToCart", "Home", FormMethod.Post, new { id = "product-options" }))
{
     @Html.DropDownListFor(i => i.MyValue, Model.MyOptions)
     @Html.ValidationMessageFor(i => i.MyValue)

    <a href="javascript:$('#product-options').submit();" class="btn btn-orange-2ln">
        <span>Continue Shopping</span>
    </a>
}

And finally your post action could look something like:

[HttpPost]
public ActionResult AddToCart(MyModel model)
{
    if (!ModelState.IsValid) return View('TheInitialViewName', model);
    CartItemInfo model = new CartItemInfo();
    model.CustomerID =1;
    ItemBiz.AddItemToCart(model);
    int cartCount = 0;
    if (User.Identity.IsAuthenticated)
    {
        int CustomerId = MembershipBiz.GetCustomerIDByUserID(WebSecurity.CurrentUserId);
        cartCount = ItemBiz.GetCartItemsByCustomerID(CustomerId).Count();
    }
    return view();
}

Something like that would handle both client and server-side validation.

Upvotes: 0

Related Questions