使用 asp.net mvc 的级联下拉菜单

Question

我有一个交易者类型的下拉列表，在选择时应该填充交易者的下拉列表。 我的看法是这样的：

`<ul>
                <li>
                    <label>
                        <span class="mandatory">*</span>Trader Type:</label>
                    <%=Html.DropDownList("TraderType", (SelectList)ViewData["TraderType"])%>
                    <%--<select id="ddlTraderType" name="TraderType">
                        <%foreach (SelectListItem item in (SelectList)ViewData["TraderType"])
                          { %>
                        <option value="<%=item.Value %>">
                            <%=item.Text %></option>
                        <%} %>
                    </select>--%>
                    <span class="tagline">Select a Trader type from here<strong></strong></span></li>
                <li>
                    <label>
                        <span class="mandatory">*</span>Trader:</label>
                    <select name="Trader" id="Trader">
                    </select>
                    <span class="tagline">Select a Trader from here<strong></strong></span></li>
</ul>`

我尝试使用 JQuery，但无法获取“TraderType”下拉菜单的更改事件。 我的脚本是：

$("TraderType").change(function() {
        alert("Change");
        $.ajax({ url: $("#ListTraders").attr("action"),
            type: 'GET',
            contentType: "application/json; charset=utf-8",
            cache: false,
            data: { part: $("#TraderType").val() },
            dataType: 'json',
            async: false,
            success: function(data) {
            if ((data.lstTraders.length) > 0) {
                    for (var count = 0; count < data.lstTraders.length; count++) {
                        $("#Trader").append("<option value='" + data.lstTraders[count].Id.toString() + "'>" +
                            data.lstTraders[count].TraderName + "</option>");
                    }
                }
            }
        });
    });

控制器中的代码是：

public JsonResult ListTraders(string trdrTypeId)
    {

        IList<HSTrader> lstTraders = new List<HSTrader>();
        Build objBld = new Build();
        Document objDoc = new Document();

        string message = string.Empty;
        bool result = true;
        try
        {
            int trdrType = Convert.ToInt32(trdrTypeId);
            lstTraders = objBld.GetTradersByTrdrTypeId(trdrType);
        }
        catch (Exception ex)
        {
            message = ex.Message;
            result = false;
        }
        return Json(new { Success = result, Message = message, lstTraders = lstTraders });}

请帮助我。

Answer 1

$("#TraderType").change(function() {

});

你错过了# 至于控制器中的操作，请尝试更改 POST 中的 VERB

  $.ajax({ url: $("#ListTraders").attr("action"),
        type: 'POST',

像这样改变你的控制器：

[HttpPost]
public JsonResult ListTraders(string trdrTypeId)

...当你返回 JSON 时，你应该改变这个：

return Json(new { Success = result, Message = message, lstTraders = lstTraders }, JsonRequestBehavior.DenyGet);

还有一点，这个参数必须匹配

data: { trdrTypeId: $("#TraderType").val() },

public JsonResult ListTraders(string trdrTypeId)

Answer 2

我建议你使用这里的控件；

http://awesome.codeplex.com/

演示：http://demo.aspnetawesome.com/AjaxDropdownDemo

Ajax Dropdown 控件可以轻松用于级联下拉菜单。

此外，这里还有许多其他有用的控件。

Answer 3

jQuery 语法是不是错了？尝试在元素 ID 前添加哈希：

$("#TraderType").change(function...

Answer 4

苏雅，

确保您的交易者点击在实时事件内（以及在文档就绪事件内），即：

<script type="text/javascript">
    $(document).ready(function() {
        $("#TraderType").live('change', function() {...});
    });
</script>

希望这会有所帮助..

Answer 5

@Suja：这就是我所做的并且有效。 我也删除了这一行 => contentType: "application/json; charset=utf-8",

HTML：

<ul>
    <li>
        <label>
            <span class="mandatory">*</span>Trader Type:</label>
        <%=Html.DropDownList("TraderType", (SelectList)ViewData["TraderType"])%>
        <span class="tagline">Select a Trader type from here<strong></strong></span>
    </li>
    <li>
        <label>
            <span class="mandatory">*</span>Trader:</label>
        <select name="Trader" id="Trader"></select>
        <span class="tagline">Select a Trader from here<strong></strong></span>
   </li>
</ul>

Javascript：

<script type="text/javascript">
$(document).ready(function() {
    $("#TraderType").change(function() {
        $.ajax({
            url: '<%=Url.Action("ListTraders", "Test001")%>',   // MY SAMPLE
            type: 'POST',           
            // contentType: "application/json; charset=utf-8",
            cache: false,
            data: { trdrTypeId: $("#TraderType").val() },
            dataType: 'json',
            async: false,
            success: function(data) {
                if ((data.lstTraders.length) > 0) {
                    for (var count = 0; count < data.lstTraders.length; count++) {
                        $("#Trader").append("<option value='" + data.lstTraders[count].Id.toString() + "'>" +
                            data.lstTraders[count].TraderName + "</option>");
                    }
                }
            }
        });
    });
});
</script>

C#

[HttpPost]
public JsonResult ListTraders(string trdrTypeId)
  {
  return (Json(true, JsonRequestBehavior.DenyGet));
  }

Answer 6

1.

 <%:Html.DropDownList("SubDepartment", (SelectList)ViewData["SelectListSubDepartment"], new { id = "SubDepartment", @class = "combobox" })%>

提供默认列表（如果有）。

2。 创建一个javascript函数

 <script type="text/javascript">
        function onddlChange() {
            $.ajax({
                contentType : 'application/json; charset= utf-8',
                dataType: 'json',
                type : 'POST',
                url : "/ControllerName/IndexChk",
                success : function(data){
                    var markup = '';
                    for (var x = 0; x < data.length; x++) {
                        markup += "<option value='" + data[x].Value + "'>" + data[x].Text + "</option>";
                    }
                    $('#SubDepartment').html(markup).show();
                },
                error: function(ret){
                    alert(ret);
                }

            });
        }
    </script>

3。现在提供来自 Controller 操作方法的列表。

public JsonResult IndexChk(string selectedvalue = null)
    {
        List<Sbu> departmentList = new List<Sbu>()
        {
            new Sbu { Id = 1, Name="SubPublishing"},
            new Sbu { Id = 2, Name="SubSoftware"},
            new Sbu { Id = 3, Name="SubEngineering"},
            new Sbu { Id = 4, Name="SubShipping"},
            new Sbu { Id = 5, Name="SubTranscription"}
        };
        var selectList = new SelectList(departmentList, "id", "name", selectedvalue);
        return Json(selectList, JsonRequestBehavior.AllowGet);
    }

就是这样，现在在 onclick、onchange 等任何事件上调用创建的 javascript 函数。