Mvc Ajax Dropdownlist 联动实现

原创 2011年01月14日 14:56:00

1. AjaxBindDropdownlistController.cs

    public class AjaxBindDropdownlistController : Controller
    {
        public ActionResult LoadProvince()
        {
            var provinces = Province.GetProvinces();
            return Json(new SelectList(provinces, "Id", "Name"), JsonRequestBehavior.AllowGet);
        }

        public ActionResult LoadCity()
        {
            //string testuservalue = Request.Params["nouservar"];

            int provinceId = -1;
            Int32.TryParse(Request.Params["provinceid"], out provinceId);
            var cities = City.GetCitiesByProvinceId(provinceId);
            //return Json(new SelectList(cities,"Id","Name"), JsonRequestBehavior.AllowGet);
            return Json(cities, JsonRequestBehavior.AllowGet);
        }

    }

2.View code

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
    Index
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <script src="../../Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
    <script language="javascript" type="text/javascript">
        function json2string(strObject) {
            var c, i, l, s = '', v, p;
            switch (typeof strObject) {
                case 'object':
                    if (strObject) {
                        if (strObject.length && typeof strObject.length == 'number') {
                            for (i = 0; i < strObject.length; ++i) {
                                v = json2string(strObject[i]);
                                if (s) {
                                    s += ',';
                                }
                                s += v;
                            }
                            return '[' + s + ']';
                        } else if (typeof strObject.toString != 'undefined') {
                            for (i in strObject) {
                                v = strObject[i];
                                if (typeof v != 'undefined' && typeof v != 'function') {
                                    v = json2string(v);
                                    if (s) {
                                        s += ',';
                                    }
                                    s += json2string(i) + ':' + v;
                                }
                            }
                            return '{' + s + '}';
                        }
                    }
                    return 'null';
                case 'number':
                    return isFinite(strObject) ? String(strObject) : 'null'; case 'string': l = strObject.length; s = '"';
                    for (i = 0; i < l; i += 1) {
                        c = strObject.charAt(i);
                        if (c >= ' ') {
                            if (c == '//' || c == '"') {
                                s += '//';
                            }
                            s += c;
                        } else {
                            switch (c) {
                                case '/b': s += '//b'; break;
                                case '/f': s += '//f'; break;
                                case '/n': s += '//n'; break;
                                case '/r': s += '//r'; break;
                                case '/t': s += '//t'; break;
                                default: c = c.charCodeAt(); s += '//u00' + Math.floor(c / 16).toString(16) + (c % 16).toString(16);
                            }
                        }
                    }
                    return s + '"';
                case 'boolean': return String(strObject);
                default: return 'null';
            }
        }


        $(document).ready(function () {
            LoadProvince();
            $("#city").append("<option value='-1'>" + "Please select…" + "</option>");
            $("#province").change(function () {//chang事件
                $("#city").empty();
                var provinceid = $("#province").val();
                LoadCity(provinceid);
            });
        });


        function LoadProvince() {//load province
            $.ajax({
                type: "get",
                dataType: "json",
                url: "/AjaxBindDropdownlist/LoadProvince",
                success: function (msg) {
                    var data = msg;
                    $("#province").append("<option value='-1'>" + "Please select…" + "</option>");
                    //alert(json2string(data));
                    //alert(data[0].Text);
                    for (var i = 0; i < data.length; i++) {
                        $("#province").append("<option value='" + data[i].Value + "'>" + data[i].Text + "</option>");
                    }
                }
            });
        }

        function LoadCity(provinceid) {//LoadCity

            $.ajax({
                type: "get",
                dataType: "json",
                url: "/AjaxBindDropdownlist/LoadCity",
                data: { provinceid: provinceid, nouservar: "testvalue" },
                success: function (msg) {
                    var data = msg;
                    //alert(json2string(data));
                    //alert(data[0].Name);
                    for (var i = 0; i < data.length; i++) {
                        $("#city").append("<option value='" + data[i].Id + "'>" + data[i].Name + "</option>");
                    }
                }
            });
        }

    </script>
    <h2>
        Index</h2>
    <%: Html.ActionLink("Create Province","CreateProvince") %>
    <%: Html.ActionLink("Create City","CreateCity") %>
    <br />
    <br />
    <br />
    <div id="SelectTest">
        Province:<select id="province" name="D1">
        </select><br />
        City:
        <select id="city" name="D2">
        </select>
    </div>
</asp:Content>

DropDownList无刷新ajax二级联动效果

页面主要代码:                                                                  Width="200" Aut...
  • zhaohongx
  • zhaohongx
  • 2015年02月15日 17:00
  • 1120

DropDownList控件实现省市联动(AJAX实现)

http://blog.csdn.net/bdstjk 在网站注册的页面上经常要选择注册地点,如果改变省的名称就能出现对应的市级的名称,将为用户带来很大的方便,虽然用.NET的服务端时间实现很容易,...
  • bdstjk
  • bdstjk
  • 2012年04月27日 11:49
  • 10463

MVC里面两个dropdownlist联动

MVC view里面有两个dropdownlist分别邦定到两个属性 View里面 @Html.LabelFor(m => m.Name...
  • clear_zero
  • clear_zero
  • 2016年03月21日 19:08
  • 1429

MVC dropdownlist二级联动

在做输入的时候,有时候需要用到多个dropdownlist联动,所以在网上搜集了相关资料后,自己也拿具体的MVC案例整理了一下,希望可以帮到也在找这个问题的同学们: model: public...
  • feelingdu
  • feelingdu
  • 2017年07月18日 22:21
  • 182

【.net基础】--DropDownList控件:两级联动

最近学习Asp.Net,发现很多控件都很有意思,例如:Canlender,AdRotator等。以前只知道有这样的页面效果,但是对这些控件了解并不多。不怕不知道,就怕不知道。...
  • successA
  • successA
  • 2015年05月11日 16:45
  • 1693

C# DropDownList二级联动问题

需求:点击第一个dropdownlist1,dropdownlist2中的数据根据dropdownlist1选中的值进行变化。 步骤1:拖动两个dropdownlist,分别命名为dropd...
  • redredredlu
  • redredredlu
  • 2015年05月05日 09:21
  • 1893

ASP.NET MVC DropdownList 使用

ASP.NET MVC 使用Html Helper的形式实现UI控件,里面有一个非常重要的下拉列表控件-DropdownList。这个控件使用还是比较灵活的,今天总结了一下。 1.View @us...
  • afandaafandaafanda
  • afandaafandaafanda
  • 2015年06月08日 16:32
  • 748

使用dropdownlist的绑定_实现省市列表级联

前台:                                   onselectedindexchanged="DropDownListProvince_Selecte...
  • liu_111111
  • liu_111111
  • 2012年11月30日 14:53
  • 4044

asp.net js实现dropdownlist二级联动(动态)

ASPX端代码: http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/...
  • lishimin1012
  • lishimin1012
  • 2014年06月26日 21:06
  • 3213

实现无刷新DropDownList联动效果

在做一个文章添加功能时,想在选择大类后,自动将其所属二级小类显示出来,使用DropDownList的SelectedIndexChanged事件可以很容易实现,但每次选择后页面总要刷新一次,让人感觉很...
  • 21aspnet
  • 21aspnet
  • 2004年12月10日 16:30
  • 7996
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Mvc Ajax Dropdownlist 联动实现
举报原因:
原因补充:

(最多只允许输入30个字)