javascript - 级联下拉列表(SubLocality)在 asp.net mvc 中不起作用-6ren

javascript - 级联下拉列表(SubLocality)在 asp.net mvc 中不起作用

转载作者：行者123 更新时间：2023-12-01 05:39:36

我有三个下拉列表。城市下拉列表的第一个操作方法是---

            public ActionResult Create()
            {
        List<SelectListItem> li = new List<SelectListItem>();
        li.Add(new SelectListItem { Text = "Select your City", Value = "----" });
        li.Add(new SelectListItem { Text = "Faridabaad", Value = "Faridabaad" });
        li.Add(new SelectListItem { Text = "Greater Noida", Value = "Greater Noida" });
        li.Add(new SelectListItem { Text = "Gurgaon", Value = "Gurgaon" });
        li.Add(new SelectListItem { Text = "Noida", Value = "Noida" });
        li.Add(new SelectListItem { Text = "New Delhi", Value = "New Delhi" });
        ViewData["City"] = li;
        return View();
    }

然后我的“地点”下拉列表的操作方法会随着我们更改城市名称而变化，如下所示------

        public JsonResult LoadLocalities(string id)
    {
        List<SelectListItem> localities = new List<SelectListItem>();
        switch(id)
        {
      case"New Delhi":
         localities.Add(new SelectListItem { Text = "Select your locality", Value = "0" });
                localities.Add(new SelectListItem{ Text ="East Delhi", Value = "1" });
                    localities.Add(new SelectListItem{ Text ="West Delhi", Value = "2" });
                        localities.Add(new SelectListItem{ Text ="North Delhi", Value = "3" });
                        localities.Add(new SelectListItem { Text = "South Delhi", Value = "4" });
                        break;           
        }
        return Json(new SelectList(localities, "Value", "Text"));
    }

最后一个随着地点名称变化而变化的子地点下拉菜单的操作方法是这样的---

      public JsonResult LoadSubLocalities(string id)
       {
        List<SelectListItem> sublocalities = new List<SelectListItem>();
        switch (id)
        {
            case"1":
                sublocalities.Add(new SelectListItem { Text = "Select your sublocality", Value = "0" });
                sublocalities.Add(new SelectListItem { Text = "Region1", Value = "1" });
                sublocalities.Add(new SelectListItem { Text = "Region2", Value = "2" });
                break;
        }
        return Json(new SelectList(sublocalities, "Value", "Text"));
    }

现在查看页面是这样的------

        <!DOCTYPE html>
        <head>
        <title></title>
<script src="~/Scripts/jquery-2.1.4.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>   
 </head>
 <body>
 <div id="map_canvas" style="width: 800px; height: 700px; float:left"></div>
  @using (Html.BeginForm())
  {
    @Html.AntiForgeryToken()
    @Html.ValidationSummary(true)

    <fieldset>
        <legend>Enter the Project Details</legend>
        <div class="editor-label">
            @Html.LabelFor(model => model.City)
        </div>
        <div class="editor-field">
            @if (ViewData.ContainsKey("City")){
            @Html.DropDownListFor(model => model.City, ViewData["City"] as List<SelectListItem>, new { style = "width:250px", @class = "DropDown1"})
                    @Html.ValidationMessageFor(model => model.City)
            }
    </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.Locality)
        </div>
        <div class="editor-field">
            @Html.DropDownList("Locality", new SelectList(string.Empty,"Value","Text"),"Please Select a locality", new { style = "width:250px", @class = "DropDown1" })
            @Html.ValidationMessageFor(model => model.Locality)
        </div>
        <div class="editor-label">
            @Html.LabelFor(model => model.SubLocality)
        </div>
        <div class="editor-field">
            @Html.DropDownList("SubLocality", new SelectList(string.Empty, "Value", "Text"), "Please Select a sub locality", new { style = "width:250px", @class = "DropDown1" })
            @Html.ValidationMessageFor(model => model.SubLocality)
        </div>
          <p>
            <input type="submit" value="Save Project" />
           </p>
           </fieldset>

