jQuery Ajax MVC 下拉框联动

无刷新下拉框联动方法：

 

Controllers代码

       public JsonResult DH_Change(string DH_ID)
        {
            List<SelectListItem> TeamLeaderList = FinanceDB.Get_TeamLeaderList(DH_ID);
            return Json(TeamLeaderList);
        }

        public JsonResult TL_Change(string TL_ID)
        {
            List<SelectListItem> SalesList = FinanceDB.Get_SalesList(TL_ID);
            return Json(SalesList);
        }

 

后台获取并返回List<SeleceListItem>

public List<SelectListItem> Get_TeamLeaderList(string DH_ID)
        {
            List<SelectListItem> list = new List<SelectListItem>();
            list.Add(new SelectListItem { Value = "", Text = "All" });

            string str = "SELECT distinct child_Staff_ID, child_name ";
            str += "FROM VW_CASH_SLX_USER_TREE t inner join SYN_SLX_USERINFO u ";
            str += "ON t.child_Staff_ID = u.cash_staff_id ";
            str += "INNER JOIN dbo.SYN_SLX_USERSECURITY su on u.userid = su.userid ";
            str += "where su.ISMANAGER = 'T' and ISNULL(child_staff_id, '') <> '' ";

            if (string.IsNullOrEmpty(DH_ID))
            {
                str += "and t.Root_Staff_ID in (select parm_value from parm_tbl where parm_group = 'SALES_DEPT_HEADER') order by child_name";
            }
            else
            {
                str += "and t.Root_Staff_ID in ('" + DH_ID + "') order by child_name";
            }

            try
            {
                using (SqlConnection conn = new SqlConnection(connstr))
                {
                    if (conn.State == ConnectionState.Closed)
                    {
                        conn.Open();
                    }
                    SqlCommand cmd = conn.CreateCommand();
                    cmd.CommandText = str;
                    cmd.CommandType = CommandType.Text;
                    SqlDataReader objDR = cmd.ExecuteReader();

                    while (objDR.Read())
                    {
                        string select_text = objDR["child_name"].ToString();
                        string select_value = objDR["child_Staff_ID"].ToString();                        
                        list.Add(new SelectListItem { Value = select_value, Text = select_text });
                    }

                    cmd.Dispose();
                }
            }
            catch (Exception e)
            {
                throw e;
            }
            return list;
        }

public List<SelectListItem> Get_SalesList(string TL_ID)
        {
            List<SelectListItem> list = new List<SelectListItem>();
            list.Add(new SelectListItem { Value = "", Text = "All" });

            string str = "SELECT distinct child_Staff_ID, child_name ";
            str += "FROM VW_CASH_SLX_USER_TREE t ";
            str += "where ISNULL(child_staff_id, '') <> '' and ";
            str += "t.Root_Staff_ID in ( ";

            if (string.IsNullOrEmpty(TL_ID))
            {
                str += "select parm_value from parm_tbl where parm_group = 'SALES_DEPT_HEADER' ) order by child_name ";
            }
            else
            {
                str += "'" + TL_ID + "') order by child_name";
            }
            
            try
            {
                using (SqlConnection conn = new SqlConnection(connstr))
                {
                    if (conn.State == ConnectionState.Closed)
                    {
                        conn.Open();
                    }
                    SqlCommand cmd = conn.CreateCommand();
                    cmd.CommandText = str;
                    cmd.CommandType = CommandType.Text;
                    SqlDataReader objDR = cmd.ExecuteReader();
                    
                    while (objDR.Read())
                    {
                        string select_text = objDR["child_name"].ToString();
                        string select_value = objDR["child_Staff_ID"].ToString();
                        list.Add(new SelectListItem { Value = select_value, Text = select_text });
                    }

                    cmd.Dispose();
                }
            }
            catch (Exception e)
            {
                throw e;
            }
            return list;

        }

 

Ajax 动态更新

// Report sales change.
function DH_onChange() {
    var dh_id = $("#salesdephead_report").val();
    $.ajax({
        type: 'get',
        url: '/Reports.mvc/DH_Change/',
        data: { DH_ID: dh_id },
        contentType: 'application/json;charset=uft-8',
        dataType: 'json',
        success: function(data) {
        var selectlist =data;
        $("#teamleader_report").empty();
        for(i=0;i<selectlist.length;i++)
        {
          $("#teamleader_report").append("<option value='"+data[i].Value+"'>"+data[i].Text+"</option>");
        }
        },
        error: function() {
            alert("faile to request data");
        }
    });
    TL_onChange(dh_id);
}

function TL_onChange(DH_ID) {
    var tl_id;
    if (DH_ID != null && DH_ID != "")
        tl_id = $("#salesdephead_report").val();
    else
        tl_id = $("#teamleader_report").val();
    $.ajax({
        type: 'post',
        url: '/Reports.mvc/TL_Change/',
        data: { TL_ID: tl_id },
        dataType: 'json',
        success: function(data) {
        var selectlist = data;
        $("#requester_report").empty();
        for (i = 0; i < selectlist.length; i++) {
            $("#requester_report").append("<option value='" + data[i].Value + "'>" + data[i].Text + "</option>");
        }
        },
        error: function() {
            alert("faile to request data");
        }
    })
}
//

 

前台HTML代码

Sales Department Head<br />销售部门审批人:
      <%=Html.DropDownList("salesdephead_report", null, new { @style = "width:125px;", onchange = "DH_onChange()" })%>

Team Leader<br />团队组长:
             <%=Html.DropDownList("teamleader_report", null, new { @style = "width:125px;", onchange = "TL_onChange('')" })%>

 

但是我们都知道，JQuery默认是异步执行的，所谓异步就是在ajax提交的过程当中，程序已经在执行下面的代码，两者是同时在进行的。有时候，我们却不希望ajax异步执行，而是想要等ajax返回数据后再作操作，那就需要做一点点的小改动。

Jquery的ajax还有async这么一个控制同步或者异步的属性。

再ajax中添加“ async：false, ”， 就会变成是同步执行了，也就是再ajax返回数据后才继续下面的代码。

其实除了修改属性async的方法外，还能通过传入一个函数解决问题。

以上，是今天所用到得一点知识，希望记录下有帮助到人啦。