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

Question

我尝试搜索帖子，也没有任何结果，也许我没有使用正确的词。

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

表单有一个dropdownlist 和一个textbox。

dropdownlist 由数据库中的值填充。

textbox 将根据选定的dropdownlist 值填充来自同一个表和dropdownlist 的值。

我的目标是在我的视图中从我的controller 调用一个函数，这可能吗？

下面是我的代码

模型

namespace InsGE.Models
{
    public class PersonModel
    {
        public List<SelectListItem> Fruits { get; set; } //DropDownList

        public string Names { get; set; } //Textbox
        
    }
}

控制器

namespace InGE.Controllers
{
    public class HomeController : Controller
    {
        private static List<SelectListItem> PopulateFruits()
        {
            string sql;

            List<SelectListItem> items = new List<SelectListItem>();

            string constr = ConfigurationManager.ConnectionStrings["cn"].ConnectionString;

            using (MySqlConnection con = new MySqlConnection(constr))
            {
                sql = @String.Format("SELECT * FROM `dotable`; ");

                using (MySqlCommand cmd = new MySqlCommand(sql))
                {
                    cmd.Connection = con;
                    con.Open();

                    using (MySqlDataReader sdr = cmd.ExecuteReader())
                    {
                        while (sdr.Read())
                        {
                            items.Add(new SelectListItem
                            {
                                Text = sdr["sName"].ToString(),
                                Value = sdr["sCode"].ToString()
                            });
                        }
                    }
                    con.Close();
                }
            }

            return items;
        }

        [HttpPost]
        public ActionResult Index(PersonModel person)
        {    
            string sNames = person.Names;

            PersonModel fruit = new PersonModel();
            fruit.Fruits = PopulateFruits();

            return View();
        }

        public ActionResult Index()
        {
            return View();
        }

        public ActionResult About()
        {
            ViewBag.Message = "Your application description page.";

            return View();
        }

        public ActionResult Contact()
        {
            ViewBag.Message = "Your contact page.";

            return View();
        }
    }
}

查看

@Html.DropDownListFor(m => m.Fruits, Model.Fruits, "Please select")
@Html.TextBoxFor(m => m.Names)

Answer 1

您可以在使用 javascript 在下拉列表中选择项目时填充文本框。

以下代码应该可以帮助您朝着正确的方向前进。将代码放在视图的底部。

@section scripts
{
    <script>

        document.getElementById('ddlFruits').addEventListener('change', function() {
            var textBox = document.getElementById('textBoxId');
            textBox.value = this.options[this.selectedIndex].value;
        });
        
    </script>
{

当页面加载时，我们会在下拉列表中添加一个addEventListener，该函数会在用户每次在下拉列表中选择水果时运行。当用户选择水果时，'change' 事件中的function 会触发并使用下拉菜单中的选定文本更新文本框。

基于 cmets 更新

添加以下控制器方法：

[HttpGet]
public ActionResult GetGps(string fruit)
{
    PersonModel fruit = new PersonModel();
    var gps = fruit.GetGps(fruit);
    return gps;
}

你需要 jQuery 才能工作：https://jquery.com/download/

在脚本标签中添加以下 jQuery 代码：

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

    var fruit = this.text();

    $.ajax({
        url: '/Home/GetGps',
        type: "GET",
        data: { fruit },
        success: function (gps) {
            $("#textBox").val(gps);
        },
        error: function (err) {
            console.log(err.statusText);
        }
    });
}