如何从剃刀的下拉列表中获取依赖值

Question

假设我有以下对象：

public class CountryAndState
{
    public string Country { get; set; }
    public List<string> States { get; set; }
}

这个对象在我的视图中填充，如下所示：

<select id="CountryDropdown" name="CountrySelector">
@foreach (CountryAndState cas in Model.CountryAndState())
{
    <option value="@cas.country">@cas.country</option>
}
</select>

问题是，我想根据上面dropdownlist 中选择的国家/地区填充第二个dropdownlist。

但是，我似乎无法访问此 dropdownlist 的 ID，以便在我的剃刀代码中获取下一个状态下拉列表的依赖关系。

• 因此，如何添加此依赖项并根据第一个中选择的国家/地区动态填充我的状态下拉列表？

Answer 1

你可以这样做：

视图和 Javascript：

   <h1>Cascading Dropdown List of Country, State and City</h1>  
    <hr />  
    <br />  
    <div class="row">  
        <div class="col-lg-3"></div>  
        <div class="col-lg-6">  

            <div class="form-group">  
                <label class="col-md-4 control-label">Country Name</label>  
                <div class="col-md-6">  
                    <select class="form-control" id="ddlCountry"></select><br />  
                </div>  
            </div>  

            <div class="form-group">  
                <label class="col-md-4 control-label">State Name</label>  
                <div class="col-md-6">  
                    <select class="form-control" id="ddlState"></select>  
                    <br />  

                </div>  
            </div>  
            <br />  
            <div class="form-group">  
                <label class="col-md-4 control-label">City Name</label>  
                <div class="col-md-6">  
                    <select class="form-control" id="ddlCity"></select>  

                </div>  
            </div>  
        </div>  
        <div class="col-lg-3"></div>  
    </div> 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.js"></script>  
<script>  
    $(document).ready(function () {  

        var ddlCountry = $('#ddlCountry');  
        ddlCountry.append($("<option></option>").val('').html('Please Select Country'));  
        $.ajax({  
            url: 'http://localhost:54188/api/Cascading/CountryDetails',  
            type: 'GET',  
            dataType: 'json',  
            success: function (d) {  
                $.each(d, function (i, country) {  
                    ddlCountry.append($("<option></option>").val(country.CountryId).html(country.CountryName));  
                });  
            },  
            error: function () {  
                alert('Error!');  
            }  
        });  

        //State details by country id  

        $("#ddlCountry").change(function () {  
            var CountryId = parseInt($(this).val());  

            if (!isNaN(CountryId)) {  
                var ddlState = $('#ddlState');  
                ddlState.empty();  
                ddlState.append($("<option></option>").val('').html('Please wait ...'));  

                debugger;  
                $.ajax({  
                    url: 'http://localhost:54188/api/Cascading/StateDetails',  
                    type: 'GET',  
                    dataType: 'json',  
                    data: { CountryId: CountryId },  
                    success: function (d) {  

                        ddlState.empty(); // Clear the please wait  
                        ddlState.append($("<option></option>").val('').html('Select State'));  
                        $.each(d, function (i, states) {  
                            ddlState.append($("<option></option>").val(states.StateId).html(states.StateName));  
                        });  
                    },  
                    error: function () {  
                        alert('Error!');  
                    }  
                });  
            }  


        });  

        //City Bind By satate id  
        $("#ddlState").change(function () {  
            var StateId = parseInt($(this).val());  
            if (!isNaN(StateId)) {  
                var ddlCity = $('#ddlCity');  
                ddlCity.append($("<option></option>").val('').html('Please wait ...'));  

                debugger;  
                $.ajax({  
                    url: 'http://localhost:54188/api/Cascading/CityDetails',  
                    type: 'GET',  
                    dataType: 'json',  
                    data: { stateId: StateId },  
                    success: function (d) {  


                        ddlCity.empty(); // Clear the plese wait  
                        ddlCity.append($("<option></option>").val('').html('Select City Name'));  
                        $.each(d, function (i, cities) {  
                            ddlCity.append($("<option></option>").val(cities.CityId).html(cities.CityName));  
                        });  
                    },  
                    error: function () {  
                        alert('Error!');  
                    }  
                });  
            }  


        });  
    });  
</script> 

你可以在互联网上找到很多不同的绑定级联下拉列表的想法 贴一些链接供参考：

https://www.c-sharpcorner.com/UploadFile/sourabh_mishra1/cascading-dropdownlist-in-Asp-Net-mvc/

https://www.c-sharpcorner.com/blogs/cascading-dropdownlist-in-asp-net-mvc

https://www.aspsnippets.com/Articles/Cascading-Dependent-Country-State-City-DropDownLists-using-jQuery-AJAX-in-ASPNet-MVC.aspx

https://abctutorial.com/Post/26/how-to-create-cascading-dropdownlist-in-aspnet-mvc-%7C-using-jquery-ajax

https://www.aspsnippets.com/Articles/Cascading-Dependent-Country-State-City-DropDownLists-using-Entity-Framework-in-ASPNet-MVC.aspx

https://www.c-sharpcorner.com/article/cascading-dropdown-list-of-country-state-and-city-using-mvc-web-api-and-jquery/

Answer 2

use the jquery min
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.js"></script>

$(document).ready(function(){

$('#CountryDropdown').change(function () {

var txt = $("#CountryDropdown option:selected").text();

var v = $("#CountryDropdown").val();
 here add the dropdown of state

})
});