我想使用 MVC 在 RadioButton 中添加属性类型和子类型

Question

我有存储在 db 中的属性类型和子类型，我想在单选按钮中显示这些类型和子类型。

我正在分享一些细节。

DB Tables Image

这里是 ModelVM 类

    public class PropertyVM
    {
      //property table
        public int property_id { get; set; }
        public string property_purpose { get; set; }
        public string property_sub_purpose { get; set; }
        public string address { get; set; }
        public string property_title { get; set; }
        public string property_description { get; set; }
        public Nullable<double> property_price { get; set; }
        public Nullable<double> property_budget { get; set; }
        public string property_land_area { get; set; }
        public string bedroom { get; set; }
        public string bathroom { get; set; }
        public Nullable<int> property_status { get; set; }
        public Nullable<System.DateTime> property_add_dateTime { get; set; }
        public string property_ad_expiry { get; set; }

        // property Type table
        public int property_type_id { get; set; }
        public string property_type_name { get; set; }
        public Nullable<int> property_type_status { get; set; }

        // property sub type table
        public int property_sub_type_id { get; set; }
        public string property_sub_type_name { get; set; }
        public Nullable<int> property_sub_type_status { get; set; }

        // for list of data
        public string Selected_pt_list { get; set; }
        public List<property_type> pt_list { get; set; }
        public string Selected_pst_list { get; set; }
        public List<property_sub_type> pst_list { get; set; }

}

这里是控制器方法

[HttpGet]
        public ActionResult AddProperty()
        {
            PropertyVM obj = new PropertyVM();
            obj.pt_list = db.property_type.Where(pt => pt.property_type_status == 1).ToList();
            obj.pst_list = db.property_sub_type.Where(pst => pst.property_sub_type_status == 1).ToList();

            return View(obj);
        }

这是 UI 图片

WHen Select 1st ProertyType(Radiobutton) it shows all its child subTYpes

WHen Select 2nd ProertyType(Radiobutton) it shows all its child subTYpes

WHen Select 3rd ProertyType(Radiobutton) it shows all its child subTYpes

注意：单选按钮中的所有属性类型和子类型，而不是复选框

Answer 1

使用 Partialview Approach 和 Jquery 和 ajax 解决这个问题。

解决办法

PartialView Property_Sub_Type

@model projectName.Areas.Dashboard.Models.ViewModels.PropertyVM

@foreach (var _pst in Model.pst_list)
{
    //string divMainId = "propertyType" + _pst.property_type.property_type_name.Replace(" ", "") + "IfSelect";
    string forLblSub = "radioPropertyType" + _pst.property_sub_type_name.Replace(" ", ""); // for label and its must use
    forLblSub = forLblSub + _pst.property_sub_type_name.Replace(" ", "");  // for label and its must use

    <div class="funkyradio">
        <div class="funkyradio-info">
            @Html.RadioButtonFor(ms => ms.Selected_pst_list, _pst.property_sub_type_id, new { @Name = "radioPropertyType" + _pst.property_sub_type_name.Replace(" ", "") + "Sub", id = "radioPropertyType" + _pst.property_type.property_type_name.Replace(" ", "") + _pst.property_sub_type_name.Replace(" ", "") })
            <label for="@forLblSub">@_pst.property_sub_type_name</label>
        </div>
    </div>
}

这里是主视图 Add_Property

@model ProjectName.Areas.Dashboard.Models.ViewModels.PropertyVM

@{
    ViewBag.Title = "Add Property";
}

