Click here to Skip to main content
15,867,756 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
I have a jQuery selectable widget in my razor view which displayed as an and updated from a comma separated string in SQL Server table just like below:
HTML
<ol class="ui-selectable" style="width:auto" id="selectable1">

@{
    var color = Model.AvailableColors.Split(',');
    foreach (var clr in color)
        {
          <li class="btn red-mint" style="margin: 10px 0">@clr</li>
        }
 }
 </ol>


The above as mentioned displays set of colors like (Red, Green, Purple and etc) list which is of-course selectable and the user can only pick one from the list at a time.
I passed the selected list item value in a hidden field which is then passed to controller action method with below script.

<script type="text/javascript">
    $(document).ready(function () {
        $("#selectable1").selectable({
            selected: function (event, ci) {
                $(ci.selected).siblings().removeClass("ui-selected");
                $("#selectedcolor").val($("#selectable1>li.ui-selected").html());
            }
        });

    });
</script> 



In my form I've a HiddenFor razor attribute to pass selected list item value to the controller as below:

C#
@Html.HiddenFor(m => m.AvailableColors, new { @id = "selectedcolor" })


Now here is something that I am stuck and couldn't find a solution searching over internet. I want that if no item selected the validation should occur and the validation message for the AvailableColors should appear but I have no idea how to do it. Any help please?

Please note that I am passing values from view to another controller action method, here is the action method.


C#
public ActionResult AddToCart(int id,int SelectedQuantity,  string SelectedSizes, string AvailableColors)
{
    // Retrieve the album from the database
    var addedProduct = dbContext.Products
        .Single(product => product.ProductID == id);

    // Add it to the shopping cart
    var cart = ShoppingCart.GetCart(this.HttpContext);

    cart.AddToCart(addedProduct, SelectedQuantity, AvailableColors,SelectedSizes);

    // Go back to the main store page for more shopping
    return RedirectToAction("Index");
}


What I have tried:

I tried to add another property to my view model as below with [Required] Data annotation.

public class SizeColorViewModel
{
[HiddenInput(DisplayValue = false)]
[Key]
public int ProductID { get; set; }
[Display(Name="Select Size")]
[Required(ErrorMessage="Please select a size")]
public string AvailableSizes { get; set; }

[Required]
public string SelectedSizes { get; set; }
}
But even that i couldn't validate that field any idea?
Posted
Updated 16-Nov-20 6:00am
Comments
Sreekanth Mothukuru 4-Sep-16 11:54am    
Try using TextboxFor instead of hiddenfor and set the css property to make it hidden and then write a required attribute for the same.

If this doesn't work try to write a custom validation..

1 solution

Your client code does not validate hidden fields. You have to configure your model to be required and pass that in your hidden field. Now, when you post, you can use the ModelState.IsValid to check if all validation has passed. See, jquery - How to validate hiddenfor fields in asp.net mvc razor views?[^]
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900