现在我的javaScript代码是这样的，我编写了代码从 Controller 获取城市，然后随着城市名称的更改而更改位置，并随着位置名称的更改而更改子位置名称-----

        <script type="text/javascript">        
        $(document).ready(function () {
        $("#City").change(function () {
            $("#Locality").empty();
            $.ajax({
                type: 'POST',
                url: '@Url.Action("LoadLocalities","Project")',
                dataType: 'json',
                data: { id: $("#City").val() },
                success: function (localities) {
                    $.each(localities, function (i, locality) {
                        $("#Locality").append('<option value="' + locality.Value + '">' +
                             locality.Text + '</option>');
                    });
                },
                error: function (ex) {
                    alert('Failed to retreive Locality.' + ex);
                }
            });
            return false;
        })
                $("#Locality").change(function () {
                $("#SubLocality").empty();
                $.ajax({
                    type: 'POST',
                    url: '@Url.Action("LoadSubLocalities")',
                    dataType: 'Json',
                    data: { id: $("Locality").val() },
                    success: function (sublocalities) {
                        $.each(sublocalities, function (i, sublocality) {
                            $("#SubLocality").append('<option value="' + sublocality.Value + '">' +
                                 sublocality.Text + '</option>');
                        });
                    },
                    error: function (ex) {
                        alert('Failed to retrieve SubLocality.' + ex);
                    }
                });
                return false;
            })
            });
         </script>
       }

现在，我的问题是，我的地区在更改城市名称时工作正常，但子地区下拉列表不适用于地区名称的更改---

最佳答案

