Question

我是ASP.Net MVC的新手。我一直在寻找大约2个小时，似乎无法得到它。我有一个数据库中的产品下拉列表。我想要的是实时填写文本框描述，具体取决于我的下拉列表中的选定项目。

这是我到目前为止所拥有的：

填充我的下拉列表

public ActionResult Index()
{
        IEnumerable<SelectListItem> items = db.Products.Select(i => new SelectListItem
        {
            Value = i.ProductName,
            Text = i.ProductName
        }
      );
        ViewBag.ProductItems = items;
        return View(); 
}

我的下拉列表

@using (Ajax.BeginForm("GetDescriptionByProductName", "PurchaseOrder", new AjaxOptions{ InsertionMode = InsertionMode.Replace,UpdateTargetId = "description"}))
        {
            @Html.DropDownList("ProductItems", (SelectList)ViewBag.Values, new { onchange = "this.form.submit();" }) 
        }

这是我的控制器中的ActionResult

[HttpPost]
public ActionResult GetDescriptionByProductName(string ProductItems)
{
    var data = db.Products.Where(x => x.Description.Contains(ProductItems));
    return RedirectToAction("Index");
}

This is what it looks like. I select an item from the dropdownlist and it will autofill in the textbox description

更新：所有这些现在都是直接我回到索引页面并将其重置为空白的默认值

Answer 1

从您给出的代码片段中，我认为每次都无法访问服务器以获取产品说明。我在这里创造了一个小提琴 - https://dotnetfiddle.net/1lyHWW

这就是我所做的：

为产品创建模型 - 您可以重复使用产品模型

public class Product
    {
        public int Id { get; set; }         
        public string Display { get; set; }         
        public string Description { get; set; }
    }

并在Action方法中：

[HttpGet]
public ActionResult Index()
{
    var productsList = new List<Product>
    {
    new Product{Id= 1,Display = "Product 1", Description = "prod 1 description"},
    new Product{Id= 2,Display = "Product 2", Description = "prod 2 description"},
    new Product{Id= 3,Display = "Product 3", Description = "prod 3 description"},
    new Product{Id= 4,Display = "Product 4", Description = "prod 4 description"},
    new Product{Id= 5,Display = "Product 5", Description = "prod 5 description"},
            };

  ViewBag.Products = productsList;
  return View();
}

.cshtml

@using (Html.BeginForm())
            {
                <select name="drpProducts" id="drpProducts">
                @{
                    foreach(var product in ViewBag.Products)
                    {
                        <option value="@product.Id"
                            data-desc="@product.Description">
                            @product.Display
                        </option>
                    }
                }
                </select>

            <input type="text" id="txtProductDescription"/>
            }



 <script>
        $(document).ready(function(){

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

                var selectedItemDesc = $("#drpProducts option:selected").attr("data-desc");
                $("#txtProductDescription").val(selectedItemDesc);

                });

        });
    </script>

注意 - 我在这种方法中使用了jQuery

Answer 2

尝试以下步骤
1.更改事件以更改下拉选项
2.在更改事件中将ajax cal设置为controller-＆gt;行动
3.在文本框中显示收到的数据

Answer 3

在剃刀视图（.cshtml文件）中，您可以使用以下内容：

@using (Html.BeginForm("GetDescriptionByProductName", "PurchaseOrder"))
{
    <div class="form-group">
        @Html.Label("Textbox")
        @Html.TextBox("txt", (string)ViewBag.selected)
        @Html.DropDownList("ProductItems", (List<SelectListItem>)ViewBag.Values,
             new { onchange = "this.form.submit();" })
        <input type="submit" value="Submit"/>
    </div>
}

然后在你的控制器里面，像这样：

public ActionResult GetDescriptionByProductName(string ProductItems)
{
    var query = from d in db.Products
                where d.ProductName == ProductItems
                select d;

    // Here you can query your list of items for the passed in ProductItems
    ViewBag.selected = String.IsNullOrEmpty(ProductItems)?"NONE": ProductItems;

    return Json(query);
}

或者您也可以使用ajax，因为其他人建议使用$.ajax调用相同的操作方法并传递您可以使用jQuery获取的selectedItemId：$('select[name="ProductItems"]').val()。

希望这有帮助。

尝试根据我的下拉列表中的选定值填充文本框

3 个答案: