Change event on Dropdown list ,populate label

Question

Change event on Dropdown list ,populate label

Analyst_SQL 3,576

I have table

Create table #SalesOrder (orderno int,Order_Date date)
Create table #OrderDetail (ID int,orderno int,orderqty int) 

Insert into #SalesOrder values(11,'2023-03-15')
insert into #OrderDetail Values(1,11,25)
insert into #OrderDetail Values(2,11,25)
insert into #OrderDetail Values(3,11,25)
insert into #OrderDetail Values(4,11,25)

Controller action

        public ActionResult Index()
        {
            var orderID = 0;
            ViewBag.orderID = new SelectList(DB.SalesOrders.Where(bt => bt.OrderNo > orderID && bt.Status == "Open"), "Orderno", "Order_Ref_No", "0");
            return View();
        }

        [HttpGet]
        public JsonResult GetOrderno(int orderId)
        {
            int? orderID = DB.SalesOrders.First(a => a.OrderNo == orderId).OrderNo;
            var STATUS_LIST = (from od in DB.OrderDetails
                               where od.OrderNO == orderID
                               select new 
                               {
                                  od.orderqty
                               }).ToList();

         var   sumqty = STATUS_LIST.Select(c => c.orderqty).Sum();
            return Json(sumqty, JsonRequestBehavior.AllowGet);
        }
    }

View

@model ERP_APP.Models.SalesOrderMV

@{

}



<body>
    <div class="col-lg-8">
        <div class="card card-default mb-5">
            <div class="card-header" style="font-size:x-large">Big Bale Form</div>
            <div class="card-body">
                @Html.ActionLink("Create New", "CreateBigBale", null, new { @class = "btn btn-primary" })
                @using (Html.BeginForm("CreateBigBale", "BigBale", FormMethod.Post, new { @target = "_blank" }))
                {
                    @Html.AntiForgeryToken()

                <div class="form-horizontal">
                    <hr />
                    @Html.ValidationSummary(true, "", new { @class = "text-danger" })
                    @Html.HiddenFor(u => u.OrderNo)



                    <div class="form-group">
                        @Html.LabelFor(model => model.OrderNo, "Select Item", htmlAttributes: new { @class = "control-label col-md-2" })
                        <div class="col-md-3">


                            @Html.DropDownList("orderID", (SelectList)ViewBag.OrderNo, "Select", htmlAttributes: new { @class = "form-control", @id = "select2-1" })

                            @Html.ValidationMessageFor(model => model.OrderNo, "", new { @class = "text-danger" })
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-md-3">

                            @Html.DropDownList("DDLPacktype", new List<SelectListItem>()
        {
        new SelectListItem(){ Text= "One", Value = "1"},
        new SelectListItem(){ Text= "Two", Value = "2"},
        new SelectListItem(){ Text= "Three", Value = "3"}, }, "Select ", htmlAttributes: new { @class = "form-control", @id = "select2-2" })


                        </div>
                    </div>
                   


                    <div class="form-group">

                        <div class="col-md-10">
                            @Html.DisplayFor(model => model.orderqty, new { htmlAttributes = new { @class = "form-control", @id = "Order_Qty" } })
                            @Html.ValidationMessageFor(model => model.orderqty, "", new { @class = "text-danger" })
                        </div>


                    </div>


                    <div class="form-group">
                        <div class="col-md-offset-2 col-md-10">
                            <input type="submit" value="Create" class="btn btn-default" />
                        </div>
                    </div>
                </div>
                }
                <div>
                    @Html.ActionLink("Back to List", "AllDesignation")
                </div>
            </div>
        </div>
    </div>
</body>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<script type="text/javascript">
    $(document).ready(function () {
        $("#select2-1").change(function () {
            var orderId = $("#select2-1").val();
            if (orderId != "") {
                GetOrderno(orderId);
            }
            else {
                $("#Order_Qty").empty();

            }

        });
    });

    function GetOrderno(orderId) {
        $.ajax({
            async: true,
            type: 'GET',
            dataType: 'JSON',
            contentType: 'application/json; charset=utf-8',
            url: '/OrderPack/GetOrderno',
            data: { orderId: orderId },
            success: function (data) {

                $('#Order_Qty').empty();
                $(data).each(function (index, item) {
                    $('#Order_Qty').append($('<option/>', { value: item.Value }))
                })
            },
            error: function () {
                alert("There is some problem to get.");
            }
        });
    }

</script>

I want when change value in dropdown ,then Action GetOrderno call and populate value in label,i tried ,but not working,

