老生常谈，记一个联动菜单

     已经有好久没有写博客了，写起来还有点小激动。不多说了，就直接上个实站记录，记录一下mvc中controller和jquery结合实现一个二级联动菜单的事务。
     效果如下图所示：
     
       实现起来，其实并不难，首先说第一个下拉框，用到了ViewBag，由controller写方法填充一个动态对象变量，在.cshtml里对该对象进行遍历。

private void BindSelect(int? shopId = null)
        {
            List<Shop> shops = new List<Shop>();
            //这里就假设说取到的商户对象的列表，并且商户对象有属性ShopID和Name要做为下拉菜单选项的Value和Text
            if (shopId == null)
                ViewBag.ShopID = new SelectList(shops, "ShopID", "Name");
            else
                ViewBag.ShopID = new SelectList(shops, "ShopID", "Name", shopId.Value);
        }

       再来看一下.cshtml里对ViewBag的处理。

                    <select id="ShopID" name="ShopID" class="form-control">
                        <option value="0">请选择</option>
                        @if (ViewBag.ShopID != null)
                        {
                            foreach (var item in (SelectList)ViewBag.ShopID)
                            {
                                <option value="@item.Value">@item.Text</option>
                            }
                        }
                    </select>

      这样就完成了第一个下拉框。下面再来看一下第二个下拉框,HTML极其简单。Look.

                    <select id="WifiID" name="WifiID" class="form-control">
                       <option value="0">请选择</option>
                    </select>

     这里要注意，因为jquery要操作html上的标签，必须知道操作的标签对象是哪一个，所以这里必须定义好标签的Id或者name又或者class等等一些足以让jquery选择器较精确地定位到你要操作的那个标签上。下面看一下js代码也是比较简单的，就算是我记录一下吧。绑定一下第一个下拉框的change事件，将第一个下拉框的选中值以post方式提交给controller。

<script type="text/javascript">
    $(function () {
        $("#ShopID").change(function () {
            $.ajax({
                url: "@Url.Action("GetWifi", "BlackWhite")",
                type: "POST",
                data: { "id": $(this).val() },
                success: function (data) {
                    if (data) {
                        $("#WifiID").empty();
                        $("#WifiID").append($("<option>").val(0).text("请选择"));
                        for (var i = 0; i < data.length; i++) {
                            $("#WifiID").append($("<option>").val(data[i].Value).text(data[i].Text));
                        }
                    }
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    alert("错误：" + textStatus);
                },
                complete: function (XMLHttpRequest, textStatus) {
                    //alert("完成：" + textStatus);
                }
            });
        });
    });
</script>

    这里可以很清晰地看到，要调用的controller,action,以及要用的httpMethod.最后，再来看一下controller对这个请求的处理。

     

        [HttpPost]
        public ActionResult GetWifi(int id)
        {
            if (id > 0)
            {
                var lists = db.Wifi.ToList();
                return Json(new SelectList(lists, "WifiID", "Name"));
            }
            return Json(new SelectList(db.Wifi.ToList(), "WifiID", "Name"));
        }

 

再回过头去看上上段的JS代码，在success那里，如果对象不为undefined，在那里作了处理，首先把第二个下拉框的选项清空，防止重复加载，然后加入请选择选项，再就是遍历action返回来的值,最终把值填充进第二个下拉框。
     以上就完成了。好久没写日志了，先从简单的记录起来。走起。。。OVER