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

Question

我有存储在db中的属性类型和子类型，我想在radiobutton中显示这些类型和sub类型。

我分享一些细节。

db表图像

这是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图像

选择第一个proertytype（radiobutton）时，它显示了所有子类型

选择第二个proertytype（radiobutton）时，它显示了其所有子类型

选择第三个proertytype（radiobutton）时，它显示其所有子类型

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

Answer 1

使用partialview方法和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(' ');
                }
            });
        });