Within my SQL table named Products, there is a field called AvailableSizes with a data type of NVARCHAR, which stores all the available sizes for a product. In my view, I have separated the values of the AvailableSizes field as shown below:
<p>
<b>Available Sizes</b>
@{
var Availablesize = Model.AvailableSizes.Split(',');
}
@foreach (var item in Availablesize)
{
<div class="circleBase type2">@item</div>
}
</p>
The above code demonstrates how I display these data values inside circles. If a user clicks on one of these circles containing the data, that value should be selected. Upon clicking the AddToCart button, the selected value should be passed to my controller action shown below:
public RedirectToRouteResult AddToCart(Cart cart, int productId, string returnUrl)
{
Product product = repository.Products.FirstOrDefault(p => p.ProductID == productId);
if (product != null)
{
cart.AddItem(product, 1);
}
return RedirectToAction("Index", new { returnUrl });
}
Below is the code behind for the Add To Cart button:
@using (Html.BeginForm("AddToCart", "Cart", new { ProductID = item.ProductID}))
{
@Html.Hidden("returnUrl", Request.Url.PathAndQuery)
<input type="submit" class="btn btn-default add-to-cart" value="Add to cart" />
}
Since I am new to MVC, I would appreciate a clear solution to implement this feature. Thank you in advance.