Question: Radiobuttonfor not binding with model property

Question

Radiobuttonfor not binding with model property

Answers 0
Added at 2016-12-24 14:12
Tags
Question

My radiobuttonfor is not binding with my model property, when selection is changed property stays the value that is is set on construction

My ViewModel:

public class ProductDetailsSaleModel
{
    private Packsize _selectedAnswer;
    public Product Product { get; set; }

    public Packsize SelectedAnswer
    {
        get
        {
            return _selectedAnswer;
        }
        set
        {
            _selectedAnswer = value;
        }
    }

    public ICollection<Product> RelatedProducts { get; set; } 
}

My ProductController

public ActionResult Details(Guid? id)
{
    if (id == null)
    {
        return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
    }
    Product product = db.Products.Include(model => model.Category)
        .Include(model => model.AdditionalInfo)
        .Include(model => model.Packsizes)
        .Include(model => model.Files)
        .First(m => m.Identity == id);
    if (product == null)
    {
        return HttpNotFound();
    }
    var detail = new ProductDetailsSaleModel();
    detail.Product = product;
    if (product.Packsizes.Any())
        detail.SelectedAnswer = product.Packsizes.OrderBy(m => m.Name).First();
    detail.RelatedProducts = db.Products.Where(m => m.Catgoryguid == product.Catgoryguid).ToList();
    ViewBag.RelatedProducts = db.Products.Where(m => m.Catgoryguid == product.Catgoryguid).ToList();
    return View(detail);
}

My ShoppingCartController

public void AddToCart(ProductBase service)
    {
        var cartItem =
            _db.Carts.SingleOrDefault(c => c.CartId == ShoppingCartId && c.ProductGuid == service.Identity);
        if (cartItem == null)
        {
            cartItem = new ShoppingCartItem
            {
                ProductGuid = service.Identity,
                CartId = ShoppingCartId,
                Count = 1
            };
            cartItem.CreationModificationType.SetCreation();
            _db.Carts.Add(cartItem);
        }
        else
        {
            cartItem.Count++;
        }
        _db.SaveChanges();
    }

My View

@using EntitiesICDD.ProductEntities
@using EnumsICDD
@using Neefi_Website.Extentions
@model Neefi_Website.Models.ProductDetailsSaleModel

@{
    ViewBag.Title = "Details";
    Layout = "~/Views/Shared/_LayoutDefaultPage.cshtml";
}

<!-- Page Title
        ============================================= -->
<!-- Page Title
        ============================================= -->
<section id="page-title" class="page-title-pattern">

    <div class="container clearfix">
        <h1>9ct W/G diamond cluster pendant</h1>
        <ol class="breadcrumb">
            <li><a href=@Url.Action("Index", "Home")>Home</a></li>
            <li><a href=@Url.Action("Shop","Products")>Shop</a></li>
            <li><a href=@Url.Action("ShopCategory","Products", new { id = Model.Product.Identity})>@Model.Product.Category.Name</a></li>
            <li class="active">@Model.Product.Name</li>
        </ol>
    </div>

</section><!-- #page-title end -->

<div class="content-wrap">

<div class="container clearfix">

<div class="single-product">

<div class="product">

