Insert Options (Items) in DropDownList based on another using jQuery Ajax in ASP.Net MVC

nabilabo...

SOLVED CLOSED ACTIVE ANSWERED
User: nabilabolo
Posted: on Jun 09, 2020 03:25 AM
Forum: ASP.Net MVC
Answer: 1
Views: 8798
Sample Code: Download

Hi,

I have two dropdown boxes which is material and quantity. In material dropdown, after i choose the material, the dropdown quantity should be display the max quantity of that material.

Eg;

I choose Pencil as material, and the total inventory of pencil is 4, so the quantity dropdown should display 1,2,3 and 4.

How should I do that?

Model:

public class ItemModel
{  
    public string Requester_id { get; set; }       
    public int item_id { get; set; }
    public string req_material { get; set; }
    public Nullable<int> req_quantity { get; set; }
    
    public string Material { get; set; }
     public int Quantity { get; set; }
}

View:

<div id="tabs-2">
    @using (Html.BeginForm("AddMaterial", "Home", FormMethod.Post))
    {
        @Html.AntiForgeryToken()
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
    <div class="form-inline">
 
        <label for="Material" class="mr-sm-2">Material:</label>
        <select>
            <option value="0">Select</option>
            @foreach (var item in ViewBag.material)
            {
                <option value='@item.ID'>@item.Material</option>
            }
        </select>
        <span><label for="st" class="mr-sm-2">Quantity:</label></span>
        <select>
            <option value="0">Select</option>
            @{
                for (int i = 1; i <= 100; i++)
                {
                    <option value="@i">@i</option>
                }
            }
        </select>
 
        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Save" class="btn btn-primary" />
            </div>
        </div>
    </div>
    }
    <br />
 
    @webGrid.GetHtml(
        htmlAttributes: new { @id = "WebGrid", @class = "table table-striped table-hover" },
        columns: webGrid.Columns(
                 webGrid.Column("No.", format: item => item.WebGrid.Rows.IndexOf(item) + 1 + Math.Round(Convert.ToDouble(webGrid.TotalRowCount / webGrid.PageCount) / webGrid.RowsPerPage) * webGrid.RowsPerPage * webGrid.PageIndex),
                 webGrid.Column("req_material", "Material"),
                 webGrid.Column("req_quantity", "Quantity")
                ))       
</div>

Controller :

[HttpPost]
public ActionResult AddMaterial(ItemModel model, string id)
{
    TempData["Selected"] = "1";
    id = Convert.ToString(TempData["NewID"]);
    try
    {
        Material_Item item = db.Material_Item.Where(x => x.item_id == model.item_id).FirstOrDefault();
 
        item = new Material_Item();
 
        item.item_id = model.item_id;
        item.Requester_id = id;
        item.req_quantity = model.req_quantity;
        item.req_material = model.req_material;
        
 
        db.Material_Item.Add(item);
        db.SaveChanges();
 
    }
    catch (Exception)
    {
 
    }
 
    return RedirectToAction("FormRequest", "Home");
}

dharmend...

0 3

Reply
ANSWER
User: dharmendr
Replied: on Jun 10, 2020 05:00 AM
Report

Hi nabilabolo,

Refer below sample. Use Ajax call to add DropDownList option based on Material.

For this example i have not use database to select record. You need to fetch the data from database.

Model

public class ItemModel
{
    public string Requester_id { get; set; }
    public int item_id { get; set; }
    public string req_material { get; set; }
    public Nullable<int> req_quantity { get; set; }

    public string Material { get; set; }
    public int Quantity { get; set; }
}

Controller

public class HomeController : Controller
{
    // GET: /Home/
    public ActionResult Index()
    {
        TempData["material"] = GetMaterial();
        return View(new ItemModel());
    }

    [HttpPost]
    public ActionResult AddMaterial(ItemModel model, string id)
    {
        return RedirectToAction("Index", "Home");
    }

    public int GetQuantity(string id)
    {
        return Convert.ToInt32(GetMaterial().Where(x => x.ID == Convert.ToInt32(id)).Select(x => x.Mat_Quantity).FirstOrDefault());
    }

    private static List<Materials> GetMaterial()
    {
        List<Materials> materials = new List<Materials>();
        materials.Add(new Materials { ID = 1, Material = "2B Pencils", Mat_Quantity = 150 });
        materials.Add(new Materials { ID = 2, Material = "A4 Size Paper (White paper)", Mat_Quantity = 13 });
        return materials;
    }

    public class Materials
    {
        public int ID { get; set; }
        public string Material { get; set; }
        public int Mat_Quantity { get; set; }
    }
}

View

<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<Dependent_DropDownList_MVC.Models.ItemModel>" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Index</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#ddlMaterial").change(function () {
                debugger;
                var value = 0;
                if ($(this).val() != "") {
                    value = $(this).val();
                }
                var obj = {};
                obj.id = value;

                $.ajax({
                    type: "POST",
                    url: "/Home/GetQuantity",
                    data: JSON.stringify(obj),
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (response) {
                        var ddlddlQuantities = $("#ddlQuantity");
                        ddlddlQuantities.empty();
                        for (var i = 1; i <= response; i++) {
                            var option = $("<option />");
                            option.html(i);
                            option.val(i);
                            ddlddlQuantities.append(option);
                        }
                    },
                    failure: function (response) {
                        alert(response.responseText);
                    },
                    error: function (response) {
                        alert(response.responseText);
                    }
                });
            });
        });
    </script>
</head>
<body>
    <div>
        <%using (Html.BeginForm("AddMaterial", "Home", FormMethod.Post))
          { %>
        <div class="form-inline">
            <label for="Material" class="mr-sm-2">
                Material:</label>
            <select id="ddlMaterial">
                <option value="0">Select</option>
                <%foreach (var item in (IEnumerable<Dependent_DropDownList_MVC.Controllers.HomeController.Materials>)TempData["material"])
                  {%>
                <option value='<%:item.ID%>'>
                    <%:item.Material%></option>
                <%} %>
            </select>
            <%:Html.HiddenFor(m => m.req_material)%>
            <span>
                <label for="st" class="mr-sm-2">
                    Quantity:</label></span>
            <select id="ddlQuantity">
                <option value="0">Select</option>
                <%{
                      for (int i = 1; i <= 100; i++)
                      {%>
                <option value="<%:i%>">
                    <%:i%></option>
                <%}%>
                <%}%>
            </select>
            <%:Html.HiddenFor(m => m.req_quantity)%>
            <div class="form-group">
                <div class="col-md-offset-2 col-md-10">
                    <input id="btnSaveMaterial" type="submit" value="Save" class="btn btn-primary" />
                </div>
            </div>
        </div>
        <%} %>
    </div>
</body>
</html>

Screenshot

Insert Options (Items) in DropDownList based on another using jQuery Ajax in ASP.Net MVC

Company

Explore

Follow us

Contact Us