使用 ASP.NET MVC 根据从级联下拉列表中选择的值填充文本框

Question

我尝试搜索帖子，也没有任何结果，可能是我用词不对。

我正在使用 ASP.NET MVC 创建带有表单的网页。

表格有两个dropdownlist和一个textbox.

第一个 dropdownlist 填充了数据库中的值。

第二个 dropdownlist 根据所选的第一个 dropdownlist 值填充级联值。

textbox 将根据所选的第二个 dropdownlist 值填充来自相同 table 和第二个 dropdownlist 的值。

我试过在我的视图中从我的控制器调用一个函数，但没有成功。没有错误，但 textbox 为空。

拜托，你能帮帮我吗

下面是我的代码

查看

@Html.DropDownListFor(m => m.StateId, Model.States, "Select", new { @id = "StateId", @Class = "textarea" })
@Html.TextBoxFor(m => m.GPS, new { @Class = "textarea", placeholder = "GPS" })

@section Scripts {

    @Scripts.Render("~/bundles/jqueryui")
    @Scripts.Render("~/bundles/jqueryval")
    @Scripts.Render("~/Scripts/DatePicker.js");
    @Styles.Render("~/Content/cssjqryUi")

    <script type="text/javascript">
        $(function () {
            $('[id*=StateId]').on('change', function () {
                var fruitId = $(this).find("option:selected").val();
                if (fruitId != "") {
                    $.ajax({
                        type: "POST",
                        url: "/Home/GetFruitName",
                        data: "id=" + fruitId,
                        success: function (response) {
                            if (response != "") {
                                $('[id*=GPS]').val(response);
                            } else {
                                $('[id*=GPS]').val('');
                            }
                        }
                    });
                } else {
                    $('[id*=GPS]').val('');
                }
            });
        });

        $(function () {
            $("select").each(function () {
                if ($(this).find("option").length <= 1) {
                    $(this).attr("disabled", "disabled");
                }
            });

            $("select").change(function () {
                var value = 0;
                if ($(this).val() != "") {
                    value = $(this).val();
                }
                var id = $(this).attr("id");
                $.ajax({
                    type: "POST",
                    url: "/Home/AjaxMethod",
                    data: '{type: "' + id + '", value: "' + value + '"}',
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (response) {
                        var dropDownId;
                        var list;
                        switch (id) {

                                case "StateId":
                                dropDownId = "#CityId";
                                list = response.Cities;
                                PopulateDropDown("#CityId", list);

                                break;
                        }

                    },
                    failure: function (response) {
                        alert(response.responseText);
                    },
                    error: function (response) {
                        alert(response.responseText);
                    }
                });
            });
        });

        function DisableDropDown(dropDownId) {
            $(dropDownId).attr("disabled", "disabled");
            $(dropDownId).empty().append('<option selected="selected" value="">Select</option>');
        }

        function PopulateDropDown(dropDownId, list) {
            if (list != null && list.length > 0) {
                $(dropDownId).removeAttr("disabled");
                $.each(list, function () {
                    $(dropDownId).append($("<option>/option>").val(this['Value']).html(this['Text']));
                });
            }
        } 
    </script>
}

型号

[Required]
[Display(Name = "StateId")]
public string StateId { get; set; }

[Required]
[Display(Name = "States")]
public List<SelectListItem> States = new List<SelectListItem>();

public string value { get; set; }

控制器

    public JsonResult AjaxMethod(string type, string value)
    {
        PersonModel model = new PersonModel();
        
        //Second DropDownList
        model.States = PopulateDropDown(" SELECT * FROM `tbl_1` " +
            " WHERE `Node_Code` = '" + value + "';", "Node_Name", "Node_Code");

        //GET value tod textbox GPS
        GetGps(value);

        return Json(model);
    }


    public JsonResult GetGps(string value)
    {
        return Json(GetGpsById(value), JsonRequestBehavior.AllowGet);
    }

    private static string GetGpsById(string value)
    {
        string sql;
        List<SelectListItem> items = new List<SelectListItem>();
        string constr = ConfigurationManager.ConnectionStrings["cn"].ConnectionString;
        using (MySqlConnection con = new MySqlConnection(constr))
        {
            sql = string.Format("SELECT CONCAT(`LAT`, ' - ', `LON`) AS GPS FROM `tbl_1` WHERE Node_Code = @Id");
            using (MySqlCommand cmd = new MySqlCommand(sql))
            {
                cmd.Connection = con;
                cmd.Parameters.AddWithValue("@Id", value);
                con.Open();
                string name = Convert.ToString(cmd.ExecuteScalar());
                con.Close();

                return name;
            }
        }
    }

    [HttpPost]
    public ActionResult Index(PersonModel person)
    {
       //First DropDownList            
       person.Countries = PopulateDropDown(" SELECT * FROM `tbl_master`;", "Name_City", "Name_code");

        return View(person);
    }

    private static List<SelectListItem> PopulateDropDown(string query, string textColumn, string valueColumn)
    {
        List<SelectListItem> items = new List<SelectListItem>();
        string constr = ConfigurationManager.ConnectionStrings["cn"].ConnectionString;
        using (MySqlConnection con = new MySqlConnection(constr))
        {
            using (MySqlCommand cmd = new MySqlCommand(query))
            {
                cmd.Connection = con;
                con.Open();
                using (MySqlDataReader sdr = cmd.ExecuteReader())
                {
                    while (sdr.Read())
                    {
                        items.Add(new SelectListItem
                        {
                            Text = sdr[textColumn].ToString(),
                            Value = sdr[valueColumn].ToString()
                        });
                    }
                }
                con.Close();
            }
        }

        return items;
    }

更新

    public JsonResult AjaxMethod(string type, string value)
    {
        PersonModel model = new PersonModel();
        
        //Second DropDownList
        model.Cities = PopulateDropDown(" SELECT * FROM `tbl_1` " +
            " WHERE `Node_Code` = '" + value + "';", "Node_Name", "Node_Code");

        //GET value tod textbox GPS
        model.GPS = GetGps(value).ToString();

        return Json(model);
    }

Answer 1

您的问题是您从不使用模型的 GPS 属性：

success: function (response) {
    var dropDownId;
    var list;
    switch (id) {
        case "StateId":
          dropDownId = "#CityId";
          list = response.Cities;
          PopulateDropDown(dropDownId, list); // You set dropDownId, might as well use it
          $("#GPS").val(response.GPS); // Added to set text in textbox
          break;
    }
}

在你的控制器中，

model.GPS = GetGpsById(value); // this is already a string

而不是

model.GPS = GetGps(value).ToString(); // this is the string representation of a jsonified string

使用 ASP.NET MVC 根据从级联下拉列表中选择的值填充文本框

Populate a textbox based on selected value from cascading dropdown using ASP.NET MVC

c#

asp.net

asp.net-mvc

textbox

dropdown