Nel Garcia Nel Garcia - 3 months ago 23
ASP.NET (C#) Question

Trying to fill a textbox depending on the selected value on my dropdownlist

Im new to ASP.Net MVC. and Ive been searching for about 2 hours and cant seem to get it.
I have a dropdownlist of products from the database. What i want is to fill the textbox Description on realtime depending on the selected item on my dropdownlist.

Here is what i have so far:

Populate my dropdown list

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


My dropdown list

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


Here is my ActionResult in my Controller

[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

UPDATE: All THIS DOES RIGHT NOW IS DIRECT ME BACK TO INDEX PAGE AND RESETS IT TO THE DEFAULT VALUE WHICH IS BLANK

Answer

From your code given snippet, I dont think its necessary to hit the server everytime to get the product description. I have created a fiddle here - https://dotnetfiddle.net/1lyHWW

This is what I have done:

Created a model for Product - You can reuse your Product model

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

and in Action method:

[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>

Note - I have used jQuery in this approach

Comments