你的原因$("#Locality").change(function () {不起作用是因为以下行

data: { id: $("Locality").val() },

返回undefined 。必须是

data: { id: $("#Locality").val() }, // add hash

但是正确的方法是使用

data: { id: $(this).val() },

为了避免再次遍历DOM来获取 id="Locality" 的元素

您的代码还有许多其他问题，特别是在验证和返回 View if ModelState 方面。无效

生成List<SelectListItem>时，不添加标签选项(即 sublocalities.Add(new SelectListItem { Text = "Select your sublocality", Value = "0" }); )。您正在给标签选项一个值意味着它始终有效。按照目前的情况，您可以以及删除 @Html.ValidationMessageFor()有关联每个下拉菜单。
切勿给出SelectList与您的属性(property)名称相同绑定(bind)到(在您的情况下 City )
在您的LoadLocalities()中和LoadSubLocalities()方法你首先创建List<SelectListItem>然后创建一个新的 SelectList (即 IEnumerable<SelectListItem> )所以它只是不必要的额外开销。无论如何，客户并不知情什么是 C# 类，而您只返回两倍的数据根据需要跨过电线( Selected 、 Disabled 和 Group您从未使用过的属性)。相反，只需传回一个包含 2 个属性的匿名对象的集合(对于选项值和文本)

关于javascript - 级联下拉列表(SubLocality)在 asp.net mvc 中不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31525823/

文章推荐： perl - 查找多维数组大小

文章推荐： perl - 更改 DBIx 类结果类的继承树？

asp.net - ASP.Net MVC 与经典 ASP 有何不同(不是 ASP.Net——原始 ASP)
我试图对 ASP.Net MVC 有一个高层次的理解，我开始意识到它看起来很像原始的 ASP 脚本。过去，我们将“模型”/业务逻辑代码组织到 VBScript 类或 VB COM 组件中。当然，现在
asp.net - ASP Repeater 前面的项目总数 asp
我已经搜索了一段时间，但似乎找不到答案。我想在我的旋转木马中显示一个计数器，左边是当前项目(工作)，左边是项目总数。我的代码:
asp.net - ASP/ASP.NET 短标记的名称
. 最佳答案 Scott Gu 称这些为代码块。这就是我的看法。 http://weblogs.asp.net/scottgu/archive/2010/04/06/new-lt-gt-syntax
asp.net - 我可以将 asp.net 4.0 与经典 asp 结合使用，还是可以将经典 asp 转换为 asp.net？
我有一个使用 Visual Studio 2010/.net 4/VB 制作的网站。我真的很喜欢我发现的 FAQ 系统的布局，因为它很简单，但它是经典的 asp。所以，显然，我不能包括我的母版页布局
asp.net - 为什么 ASP.NET ViewState 保留为 asp :dropdownlist but not an asp:table?
好吧，对于你们许多人来说，这个问题可能有一个非常明显的答案，但它让我难住了。我有一个 asp.net Web 表单，上面有两个控件(嗯，不止这两个，但我们将重点关注这些) - 第一个是 asp:dr
asp.net - asp :UpdatePanel with an ASP. NET 复选框触发器
当我将 ASP.NET 复选框控件设置为 asp.net 更新面板的异步回发触发器时，EventName 属性是什么？最佳答案我相信它是 CheckedChanged。关于asp.net - a
asp.net - 结合经典的 asp 和 asp.net
我有一个用经典 asp 编写的(巨大的)网站。现在我必须切换到 vb.net (razor)。有没有办法将这两个结合起来直到切换完成？有没有办法让应用程序与经典的 asp 和 vb.net 一起工作
asp.net - ASP.NET 页面中的各种 asp 控件
I am creating a products page, where the user selects an option in a radiobuttonlist for example, an
asp.net - 哪个性能最好 : Classic ASP, ASP.NET WebForms 或 ASP.NET MVC？
我最近将一个经典的 ASP 应用程序转换为 ASP.NET 3.5，但我觉得我的经典 ASP 版本要快一些(我不知道可能买家会后悔)。所以你们能帮我解决这个问题吗，让我知道哪个更快，asp、asp.
asp.net - 我无法准确理解 ASP 是什么以及如何上传 ASP 网站
从本周开始，我被要求开始学习如何使用 ASP 开发网站。我通过 XNA 对 C# 有一定的经验，所以这部分对我来说并不是什么麻烦。我一直在关注Music Store Tutorial这需要我设置一个
asp.net - 新项目如何从 ASP.Net 转向经典 ASP
关闭。这个问题需要多问focused 。目前不接受答案。想要改进此问题吗？更新问题，使其仅关注一个问题 editing this post . 已关闭 8 年前。 Improve this ques
asp.net - 如何将页面从 ASP.NET 发布到经典 ASP
我想将一些表单变量发布到经典 ASP 页面中。我不想改变经典的 ASP 页面，因为需要完成大量的工作，以及消耗它们的页面数量。经典的 ASP 页面需要将表单变量 Username 和 Userpas
asp.net - 有什么好的引用资料或工具可用于将 ASP 转换为 ASP.NET？
已结束。此问题正在寻求书籍、工具、软件库等的推荐。它不满足Stack Overflow guidelines 。目前不接受答案。我们不允许提出寻求书籍、工具、软件库等推荐的问题。您可以编辑问题，以便
asp.net - ASP.NET/ASP.NET MVC中类似SSI的功能
在某种程度上，这可能是一个异端问题。我们有一个大型站点，其中许多页面仍在ASP中。通常，并没有真正动态的，而是包括(通过SSI或Server.Execute)定期重新生成的HTML块。看起来好像是一个
asp.net - asp 和 asp.net 之间的区别
关闭。这个问题需要多问focused 。目前不接受答案。想要改进此问题吗？更新问题，使其仅关注一个问题 editing this post . 已关闭 9 年前。 Improve this ques
asp.net - ASP --> ASP.Net : Refactoring steps
我有一个遗留的 ASP 应用程序——在不久的某个时候——需要迁移到 ASP.Net 2.0(以与也在 2.0 中的其他应用程序兼容)。对于这类事情是否有最佳实践，即作为第一步将当前 html、vbs
asp.net - 将经典 ASP 和 ASP.NET Web 窗体转换为 ASP.NET MVC
我目前在一家公司工作，该公司使用 ASP.NET Webforms 和旧 ASP 页面的组合进行 Web 开发。这对于他们当前的项目来说效果很好，但我想说服/建议他们切换到 ASP.NET MVC，因
asp.net - 将表单从 asp 发布到 asp.Net
我有一个经典的 asp 应用程序。我想将该页面的竞赛表格发布到 Asp.Net 表格。原因是我想在进入数据库之前使用我在 Asp.Net 页面中内置的大量逻辑进行验证，而我对 asp 不太了解。更不用
asp.net - ASP.NET 移动 View 是否仅适用于 ASP.NET MVC？或者它们也可以在普通的 ASP.NET 中使用？
我知道在 ASP.NET MVC 中，您可以拥有移动 View 并执行类似 Index.mobile.cshtml 的操作。和 _Layout.mobile.cshtml并且服务器知道将这些 View
asp.net - 从 C# ASP.Net 调用经典 ASP
我需要从一些服务器端 c#.net 代码中调用经典 asp 页面上的 VBscript 函数 - 有谁知道一种干净的方法来做到这一点？在 .net 中重写函数不是一种选择。我会再解释一下这个问题..

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 级联下拉列表(SubLocality)在 asp.net mvc 中不起作用