<div class="col_two_fifth">

    <!-- Product Single - Gallery
    ============================================= -->
    <div class="product-image">
        <div class="fslider" data-pagi="false" data-arrows="false" data-thumbs="true">
            <div class="flexslider">
                <div class="slider-wrap" data-lightbox="gallery">
                    @if (Model.Product.Files.Any(x => x.FileType == FileType.CoverPhoto))
                    {
                        <div class="slide" data-thumb="/img/uploads/products/listImages/@Model.Product.Files.First(x => x.FileType == FileType.CoverPhoto).FileName">
                            <a href="~/img/uploads/products/normalImages/@Model.Product.Files.First(x => x.FileType == FileType.CoverPhoto).FileName" title="@Model.Product.Name - Cover Image" data-lightbox="gallery-item"><img src="~/img/uploads/products/normalImages/@Model.Product.Files.First(x => x.FileType == FileType.CoverPhoto).FileName" alt="@Model.Product.Name"></a>
                        </div>
                    }
                    else
                    {
                        <div class="slide" data-thumb="/img/uploads/products/listImages/noImage.png">
                            <a href="~/img/uploads/products/normalImages/NoPhotoAvailable.jpg" title="No Image Cover Photo" data-lightbox="gallery-item"><img src="~/img/uploads/shop/normalImages/NoPhotoAvailable.jpg" alt="NoImage"></a>
                        </div>
                    }
                    @if (Model.Product.Files.Any(x => x.FileType == FileType.Photo))
                    {
                        foreach (var item in Model.Product.Files.Where(x => x.FileType == FileType.Photo))
                        {
                            <div class="slide" data-thumb="/img/uploads/products/listImages/@item.FileName">
                                <a href="~/img/uploads/products/normalImages/@item.FileName" title="@item.FileName - Photo View" data-lightbox="gallery-item"><img src="~/img/uploads/products/normalImages/@item.FileName" alt="@item.FileName"></a>
                            </div>
                        }
                    }
                </div>
            </div>
        </div>
        @if (Model.Product.Discount != 0)
        {
            <div class="sale-flash">@Model.Product.Discount% Off*</div>
        }
        else if (Model.Product.Special)
        {
            <div class="sale-flash">Sale!</div>
        }
    </div><!-- Product Single - Gallery End -->

</div>

<div class="col_two_fifth product-desc">

    <!-- Product Single - Price
    ============================================= -->
    <div class="product-price">
        @if (!Model.Product.Packsizes.Any())
        {
            if (Model.Product.OldPrice != 0 && Model.Product.OldPrice < Model.Product.Price)
            {
                <del>@Model.Product.OldPrice.ToString("C")</del>
                <ins>@Model.Product.Price.ToString("C")</ins>
            }
            else
            {
                @Model.Product.Price.ToString("C")
            }
        }
        else
        {
            <div id="pricePro">@Model.Product.Packsizes.OrderBy(m => m.Product.Name).First().Price.ToString("c")</div>
        }

    </div><!-- Product Single - Price End -->
    <!-- Product Single - Rating
    ============================================= -->
    <div class="product-rating">
        <i class="icon-star3"></i>
        <i class="icon-star3"></i>
        <i class="icon-star3"></i>
        <i class="icon-star-half-full"></i>
        <i class="icon-star-empty"></i>
    </div><!-- Product Single - Rating End -->

    <div class="clear"></div>
    <div class="line"></div>

    <!-- Product Single - Quantity & Cart Button
    ============================================= -->

    <a href="@Url.Action("UnderConstruction", "Home")" class="add-to-cart button notopmargin">Compare</a>
    <a href="@Url.Action("UnderConstruction", "Home")" class="add-to-cart button notopmargin" style="width: auto">Hint</a>
    <a href="@Url.Action("AddToCart", "ShoppingCart", new {id = Model.Product.Identity, pack = Model.SelectedAnswer.Identity})" class="add-to-cart button button-3d">Add to Cart</a>

    <br/>

    @Html.Hidden("id", Model.Product.Identity)
    @Html.HiddenFor(m => m.SelectedAnswer)

    <div class="clear"></div>
    <div class="line"></div>

    <!-- Product Single - Short Description
    ============================================= -->
    <p>@Model.Product.Description</p>

    @if (Model.Product.Packsizes.Any())
    {
        <table class="table table-striped table-bordered">
            <tbody>
            @foreach (Packsize item in Model.Product.Packsizes.OrderBy(m => m.Name))
            {
                <tr>
                    <td style="width: 10%">@Html.RadioButtonFor(m => m.SelectedAnswer, item, new { pack = item})</td>
                    <td>@item.Name</td>
                    <td><strong style="color: red">@item.Price.ToString("C")</strong></td>
                </tr>
            }
            </tbody>
        </table>
    }

    <!-- Product Single - Meta
    ============================================= -->
    <div class="panel panel-default product-meta">
        <div class="panel-body">
            <span itemprop="productID" class="sku_wrapper">ID: <span id="identity" class="sku">@Model.Product.Identity</span></span>
            <span class="posted_in">Category: <a href="#" rel="tag">@Model.Product.Category.Name</a>.</span>
            <span class="tagged_as">Name: <a href="#" rel="tag">@Model.Product.Name</a>.</span>
        </div>
    </div><!-- Product Single - Meta End -->
    <!-- Product Single - Share
    ============================================= -->
    <div class="si-share noborder clearfix">
        <span>Share:</span>
        <div>
            <a href="#" class="social-icon si-borderless si-facebook">
                <i class="icon-facebook"></i>
                <i class="icon-facebook"></i>
            </a>
            <a href="#" class="social-icon si-borderless si-twitter">
                <i class="icon-twitter"></i>
                <i class="icon-twitter"></i>
            </a>
            <a href="#" class="social-icon si-borderless si-pinterest">
                <i class="icon-pinterest"></i>
                <i class="icon-pinterest"></i>
            </a>
            <a href="#" class="social-icon si-borderless si-gplus">
                <i class="icon-gplus"></i>
                <i class="icon-gplus"></i>
            </a>
            <a href="#" class="social-icon si-borderless si-rss">
                <i class="icon-rss"></i>
                <i class="icon-rss"></i>
            </a>
            <a href="#" class="social-icon si-borderless si-email3">
                <i class="icon-email3"></i>
                <i class="icon-email3"></i>
            </a>
        </div>
    </div><!-- Product Single - Share End -->

