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>

MVC DropDownList 利用Ajax联动

页面代码: [xhtml] view plaincopy td style="text-align: right; width: 100px;">       城市/区域:   t...

DropDownList无刷新ajax二级联动效果

页面主要代码:                                                                  Width="200" Aut...

MVC5中后台提供Json,前台处理Json,绑定给Dropdownlist的例子

MVC5中后台提供Json,前台处理Json,绑定给Dropdownlist的例子: 前端:  我们以前在前端定义了两个控件: div class="row"> ...

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

MVC DropDownList 利用Ajax联动

页面代码: [xhtml] view plaincopy td style="text-align: right; width: 100px;">       城市/区域:   t...

MVC2 与 JQuery 的 Ajax 实现局部刷新的问题

目标:两个DropDownList 控件,DDL1,DDL2。实现DDL1 选择后,根据选定值到数据库查询数据,返回并绑定到DDL2。 实现:JQuery中的$.Ajax方法以及MVC中的Parti...

ajax.dll 实现DropDownList无刷新联动

  • 2008年10月26日 22:02
  • 45KB
  • 下载

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

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

MVC3 ASP.NET AJAX DropDownList 级联

  • 2013年10月30日 00:10
  • 4KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Mvc Ajax Dropdownlist 联动实现
举报原因:
原因补充:

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