<!-- /.col -->
<div class="col-md-9">
    <div class="box box-primary">
        <div class="box-header with-border">
            <h3 class="box-title">Add a Property</h3>
            @*@Html.Partial("~/Areas/Admin/Views/Shared/_errorMsg.cshtml")*@
        </div>
        <!-- /.box-header -->
        <!-- form start -->
        @using (Html.BeginForm("AddProperty", "PropertyManagment", FormMethod.Post, new { enctype = "multipart/form-data" }))
        {
            @Html.AntiForgeryToken()
            @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        <div class="box-body">
            <div class="row heading_addProperty_main">
                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                    <span class="heading_addProperty_span">Property Purpose &amp; Category</span>
                </div>
            </div>
            <div class="form-group col-lg-12 col-md-12 col-sm-12" style="padding-left:0px;padding-right:0px;">
                <label for="LabelPurpose" class="text-uppercase">Purpose</label>
                <div class="funkyradio">
                    <div class="funkyradio-info">
                        @Html.RadioButtonFor(m => m.property_purpose, "Sale", new { @Name = "radioPurpose", id = "radioPurposeSale" })
                        <label for="radioPurposeSale">For Sale</label>
                    </div>
                    <div class="funkyradio-info">
                        @Html.RadioButtonFor(m => m.property_purpose, "Rent", new { @Name = "radioPurpose", id = "radioPurposeRent" })
                        <label for="radioPurposeRent">Rent</label>
                    </div>
                    <div class="funkyradio-info">
                        @Html.RadioButtonFor(m => m.property_purpose, "Wanted", new { @Name = "radioPurpose", id = "radioPurposeWanted" })
                        <label for="radioPurposeWanted">Wanted</label>
                    </div>
                </div>
            </div>
            <!-- Wanted Sub Radio -->
            <div class="form-group col-lg-12 col-md-12 col-sm-12" style="padding-left:10px;padding-right:0px;" id="wantedIfSelect">
                <label for="LabelWanted" class="text-uppercase">Wanted</label>
                <div class="funkyradio">
                    <div class="funkyradio-info">
                        @Html.RadioButtonFor(m => m.property_purpose, "Buy", new { @Name = "radioWanted", id = "radioWantedBuy" })
                        <label for="radioWantedBuy">Buy</label>
                    </div>
                    <div class="funkyradio-info">
                        @Html.RadioButtonFor(m => m.property_purpose, "Rent", new { @Name = "radioWanted", id = "radioWantedRent" })
                        <label for="radioWantedRent">Rent</label>
                    </div>
                </div>
            </div>
            <!-- Property Type Partial View -->
            @{Html.RenderAction("_PropertyTypePartial", "PropertyManagment");}

            <!-- Property Type Partial View -->
            <div class="form-group col-lg-12 col-md-12 col-sm-12" style="padding-left:10px;padding-right:0px;" id="loadPartial">

            </div>

            @*@{Html.RenderAction("_PropertySubTypePartial", "PropertyManagment", new { id = Model.Selected_pt_list });}*@

            <div class="row heading_addProperty_main">
                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                    <span class="heading_addProperty_span">Property Location</span>
                </div>
            </div>
            <div class="form-group col-lg-6 col-md-6 col-sm-6" style="padding-left:0px;">
                <label for="LabelCity" class="text-uppercase">City</label>
                @Html.DropDownList("city_id", null, "Select One", htmlAttributes: new { @class = "form-control select2" })
                @Html.ValidationMessageFor(model => model.city_id, "", new { @class = "text-danger" })
            </div>
            <div class="form-group col-lg-6 col-md-6 col-sm-6" style="padding-right:0px;">
                <label for="LabelLocation" class="text-uppercase">Address</label>
                @Html.EditorFor(model => model.address, new { htmlAttributes = new { @class = "form-control", @PlaceHolder = "Enter Complete Address" } })
                @Html.ValidationMessageFor(model => model.address, "", new { @class = "text-danger" })
            </div>
            <div class="row heading_addProperty_main">
                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                    <span class="heading_addProperty_span">Property Details</span>
                </div>
            </div>
            <div class="form-group col-lg-6 col-md-6 col-sm-6" style="padding-left:0px;">
                <label for="LabelPropertyTitle" class="text-uppercase">Property Title</label>
                @Html.EditorFor(model => model.property_title, new { htmlAttributes = new { @class = "form-control", @PlaceHolder = "Enter Title" } })
                @Html.ValidationMessageFor(model => model.property_title, "", new { @class = "text-danger" })
            </div>
            <div class="form-group col-lg-6 col-md-6 col-sm-6" style="padding-right:0px;">
                <label for="LabelPrice" class="text-uppercase">Final Price (PKR)</label>
                @Html.EditorFor(model => model.property_price, new { htmlAttributes = new { @class = "form-control", @PlaceHolder = "Enter Price (All Inclusive)" } })
                @Html.ValidationMessageFor(model => model.property_price, "", new { @class = "text-danger" })
            </div>
            <div class="form-group col-lg-6 col-md-6 col-sm-6" style="padding-left:0px;">
                <label for="LabelLandArea" class="text-uppercase">Land Area</label>
                @Html.EditorFor(model => model.property_land_area, new { htmlAttributes = new { @class = "form-control", @PlaceHolder = "Enter Land Area" } })
                @Html.ValidationMessageFor(model => model.property_land_area, "", new { @class = "text-danger" })
            </div>
            <div class="form-group col-lg-6 col-md-6 col-sm-6" style="padding-right:0px;">
                <label for="LabelAreaUnit" class="text-uppercase">Area Unit</label>
                @Html.DropDownList("land_area_unit_id", null, "Select One", htmlAttributes: new { @class = "form-control select2" })
                @Html.ValidationMessageFor(model => model.land_area_unit_id, "", new { @class = "text-danger" })
            </div>
            <div class="form-group col-lg-6 col-md-6 col-sm-6" style="padding-left:0px;">
                <label for="LabelDescription" class="text-uppercase">Description</label>
                @Html.TextAreaFor(model => model.property_description, new { @class = "form-control", @cols = 3, @rows = 3, @style = " resize: none;" })
            </div>
            <div class="form-group col-lg-6 col-md-6 col-sm-6" style="padding-right:0px;">
                <label for="LabelExpiresAfter" class="text-uppercase">Expires After</label>
                <input type="text" class="form-control" placeholder="">
            </div>
            <div class="row heading_addProperty_main">
                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                    <span class="heading_addProperty_span">Add Images</span>
                </div>
            </div>
            <div class="form-group col-lg-12 col-md-12 col-sm-12" style="padding-right:0px;padding-left:0px;">
                <div class="upload-btn-wrapper">
                    <button class="btn_upload"><i class="icon icon-bar"></i> Upload Images</button>
                    <input type="file" name="propertyImages" multiple />
                    <span class="label label-warning" style="padding:5px; font-size:12px;"><i class=""></i> Press CTRL key while selecting images to upload multiple images at once</span>
                </div>
            </div>
        </div>
            <!-- /.box-body -->
            <div class="box-footer">
                <input type="submit" class="btn btn-success btn-sm" value="Submit">
                @Html.ActionLink("Back to List", "Index", "City", null, new { @class = "btn btn-primary btn-sm" })
            </div>
        }
    </div>
</div>
<!-- /.col -->

这里是 Jquery

// Load property sub type based on property type selection

        $("input:radio[name='radioPropertyType']").change(function () {

            // get selected radiobutton value
            var id = $("input:radio[name='radioPropertyType']:checked").val();

            // get div name where we display data
            var divToLoad = $("#loadPartial");

            // call controller method
            $.ajax({
                cache: false,
                type: "GET",
                url: "@(Url.Action("_PropertySubTypePartial", "PropertyManagment"))",
                data: { "id": id },
                success: function (data) {
                    divToLoad.html(' ');
                    divToLoad.html(data);
                },
                error: function (xhr, ajaxOptions, thrownError) {
                    divToLoad.html(' ');
                }
            });
        });