Data will populate in label accordingly orderno

AgaveJoe 30,126 Reputation points

2023-03-15T19:51:59.0666667+00:00

Your code is very confusing. Is OrderNo the label? Where is the code that tries to populate the label? Where is the value you want to use to populate the label? The sum?

The current GetOrderno function tries to populate select options. Do you want to replace this logic?

Analyst_SQL 3,576

@AgaveJoe

this code is populating dropdown list on page load

   public ActionResult Index()
        {
            var orderID = 0;
            ViewBag.orderID = new SelectList(DB.SalesOrders.Where(bt => bt.OrderNo > orderID && bt.Status == "Open"), "Orderno", "Order_Ref_No", "0");
            return View();
        }

below action ,getting value from the database table,on the behalf of orderno.

 [HttpGet]
        public JsonResult GetOrderno(int orderId)
        {
            int? orderID = DB.SalesOrders.First(a => a.OrderNo == orderId).OrderNo;
            var STATUS_LIST = (from od in DB.OrderDetails
                               where od.OrderNO == orderID
                               select new 
                               {
                                  od.orderqty
                               }).ToList();

         var   sumqty = STATUS_LIST.Select(c => c.orderqty).Sum();
            return Json(sumqty, JsonRequestBehavior.AllowGet);
        }

this code will populating Label,when dropdown change event will hit

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<script type="text/javascript">
    $(document).ready(function () {
        $("#select2-1").change(function () {
            var orderId = $("#select2-1").val();
            if (orderId != "") {
                GetOrderno(orderId);
            }
            else {
                $("#Order_Qty").empty();

            }

        });
    });

    function GetOrderno(orderId) {
        $.ajax({
            async: true,
            type: 'GET',
            dataType: 'JSON',
            contentType: 'application/json; charset=utf-8',
            url: '/OrderPack/GetOrderno',
            data: { orderId: orderId },
            success: function (data) {

                $('#Order_Qty').empty();
                $(data).each(function (index, item) {
                    $('#Order_Qty').append($('<option/>', { value: item.Value }))
                })
            },
            error: function () {
                alert("There is some problem to get.");
            }
        });
    }

</script>

but Json code is not need to set ,which is not populating label

Analyst_SQL 3,576 Reputation points

2023-03-15T20:21:23.7933333+00:00

The current GetOrderno function tries to populate select options. Do you want to replace this logic?

yes,i want to populate label instead of Select option

Accepted answer

0 additional answers

Your answer

AgaveJoe 30,126 Reputation points

2023-03-15T19:51:59.0666667+00:00

Your code is very confusing. Is OrderNo the label? Where is the code that tries to populate the label? Where is the value you want to use to populate the label? The sum?

The current GetOrderno function tries to populate select options. Do you want to replace this logic?
Analyst_SQL 3,576 Reputation points

2023-03-15T20:01:02.0833333+00:00

@AgaveJoe

this code is populating dropdown list on page load

public ActionResult Index() { var orderID = 0; ViewBag.orderID = new SelectList(DB.SalesOrders.Where(bt => bt.OrderNo > orderID && bt.Status == "Open"), "Orderno", "Order_Ref_No", "0"); return View(); }

below action ,getting value from the database table,on the behalf of orderno.

[HttpGet] public JsonResult GetOrderno(int orderId) { int? orderID = DB.SalesOrders.First(a => a.OrderNo == orderId).OrderNo; var STATUS_LIST = (from od in DB.OrderDetails where od.OrderNO == orderID select new { od.orderqty }).ToList(); var sumqty = STATUS_LIST.Select(c => c.orderqty).Sum(); return Json(sumqty, JsonRequestBehavior.AllowGet); }

this code will populating Label,when dropdown change event will hit

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function () { $("#select2-1").change(function () { var orderId = $("#select2-1").val(); if (orderId != "") { GetOrderno(orderId); } else { $("#Order_Qty").empty(); } }); }); function GetOrderno(orderId) { $.ajax({ async: true, type: 'GET', dataType: 'JSON', contentType: 'application/json; charset=utf-8', url: '/OrderPack/GetOrderno', data: { orderId: orderId }, success: function (data) { $('#Order_Qty').empty(); $(data).each(function (index, item) { $('#Order_Qty').append($('<option/>', { value: item.Value })) }) }, error: function () { alert("There is some problem to get."); } }); } </script>

but Json code is not need to set ,which is not populating label
Analyst_SQL 3,576 Reputation points

2023-03-15T20:21:23.7933333+00:00

The current GetOrderno function tries to populate select options. Do you want to replace this logic?

