如何使用mvc从数据库绑定多个菜单列表

时间:2016-12-10 07:37:53

标签: javascript asp.net-mvc-4

我在数据库国家,州和地区表中有3个表 最初能够在我的页面中绑定国家/地区列表, 如果我点击国家我想在另一个div相同的视图页面中根据国家ID显示相关的状态 喜欢列表(不在下拉列表中) 那么如果我点击状态我想根据状态ID绑定相关的区域 我试过了

public ActionResult  Country()
{
    //created view model to return multiple models to view
    ViewModel vm = new ViewModel();
   _countryAPI = new CountryAPI();
    var country = _countryAPI.GetAll();
    vm.countryViewModel = country.ToList();
    return View(vm);
}

public JsonResult GetStates(int countryID)
{
    ViewModel vm1 = new ViewModel();
    _stateAPI = new StateAPI();
    var states= _stateAPI .GetAll(countryID);
    vm1.statesViewModel = states.ToList();
    return Json(vm1, JsonRequestBehavior.AllowGet);
}

视图

@using Sample.ViewModel
@model Sample.ViewModel

<h4>countries</h4>
@if (Model.countryViewModel != null)
{
    foreach (var item in Model.countryViewModel)
    {
        <div class="collapse navbar-collapse" >
            <ul class="nav navbar-default">
                <li class="">
                    <a id="@item.CID" onclick="stateClick(this)" >@item.CName</a>
                </li>
            </ul>
        </div>
    }
}
else
{
    <div></div>
}
<h4>States</h4>
@if (Model.statesViewModel != null)
{
    foreach (var item1 in Model.statesViewModel)
    {
        <div>
            <ul class="list-group">
                <li class="list-group-item">
                    <a id="@item1.SID" onclick="districtClick(this)">@item1.SName</a>
                </li>
            </ul>
        </div>
    }
}
else
{
    <div>no states</div>
}

脚本

function stateClick(el) {
    var countryID= $(el).attr("id");
    $.ajax({
        url: '/Home/GetStates',
        type: "GET",
        dataType: "json",
        data: { countryID: countryID },
        success: function (result) {
            console.log(result);
        },
        error: function () {
            console.log(error);
        }
    });
}

能够绑定国家的名单,在点击国家的时候获得国家id以及json结果 不返回视图,json结果返回视图模型,视图中没有结果绑定

0 个答案:

没有答案