</div>

<div class="col_one_fifth col_last">

    <div class="feature-box fbox-plain fbox-dark fbox-small">
        <div class="fbox-icon">
            <i class="icon-thumbs-up2"></i>
        </div>
        <h3>100% Original</h3>
        <p class="notopmargin">We guarantee you the sale of Original Brands.</p>
    </div>

    <div class="feature-box fbox-plain fbox-dark fbox-small">
        <div class="fbox-icon">
            <i class="icon-credit-cards"></i>
        </div>
        <h3>Payment Options</h3>
        <p class="notopmargin">We accept Visa, MasterCard and American Express.</p>
    </div>

    <div class="feature-box fbox-plain fbox-dark fbox-small">
        <div class="fbox-icon">
            <i class="icon-truck2"></i>
        </div>
        <h3>Free Shipping</h3>
        <p class="notopmargin">Free Delivery to 100+ Locations on orders above R100.00.</p>
    </div>

    <div class="feature-box fbox-plain fbox-dark fbox-small">
        <div class="fbox-icon">
            <i class="icon-undo"></i>
        </div>
        <h3>30-Days Returns</h3>
        <p class="notopmargin">Return or exchange items purchased within 30 days.</p>
    </div>

</div>

<div class="col_full nobottommargin">

    <div class="tabs clearfix nobottommargin" id="tab-1">

        <ul class="tab-nav clearfix">
            <li><a href="#tabs-1"><i class="icon-info-sign"></i><span class="hidden-xs"> Additional Information</span></a></li>
            <li><a href="#tabs-2"><i class="icon-star3"></i><span class="hidden-xs"> Reviews (@Model.Product.Reviews.Count)</span></a></li>
        </ul>

        <div class="tab-container">

            <div class="tab-content clearfix" id="tabs-1">

                <table class="table table-striped table-bordered">
                    <tbody>
                    @foreach (var item in Model.Product.AdditionalInfo)
                    {
                        <tr>
                            <td>@item.Name</td>
                            <td>@item.Description</td>
                        </tr>
                    }
                    </tbody>
                </table>

            </div>
            <div class="tab-content clearfix" id="tabs-2">

                <div id="reviews" class="clearfix">

                    @if (Model.Product.Reviews.Any())
                    {
                        <ol class="commentlist clearfix">

                            @foreach (var item in Model.Product.Reviews)
                            {
                                {
                                    var thisuser = UserExtentions.ApplicationUser(item.ApplicationUserId);

                                    <li class="comment even thread-even depth-1" id="li-comment-1">
                                        <div id="comment-1" class="comment-wrap clearfix">

                                            <div class="comment-meta">
                                                <div class="comment-author vcard">
                                                    <span class="comment-avatar clearfix">
                                                                    @if (thisuser.Files.Any(x => x.FileType == FileType.Avatar))
                                                                    {
                                                                        <img alt="@thisuser.PersonalDetails.DisplayName" src="~/img/uploads/users/listImages/@thisuser.Files.First(x => x.FileType == FileType.Avatar).FileName" height='60' width='60' />
                                                                    }
                                                                    else
                                                                    {
                                                                        <img alt="No Image" src="~/img/uploads/users/listImages/noImage.png" height='60' width='60' />
                                                                    }

                                                                </span>
                                                </div>
                                            </div>

                                            <div class="comment-content clearfix">
                                                <div class="comment-author">@thisuser.PersonalDetails.DisplayName<span><a href="#" title="Permalink to this comment">@item.DateTime</a></span></div>
                                                <p>@item.Review</p>
                                                <div class="review-comment-ratings">
                                                    <i class="icon-star3"></i>
                                                    <i class="icon-star3"></i>
                                                    <i class="icon-star3"></i>
                                                    <i class="icon-star3"></i>
                                                    <i class="icon-star-half-full"></i>
                                                </div>
                                            </div>

                                            <div class="clear"></div>

                                        </div>
                                    </li>
                                }
                            }

                        </ol>
                    }
                    else
                    {
                        <h3>No Review Available for this Product</h3>
                    }

                    @if (Request.IsAuthenticated)
                    {
                        <!-- Modal Reviews
                        ============================================= -->
                        <a href="#" data-toggle="modal" data-target="#reviewFormModal" class="button button-3d nomargin fright">Add a Review</a>

                        <div class="modal fade" id="reviewFormModal" tabindex="-1" role="dialog" aria-labelledby="reviewFormModalLabel" aria-hidden="true">
                            <div class="modal-dialog">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                                        <h4 class="modal-title" id="reviewFormModalLabel">Submit a Review</h4>
                                    </div>
                                    <div class="modal-body">
                                        @using (Html.BeginForm("AddReview", "Products", FormMethod.Post))
                                        {
                                            @Html.HiddenFor(model => model.Product.Identity)
                                            <div class="clear"></div>

                                            <div class="col_full col_last">
                                                <label for="rating">Rating</label>
                                                <select id="rating" name="rating" class="form-control">
                                                    <option value="">-- Select One --</option>
                                                    <option value="1">1</option>
                                                    <option value="2">2</option>
                                                    <option value="3">3</option>
                                                    <option value="4">4</option>
                                                    <option value="5">5</option>
                                                </select>
                                            </div>

                                            <div class="clear"></div>

                                            <div class="col_full">
                                                <label for="review">Comment <small>*</small></label>
                                                <textarea class="required form-control" id="review" name="review" rows="6" cols="30"></textarea>
                                            </div>

                                            <div class="col_full nobottommargin">
                                                <button class="button button-3d nomargin" type="submit" id="template-reviewform-submit" name="template-reviewform-submit" value="submit">Submit Review</button>
                                            </div>

                                        }
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                                    </div>
                                </div><!-- /.modal-content -->
                            </div><!-- /.modal-dialog -->
                        </div><!-- /.modal -->
                        <!-- Modal Reviews End -->
                    }

                </div>

            </div>

        </div>

    </div>

</div>

</div>

</div>

<div class="clear"></div>
<div class="line"></div>

<div class="col_full nobottommargin">

    <h4>Related Products</h4>

    <div id="oc-product" class="owl-carousel product-carousel carousel-widget" data-margin="30" data-pagi="false" data-autoplay="5000" data-items-xxs="1" data-items-sm="2" data-items-md="3" data-items-lg="4">

        @foreach (Product item in ViewBag.RelatedProducts)
        {
            <div class="oc-item">
                <div class="product iproduct clearfix">
                    @Html.Partial("_ProductSquareDisplayPartialView", item)
                </div>
            </div>
        }

    </div>

</div>

</div>

</div>

@section scripts
{
    <script>
        $(':radio[name=SelectedAnswer]').change(function () {
            // read the value of the selected radio
            var value = @Model.SelectedAnswer.Price;
            $('#pricePro').text(value);
            alert($(this).val());
        });
    </script>
}

I have been struggeling with these radiobuttons for days now, anyone with some help PLEASE! I am pulling out all my hair.

Answers to

Radiobuttonfor not binding with model property

Source Show
◀ Wstecz