yes,i want to populate label instead of Select option

Answer 1

Dude, clean up your code before asking questions.

Mock models

    public class OrderDetail
    {
        public int Id { get; set; }
        public int OrderNo { get; set; }
        public int Quantity { get; set; }
    }

    public class SalesOrder
    {
        public int OrderNo { get; set; }
        public DateTime OrderTime { get; set; }
    }

    public class OrderVm
    {
        public int OrderNo { get; set; }
        public int Quantity { get; set; }
    }

Controller

    public class OrderPackController : Controller
    {
        private List<OrderDetail> orderDetails;
        private List<SalesOrder> orders;
        public OrderPackController()
        {
            orderDetails = new List<OrderDetail>()
            {
                new OrderDetail() {Id = 1, OrderNo = 11, Quantity = 25},
                new OrderDetail() {Id = 2, OrderNo = 11, Quantity = 10},
                new OrderDetail() {Id = 3, OrderNo = 12, Quantity = 4},
                new OrderDetail() {Id = 4, OrderNo = 13, Quantity = 7}
            };

            orders = new List<SalesOrder>()
            {
                new SalesOrder() {OrderNo = 11, OrderTime=DateTime.Now.AddDays(-2)},
                new SalesOrder() {OrderNo = 12, OrderTime=DateTime.Now.AddDays(-2)},
                new SalesOrder() {OrderNo = 13, OrderTime=DateTime.Now.AddDays(-2)},
            };
        }
        // GET: OrderPack
        public ActionResult Index()
        {
            ViewBag.orderID = new SelectList(orders, "OrderNo", "OrderTime");
            return View();
        }

        [HttpGet]
        public JsonResult GetOrderno(int orderId)
        {
            OrderVm vm = new OrderVm();
            vm.OrderNo = orderId;
            vm.Quantity = orderDetails.Where(o => o.OrderNo == orderId).Sum(o => o.Quantity);
            return Json(vm, JsonRequestBehavior.AllowGet);
        }
    }

View

@model MvcIdentity.Models.OrderVm
@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>

<div class="form-group">
    @Html.LabelFor(model => model.OrderNo, "Select Item", htmlAttributes: new { @class = "control-label col-md-2" })
    <div class="col-md-3">
        @Html.DropDownList("orderID", (SelectList)ViewBag.OrderNo, "Select", htmlAttributes: new { @class = "form-control", @id = "select2-1" })
    </div>
    @Html.LabelFor(model => model.Quantity, "Quantity goes here", htmlAttributes: new { @class = "control-label col-md-2", @id = "quantity-label"})
    @Html.HiddenFor(Model => Model.Quantity)
</div>

@section scripts {
    <script>

        $("#select2-1").change(function () {
            //console.log($("#select2-1").val());

            var orderId = $("#select2-1").val();
            if (orderId != "") {
                GetOrderno(orderId);
            }
            else {
                $("#quantity-label").text("Quantity goes here");
                $("#Quantity").empty();
            }
        });
 

        function GetOrderno(orderId) {
            
            $.ajax({
                async: true,
                type: 'GET',
                dataType: 'JSON',
                url: '/OrderPack/GetOrderno',
                data: { orderId: orderId },
                success: function (data) {
                    console.log(data);
                    //populate the hidden field
                    $("#Quantity").val(data.Quantity);
                    //populate the label
                    $("#quantity-label").text(data.Quantity);
                },
                error: function () {
                    alert("There is some problem to get.");
                }
            });
        }
    </script>
    }

Analyst_SQL 3,576 Reputation points

2023-03-15T22:59:36.09+00:00

@AgaveJoe •

you solution is working without layout ,means it is not working my template ,so how can i resolve this issue
AgaveJoe 30,126 Reputation points

2023-03-15T23:13:09.8066667+00:00

Dude , I can't see your layout. What does "not working my template" mean? What template? What's not working? Can you at least provide the actual HTML and the code you've tried?
Analyst_SQL 3,576 Reputation points

2023-03-16T04:07:07.67+00:00

i am sharing my project , in which you can check above code

https://1drv.ms/u/s!AjU_x8tv1UVhgvFCIkWOrPlm5cb1AA?e=GKHiuX
AgaveJoe 30,126 Reputation points

2023-03-16T10:35:18.5166667+00:00

I can't get to the code.
Analyst_SQL 3,576 Reputation points

2023-03-16T11:51:45.27+00:00

@AgaveJoe

thanks for supporting

Share via

Change event on Dropdown list ,populate label

0 additional answers

Your answer