Bind radio selection and set to Model in csharp

Viewed 71

I have a for each statement that displays boostrap cards that contains delivery address information from the Model "DeliveryPoints".

Each "delivery point" contains deliveryPoint.felnam, deliveryPoint.feladr1, deliveryPoint.feladr2, deliveryPoint.feladr3 and deliveryPoint.felpcd

  • deliveryPoint.felnam = delivery address name

  • deliveryPoint.feladr1 = delivery address line 1

  • deliveryPoint.feladr2 = delivery address line 2

  • deliveryPoint.feladr3 = delivery address line 3

  • deliveryPoint.felpcd = delivery address postcode

Each "delivery point" has a radio selection that contains a unique id (count++...).

If the user selects example bootstrap card number 2 which would have a radio selection with e.g. id="rad_2" I need it to update the Model.DeliverPoint , which contains deliverPoint.felnam, deliverPoint.feladr1, deliverPoint.feladr2, deliverPoint.feladr3 and deliverPoint.felpcd too their chosen selection (deliveryPoint.felnam and so on....).

What is the best way to achieve this?

Deliver Point (which displays the chosen address)

<h4 class="pt-4">Delivery Point</h4>

                    <div class="delivery-card" style="margin-top: 1.5rem;">
                        @Html.HiddenFor(x => Model.DeliverPoint)
                        <div class="delivery-card__content">
                            <div class="delivery-card__content-top">
                                <div class="delivery-card_img">
                                    <i class="fa fa-truck fa-flip-horizontal" style="font-size: 2rem;"></i>
                                </div>

                            </div>
                            <div class="delivery-card_content-mid">
                                <h4>@Model.DeliverPoint.Felnam</h4>
                                <p class="mb-0">@Model.DeliverPoint.Feladr1, @Model.DeliverPoint.Feladr2, @Model.DeliverPoint.Feladr3, @Model.DeliverPoint.Felpcd</p>
                            </div>
                        </div>
                        <div class="delivery-card__footer">
                            <p data-bs-toggle="modal" data-bs-target="#DeliveryModalXX" style="color: #3282f9!important;" class="mb-1 mt-1">Change delivery point...</p>
                        </div>
                    </div>

Delivery Points (which displays cards for the user to chosen from as their delivery address)

<div class="row">
                        @{int count = 0;}
                        @foreach (Deladd_Data deliveryPoint in Model.DeliveryPoints)
                        {
                            <div class="col-sm">
                                <div class="form-check customfc pe-4" style="padding-left:0;">
                                    <div class="delivery-card" style="margin-top: 1.5rem;">
                                        <div class="delivery-card__content">
                                            <div class="delivery-card__content-top">
                                                <div class="delivery-card_img">
                                                    <i class="fa fa-truck fa-flip-horizontal" style="font-size: 2rem;"></i>
                                                </div>

                                            </div>
                                            <div class="delivery-card_content-mid">
                                                <h4>@deliveryPoint.Felnam</h4>
                                                <p class="mb-0">@($"{deliveryPoint.Feladr1}{(string.IsNullOrEmpty(deliveryPoint.Feladr2) ? "" : $", {deliveryPoint.Feladr2}")}{(string.IsNullOrEmpty(deliveryPoint.Feladr3) ? "" : $", {deliveryPoint.Feladr3}")}{(string.IsNullOrEmpty(deliveryPoint.Felpcd) ? "" : $", {deliveryPoint.Felpcd}")}")</p>
                                            </div>
                                        </div>
                                        <div class="delivery-card__footer">
                                            <div style="padding-left: 25px;">
                                                <input class="form-check-input" type="radio" name="flexRadioDefault" id='@($"rad_{count}")'>
                                                @{count++;}
                                                <label class="form-check-label">Deliver to this address</label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        }
                    </div>
0 Answers
Related