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

Question

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

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

表格有一个dropdownlist和一个textbox。

dropdownlist 填充了数据库中的值。

textbox 将根据所选的 dropdownlist 值填充来自相同 table 和 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 将触发并使用下拉列表中的选定文本更新文本框。

根据评论更新

添加以下控制器方法：

[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);
        }
    });
}

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

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

c#

asp.net

asp.net-mvc

textbox

dropdown

根据评论更新