select table row value populate in form control(Dropdown,text field)

Question

select table row value populate in form control(Dropdown,text field)

Analyst_SQL 3,576

I am selecting or Clicking on row of table, then relevant data from get populate in downdown and text field,

issue is that text field is getting populate ,but dropdown field is not getting populating ,i am sharing my whole code..

View

@model ERP_APP.Models.ItemModel

@{
    ViewBag.Title = "CreaterItem";
   
}


<div class="col-lg-8">
    <div class="card card-default mb-5">
        <div class="card-header">Employee Form</div>
        <div class="card-body">

            @using (Html.BeginForm("CreateItem", "Item", FormMethod.Post))

            {
                @Html.AntiForgeryToken()

            <div class="form-horizontal">

                <hr />
                @Html.ValidationSummary(true, "", new { @class = "text-danger" })


                <div class="form-group">
                    @Html.LabelFor(model => model.Descriptionitem, htmlAttributes: new { @class = "control-label col-md-2" })
                    <div class="col-md-10">
                        @Html.EditorFor(model => model.Descriptionitem, new { htmlAttributes = new { @class = "form-control", @id = "item_Name" } })
                        @Html.ValidationMessageFor(model => model.Descriptionitem, "", new { @class = "text-danger" })
                    </div>
                </div>

                <div class="form-group">
                    @Html.LabelFor(model => model.BaleSize, htmlAttributes: new { @class = "control-label col-md-2" })
                    <div class="col-md-10">
                        @Html.EditorFor(model => model.BaleSize, new { htmlAttributes = new { @class = "form-control" } })
                        @Html.ValidationMessageFor(model => model.BaleSize, "", new { @class = "text-danger" })
                    </div>
                </div>

                <div class="form-group">
                    @Html.LabelFor(model => model.weight, htmlAttributes: new { @class = "control-label col-md-2" })
                    <div class="col-md-10">
                        @Html.EditorFor(model => model.weight, new { htmlAttributes = new { @class = "form-control" } })
                        @Html.ValidationMessageFor(model => model.weight, "", new { @class = "text-danger" })
                    </div>
                </div>





                <div class="form-group">
                    @Html.LabelFor(model => model.SecID, "Select Department Level", htmlAttributes: new { @class = "control-label col-md-6" })
                    <div class="col-md-10">
                       @* @Html.DropDownList("SecId", null, "Select Department", htmlAttributes: new { @class = "form-control", @id = "select2-1" })*@

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

                        @Html.ValidationMessageFor(model => model.SecID, "", new { @class = "text-danger" })
                    </div>
                </div>
                <div class="form-group">
                    @Html.LabelFor(model => model.IDUOM, htmlAttributes: new { @class = "control-label col-md-2" })
                    <div class="col-md-10">
                        @Html.EditorFor(model => model.IDUOM, new { htmlAttributes = new { @class = "form-control" } })
                        @Html.ValidationMessageFor(model => model.IDUOM, "", new { @class = "text-danger" })
                    </div>
                </div>




                <div class="form-group">
                    @Html.LabelFor(model => model.CID, "Select Category Level", htmlAttributes: new { @class = "control-label col-md-6" })
                    <div class="col-md-10">
                        @Html.DropDownList("cID", null, "Select Department", htmlAttributes: new { @class = "form-control", @id = "select2-2" })
                        @Html.ValidationMessageFor(model => model.CID, "", 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>


            }
            <h4>Item Search</h4>
            <hr />
            <div class="form-group">
                @Html.LabelFor(model => model.CodeItem, "Select Item", htmlAttributes: new { @class = "control-label col-md-6" })
                <div class="col-md-10">
                    @Html.DropDownList("codeitem", null, "Select Item", htmlAttributes: new { @class = "form-control", @id = "select2-3" })
                    @Html.ValidationMessageFor(model => model.CodeItem, "", new { @class = "text-danger" })
                </div>
            </div>



            <section class="content">
                <div class="row">
                    <div class="col-xs-12">
                        <div class="box box-primary">


                            <div class="box-body">
                                <table id="example1" class="table table-bordered table-striped">
                                    <thead>
                                        <tr>
                                            <th>ID</th>
                                            <th>Item Name</th>
                                            <th>Section</th>
                                            <th>BaleSize</th>
                                            <th>weight</th>
                                            <th>UOM</th>
                                            <th>Action</th>

                                        </tr>
                                    </thead>
                                    <tbody>

                                        @foreach (var item in Model.Itemss)
                                        {
                                            <tr>
                                                <td>@Html.DisplayFor(module => item.CodeItem)</td>
                                                <td>@Html.DisplayFor(module => item.Descriptionitem)</td>
                                                <td>@Html.DisplayFor(module => item.Section)</td>
                                                <td>@Html.DisplayFor(module => item.BaleSize)</td>
                                                <td>@Html.DisplayFor(module => item.weight)</td>
                                                <td>@Html.DisplayFor(module => item.UOM)</td>
                                                
                                            </tr>
                                        }
                                    </tbody>
                                    <tfoot>
                                    </tfoot>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>




            </section>

        </div>
    </div>
</div>

<script src="~/Content/Template/vendor/ddlsearch.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $("#select2-3").on('change', function (e) {
            $.ajax({
                type: 'GET',
                url: "/Item/GetItem",
                dataType: 'json',
                data: { codeitem: $(this).find('option:selected').val() },
                success: function (response) {
                    $('#example1').hide();
                    $('#example1 tbody').empty();
                    $.each(response, function (i, item) {
                        var rows = "<tr>" +
                            "<td>" + item.CodeItem + "</td>" +
                            "<td>" + item.Descriptionitem + "</td>" +
                            "<td>" + item.Section + "</td>" +
                            "<td>" + item.BaleSize + "</td>" +
                            "<td>" + item.weight + "</td>" +
                            "<td>" + item.UOM + "</td>" +
                            "<td><a id='lnkView' href='javascript:void(0);'>View</a></td>" +
                            "</tr>";
                        $('#example1 tbody').append(rows);
                    });
                    $('#example1').show();
                },
                error: function () {
                }
            });
        });
    });

    $(function () {
        $.ajax({
            type: 'GET',
            url: "/Item/SelectItem",
            dataType: 'json',
            data: {},
            success: function (response) {
                $('#example1 tbody').empty();
                $.each(response, function (i, item) {
                    var rows = "<tr>" +
                        "<td>" + item.CodeItem + "</td>" +
                        "<td>" + item.Descriptionitem + "</td>" +
                        "<td>" + item.Section + "</td>" +
                        "<td>" + item.BaleSize + "</td>" +
                        "<td>" + item.weight + "</td>" +
                        "<td>" + item.UOM + "</td>" +
                        "<td><a id='lnkView' href='javascript:void(0);'>View</a></td>" +
                        "</tr>";
                    $('#example1 tbody').append(rows);
                });
                $('#example1').show();
            },
            error: function () {
            }
        });

        $('body').on('click', '#example1 tbody tr', function () {
            $("#item_Name").val($(this).find('td').eq(1).html());
       
            $("#select2-1").val($(this).find('td').eq(2).html());
           
        });
    });
</script>

Controller

using ERP_APP.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Data.SqlClient;
using DataBaseLayer;

namespace ERP_APP.Controllers
{
    public class ItemController : Controller
    {
        SilverProductionEntities DB = new SilverProductionEntities();
        // GET: Item
        ItemModelDal sdb = new ItemModelDal();
        public ActionResult CreateItem()
        {
            ModelState.Clear();
            ItemModel item = new ItemModel();
       
            //For Loading Data
            
            item.Itemss = sdb.GetItem();
            var cID = 0;
            var secID = 0;
            var codeitEM = 0;
            ViewBag.cID = new SelectList(DB.Catagories.Where(bt => bt.CID > cID), "CID", "CName", "0");
            ViewBag.SecId = new SelectList(DB.Sections.Where(bt => bt.SecID > secID), "SecID", "Secnam", "0");
            ViewBag.codeitem = new SelectList(DB.ItemMasterFiles.Where(bt => bt.CodeItem > codeitEM), "codeitem", "Descriptionitem", "0");
            return View(item);

        }
        [HttpPost]
        [ValidateAntiForgeryToken]
        public ActionResult CreateItem(ItemModel objmod)
        {
            try
            {
                int result = sdb.CreateItem(objmod);
                if (result == 1)
                {
                    ViewBag.Message = "Role Added Successfully";
                    ModelState.Clear();
                }
                else if (result == -1)
                {
                    ViewBag.Message = "Role Already Exists!";
                    ModelState.Clear();
                }
                else
                {
                    ViewBag.Message = "Unsucessfull";
                    ModelState.Clear();
                }

                return RedirectToAction("CreateItem");
            }
            catch
            {
                throw;
            }
        }


        public JsonResult GetItem(string codeitem)
        {
            List<ItemModel> items = new List<ItemModel>();
    
            using (SqlConnection con = new SqlConnection("data source=SERVER1\\SQLEXPRESS;initial catalog=SilverProduction;integrated security=True;MultipleActiveResultSets=True;"))
            {
                string query = "SELECT I.Codeitem,I.Descriptionitem,S.Secnam Section,I.weight,I.BaleSize,U.NameUOM UOM FROM ItemMasterFile I inner join Sections S on S.Secid=I.SecId inner join UOM U on U.IDUOM=I.IDUOM  where I.codeitem=@codeitem";
                using (SqlCommand cmd = new SqlCommand(query))
                {
                    cmd.Connection = con;
                    cmd.Parameters.AddWithValue("@Codeitem", codeitem);
                    con.Open();
                    using (SqlDataReader sdr = cmd.ExecuteReader())
                    {
                        while (sdr.Read())
                        {
                            items.Add(new ItemModel
                            {
                                CodeItem = Convert.ToInt32(sdr["CodeItem"]),
                                Descriptionitem = Convert.ToString(sdr["Descriptionitem"]),
                                Section = Convert.ToString(sdr["Section"]),
                                weight = Convert.ToInt32(sdr["weight"]),
                                BaleSize = Convert.ToString(sdr["BaleSize"]),
                                UOM = Convert.ToString(sdr["UOM"]),
                            });
                        }
                    }
                    con.Close();
                }
            }
           
            var jsonResult = Json(items, JsonRequestBehavior.AllowGet);
            return jsonResult;


        }


   
            public JsonResult SelectItem()
        {
           
            
                return Json(DB.ItemMasterFiles.Take(0).ToList(), JsonRequestBehavior.AllowGet);
            }
        }
    }

AgaveJoe 30,126 Reputation points

2023-02-25T12:16:17.54+00:00
Basic debugging should help you figure out what's wrong. Start with writing the value of column 3 to the browser's dev tools console. What is the value of $(this).find('td').eq(2).html()? Can you share the #select2-1 HTML? Is there a value in the HTML that matches $(this).find('td').eq(2).html()?

$('body').on('click', '#example1 tbody tr', function () { $("#item_Name").val($(this).find('td').eq(1).html()); console.log($(this).find('td').eq(2).html()); $("#select2-1").val($(this).find('td').eq(2).html()); });

Also, why does the JavaScript application try to overwrite the table rows created in the server?
Analyst_SQL 3,576 Reputation points

2023-02-25T14:34:26.7866667+00:00

@AgaveJoe

Column 3 value is textbox ,which is populating fine ,#select2-1 , i am using template ,which i used Java Script.

i check console there is no error related to dropdown list
AgaveJoe 30,126 Reputation points

2023-02-25T15:26:19.1333333+00:00

Seriously?! You did not answer a single question!

Column 3 value is textbox

We cannot see any code that places a textbox in column 3. But, if this is true then the jQuery should return the val() of the textbox not the HTML within column 3.

i check console there is no error related to dropdown list

I did not ask if there were errors in the console. I recommended writing $(this).find('td').eq(2).html() to the console. Your design tries to set the value of a select to $(this).find('td').eq(2).html() which is HTML. Writing $(this).find('td').eq(2).html() to the console will show what your code is doing.
Lan Huang-MSFT 30,186 Reputation points Microsoft External Staff

2023-02-28T03:29:41.8166667+00:00

Hi @akhter hussain,

Try using the f12 developer tools to see if there is any error message.

You also can debug to see if there is any problem with the returned data.

Test your code with test data, the front end should be fine.

But since your code involves a lot of data, it is difficult for us to reproduce your problem. Maybe you can provide an example that minimally reproduces the problem.

Or provide all the information you involve, such as database tables, models, ItemModelDal, SilverProductionEntities,ddlsearch.js file.

Analyst_SQL 3,576

@Lan Huang-MSFT

here is Database table structure

Create table Sections (SecID int,Secnam varchar(50))

Insert into Sections values(1,'Belt')

Insert into Sections values(1,'Pant')

Create table ItemMasterFile (Codeitem int,secid int)

Insert into ItemMasterFile values(11,'1')

Insert into ItemMasterFile values(12,'2')

Now i am retrieving data into HTML table View

using below query

select  S.secnam  from  
ItemMasterFile I inner join Sections S on I.SeciD=S.SecID

Now i want ,when i select row from table ,then secid or SecNam get populate in dropdownlist

Below is my View

@model ERP_APP.Models.ItemModel

@{
    ViewBag.Title = "CreaterItem";

}


<div class="col-lg-8">
    <div class="card card-default mb-5">
        <div class="card-header">Employee Form</div>
        <div class="card-body">

            @using (Html.BeginForm("CreateItem", "Item", FormMethod.Post))

            {
                @Html.AntiForgeryToken()

                <div class="form-horizontal">

                    <hr />
                    @Html.ValidationSummary(true, "", new { @class = "text-danger" })

                    <div class="form-group">
                        @Html.LabelFor(model => model.SecID, "Select Department Level", htmlAttributes: new { @class = "control-label col-md-6" })
                        <div class="col-md-10">
                            @* @Html.DropDownList("SecId", null, "Select Department", htmlAttributes: new { @class = "form-control", @id = "select2-1" })*@

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

                            @Html.ValidationMessageFor(model => model.SecID, "", 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>

            }
            <h4>Item Search</h4>
            <hr />
            <div class="form-group">
                @Html.LabelFor(model => model.CodeItem, "Select Item", htmlAttributes: new { @class = "control-label col-md-6" })
                <div class="col-md-10">
                    @Html.DropDownList("codeitem", null, "Select Item", htmlAttributes: new { @class = "form-control", @id = "select2-3" })
                    @Html.ValidationMessageFor(model => model.CodeItem, "", new { @class = "text-danger" })
                </div>
            </div>

            <section class="content">
                <div class="row">
                    <div class="col-xs-12">
                        <div class="box box-primary">


                            <div class="box-body">
                                <table id="example1" class="table table-bordered table-striped">
                                    <thead>
                                        <tr>

                                            <th>Section</th>



                                        </tr>
                                    </thead>
                                    <tbody>

                                        @foreach (var item in Model.Itemss)
                                        {
                                            <tr>

                                                <td>@Html.DisplayFor(module => item.Section)</td>


                                            </tr>
                                        }
                                    </tbody>
                                    <tfoot>
                                    </tfoot>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>




            </section>

        </div>
    </div>
</div>

<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-3").on('change', function (e) {
            $.ajax({
                type: 'GET',
                url: "/Item/GetItem",
                dataType: 'json',
                data: { codeitem: $(this).find('option:selected').val() },
                success: function (response) {
                    $('#example1').hide();
                    $('#example1 tbody').empty();
                    $.each(response, function (i, item) {
                        var rows = "<tr>" +


                            "<td>" + item.Section + "</td>" +

                            "<td><a id='lnkView' href='javascript:void(0);'>View</a></td>" +
                            "</tr>";
                        $('#example1 tbody').append(rows);
                    });
                    $('#example1').show();
                },
                error: function () {
                }
            });
        });
    });

    $(function () {
        $.ajax({
            type: 'GET',
            url: "/Item/SelectItem",
            dataType: 'json',
            data: {},
            success: function (response) {
                $('#example1 tbody').empty();
                $.each(response, function (i, item) {
                    var rows = "<tr>" +

                        "<td>" + item.Section + "</td>" +

                        "<td><a id='lnkView' href='javascript:void(0);'>View</a></td>" +
                        "</tr>";
                    $('#example1 tbody').append(rows);
                });
                $('#example1').show();
            },
            //error: function () {
            //}
        });

        $('body').on('click', '#example1 tbody tr', function () {

            $("#select2-1").val($(this).find('td').eq(2).html());




        });
    });
</script>

Controller

using ERP_APP.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Data.SqlClient;
using DataBaseLayer;

namespace ERP_APP.Controllers
{
    public class ItemController : Controller
    {
        SilverProductionEntities DB = new SilverProductionEntities();
        // GET: Item
        ItemModelDal sdb = new ItemModelDal();

        public ActionResult CreateItem()
        {
            ModelState.Clear();
            ItemModel item = new ItemModel();
       
            //For Loading Data
            
            item.Itemss = sdb.GetItem();
      
            var secID = 0;
            var codeitEM = 0;
 
            ViewBag.SecId = new SelectList(DB.Sections.Where(bt => bt.SecID > secID), "SecID", "Secnam", "0");

            ViewBag.codeitem = new SelectList(DB.ItemMasterFiles.Where(bt => bt.CodeItem > codeitEM), "codeitem", "Descriptionitem", "0");
            return View(item);

        }
    


        public JsonResult GetItem(string codeitem)
        {
            List<ItemModel> items = new List<ItemModel>();
    
            using (SqlConnection con = new SqlConnection("data source=SERVER1\\SQLEXPRESS;initial catalog=SilverProduction;integrated security=True;MultipleActiveResultSets=True;"))
            {
                string query = "SELECT S.Secnam Section FROM ItemMasterFile I inner join Sections S on S.Secid=I.SecId   where I.codeitem=@codeitem";
                using (SqlCommand cmd = new SqlCommand(query))
                {
                    cmd.Connection = con;
                    cmd.Parameters.AddWithValue("@Codeitem", codeitem);
                    con.Open();
                    using (SqlDataReader sdr = cmd.ExecuteReader())
                    {
                        while (sdr.Read())
                        {
                            items.Add(new ItemModel
                            {
                            
                                Section = Convert.ToString(sdr["Section"]),
                      
                            });
                        }
                    }
                    con.Close();
                }
            }
           
            var jsonResult = Json(items, JsonRequestBehavior.AllowGet);
            return jsonResult;


        }


   
            public JsonResult SelectItem()
          {
           
            
                return Json(DB.ItemMasterFiles.Take(0).ToList(), JsonRequestBehavior.AllowGet);
            }
        }
    }

public class ItemModelDal
    {

        SqlConnection con = new SqlConnection("data source=SERVER1\\SQLEXPRESS;initial catalog=SilverProduction;integrated security=True;MultipleActiveResultSets=True;");
     

        public List<ItemModel> GetItem()
        {
            List<ItemModel> item = new List<ItemModel>();
            SqlCommand cmd = new SqlCommand("SELECT I.Codeitem,I.Descriptionitem,S.Secnam Section,I.weight,I.BaleSize,U.NameUOM UOM FROM ItemMasterFile I inner join Sections S on S.Secid=I.SecId inner join UOM U on U.IDUOM=I.IDUOM where codeitem is null", con);
            cmd.CommandType = CommandType.Text;
            SqlDataAdapter sd = new SqlDataAdapter(cmd);
            DataTable dt = new DataTable();
            con.Open();
            sd.Fill(dt);
            con.Close();
            foreach (DataRow dr in dt.Rows)
            {
                item.Add(
                new ItemModel
                {
                    CodeItem = Convert.ToInt32(dr["CodeItem"]),
                    Descriptionitem = Convert.ToString(dr["Descriptionitem"]),
                    Section = Convert.ToString(dr["Section"]),
                    weight = Convert.ToInt32(dr["weight"]),
                    BaleSize = Convert.ToString(dr["BaleSize"]),
                    UOM = Convert.ToString(dr["UOM"]),
                    //SecID = Convert.ToString(dr["se"])
                });
            }
            return item;
        }



        public IList<SelectListItem> SecName { get; set; }
   

      
    }

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;


namespace ERP_APP.Models
{

    public class ItemModel
    {
        public int CodeItem { get; set; }
        public string Descriptionitem { get; set; }
        public string BaleSize { get; set; }
        public Nullable<int> weight { get; set; }
        public Nullable<int> SecID { get; set; }
        public string Section { get; set; }
        public string Packsize { get; set; }
        public string ALID { get; set; }
        public Nullable<int> IDUOM { get; set; }
        public string UOM { get; set; }
        public Nullable<System.DateTime> entryDate { get; set; }
        public Nullable<int> CID { get; set; }
        public string Icn { get; set; }
        public Nullable<int> TiD { get; set; }
        public Nullable<int> RID { get; set; }
        public Nullable<System.DateTime> udate { get; set; }
        public string IPAddress { get; set; }
        public Nullable<int> delid { get; set; }
        public string I_Status { get; set; }
        public Nullable<System.TimeSpan> U_Time { get; set; }
        public string I_Cat { get; set; }
        public string I_Hot { get; set; }
        public Nullable<decimal> Y_per { get; set; }
        public Nullable<int> W_Type { get; set; }
        public Nullable<int> Empid { get; set; }
        public Nullable<int> I_Rate { get; set; }
        public Nullable<int> I_Level { get; set; }


        public List<ItemModel> Itemss { get; set; }
    }
}

AgaveJoe 30,126 Reputation points

2023-02-28T13:59:26.0033333+00:00
Your jQuery selector is looking for the third column; eq(2).

$("#select2-1").val($(this).find('td').eq(2).html());

Your new HTML table only has one column; eq(0).

Secondly, the query returns S.secnam which is a string. You populated the select's value with the ID not S.secnam.

ViewBag.SecId = new SelectList(DB.Sections.Where(bt => bt.SecID > secID), "SecID", "Secnam", "0");

Frankly, your coding is very sloppy. Basic debugging/troubleshooting finds these types of mistakes that all programmers make from time to time. The difference is experienced developers will take a look at what's inside of...

$(this).find('td').eq(2).html();

...or look for any errors in the browser's dev tools console.

The SQL your shared also has bugs. How can Belt and Pants have the same ID????

Also, the code I posted populates the values of every select. I'm not sure what you're doing but it seems like you're making very little effort to troubleshoot your own code.

Learn how to use the browser's dev tools when troubleshooting JavaScript/jQuery.

Chrome Dev tools

Use the Visual Studio debugger to troubleshooting code on the server.
Analyst_SQL 3,576 Reputation points

2023-02-28T17:55:48.04+00:00

on chrome Console below error displaying

server/i18n/site-en.json:1 Failed to load resource: the server responded with a status of 404 (Not Found)

Accepted answer

5 additional answers

Your answer

AgaveJoe 30,126 Reputation points

2023-02-25T12:16:17.54+00:00

Basic debugging should help you figure out what's wrong. Start with writing the value of column 3 to the browser's dev tools console. What is the value of $(this).find('td').eq(2).html()? Can you share the #select2-1 HTML? Is there a value in the HTML that matches $(this).find('td').eq(2).html()?

$('body').on('click', '#example1 tbody tr', function () { $("#item_Name").val($(this).find('td').eq(1).html()); console.log($(this).find('td').eq(2).html()); $("#select2-1").val($(this).find('td').eq(2).html()); });

Also, why does the JavaScript application try to overwrite the table rows created in the server?
Analyst_SQL 3,576 Reputation points

2023-02-25T14:34:26.7866667+00:00

@AgaveJoe

Column 3 value is textbox ,which is populating fine ,#select2-1 , i am using template ,which i used Java Script.

i check console there is no error related to dropdown list
AgaveJoe 30,126 Reputation points

2023-02-25T15:26:19.1333333+00:00

Seriously?! You did not answer a single question!

Column 3 value is textbox

We cannot see any code that places a textbox in column 3. But, if this is true then the jQuery should return the val() of the textbox not the HTML within column 3.

i check console there is no error related to dropdown list

I did not ask if there were errors in the console. I recommended writing $(this).find('td').eq(2).html() to the console. Your design tries to set the value of a select to $(this).find('td').eq(2).html() which is HTML. Writing $(this).find('td').eq(2).html() to the console will show what your code is doing.
Lan Huang-MSFT 30,186 Reputation points Microsoft External Staff

2023-02-28T03:29:41.8166667+00:00

Hi @akhter hussain,

Try using the f12 developer tools to see if there is any error message.

You also can debug to see if there is any problem with the returned data.

Test your code with test data, the front end should be fine.

But since your code involves a lot of data, it is difficult for us to reproduce your problem. Maybe you can provide an example that minimally reproduces the problem.

Or provide all the information you involve, such as database tables, models, ItemModelDal, SilverProductionEntities,ddlsearch.js file.
AgaveJoe 30,126 Reputation points

2023-02-28T13:59:26.0033333+00:00

Your jQuery selector is looking for the third column; eq(2).

$("#select2-1").val($(this).find('td').eq(2).html());

Your new HTML table only has one column; eq(0).

Secondly, the query returns S.secnam which is a string. You populated the select's value with the ID not S.secnam.

ViewBag.SecId = new SelectList(DB.Sections.Where(bt => bt.SecID > secID), "SecID", "Secnam", "0");

Frankly, your coding is very sloppy. Basic debugging/troubleshooting finds these types of mistakes that all programmers make from time to time. The difference is experienced developers will take a look at what's inside of...

$(this).find('td').eq(2).html();

...or look for any errors in the browser's dev tools console.

The SQL your shared also has bugs. How can Belt and Pants have the same ID????

Also, the code I posted populates the values of every select. I'm not sure what you're doing but it seems like you're making very little effort to troubleshoot your own code.

Learn how to use the browser's dev tools when troubleshooting JavaScript/jQuery.

Chrome Dev tools

Use the Visual Studio debugger to troubleshooting code on the server.
Analyst_SQL 3,576 Reputation points

2023-02-28T17:55:48.04+00:00

on chrome Console below error displaying

server/i18n/site-en.json:1 Failed to load resource: the server responded with a status of 404 (Not Found)

Answer 1

AgaveJoe 30,126

i got frustrated ,do not know ,where i am making mistake,

As far as I can tell you lack basic troubleshooting skills. You know the problem starts with the client side code (jQuery/JavaScript) and you can easily reproduce the problem. The first step is reviewing the HTML.

Right click the select2-1 (dropdown) in the browser and select "Inspect". Right click the select HTML and pick "Copy Element" Paste the HTML on the forum. I assume select2-1 is the select causing the problem.

<select class="form-control" id="select2-1" name="SecId">
    <option value="">Select</option>
    <option value="1">SecId 1</option>
    <option value="2">SecId 2</option>
    <option value="3">SecId 3</option>
</select>

Next, right click the HTML table and copy the HTML table here on the forum.

<table id="example1" class="table table-bordered table-striped">
   <thead>
      <tr>
         <th>ID</th>
         <th>Item Name</th>
         <th>Section</th>
         <th>BaleSize</th>
         <th>weight</th>
         <th>UOM</th>
         <th>Action</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>1</td>
         <td>Description 1</td>
         <td>1</td>
         <td>96</td>
         <td>10</td>
         <td>1</td>
         <td><a id="lnkView" href="javascript:void(0);">View</a></td>
      </tr>
      <tr>
         <td>2</td>
         <td>Description 1</td>
         <td>2</td>
         <td>55</td>
         <td>20</td>
         <td>2</td>
         <td><a id="lnkView" href="javascript:void(0);">View</a></td>
      </tr>
      <tr>
         <td>3</td>
         <td>Description 3</td>
         <td>3</td>
         <td>54</td>
         <td>40</td>
         <td>3</td>
         <td><a id="lnkView" href="javascript:void(0);">View</a></td>
      </tr>
   </tbody>
   <tfoot>
   </tfoot>
</table>

Finally, copy the jQuery/JavaScript click event and paste it here on the forum.

$('body').on('click', '#example1 tbody tr', function () {
    $("#item_Name").val($(this).find('td').eq(1).html());
    $("#select2-1").val($(this).find('td').eq(2).html());
    $("#BaleSize").val($(this).find('td').eq(3).text());
    $("#weight").val($(this).find('td').eq(4).text());
    $("#IDUOM").val($(this).find('td').eq(5).text());
    $("#select2-3").val($(this).find('td').eq(0).text());
    $("#select2-2").val($(this).find('td').eq(0).text());
});

This is all the information needed to start troubleshooting. The HTML table has the source value the select needs. All we have to do is compare table cells content to the select options. First, we look at the jQuery/JavaScript to find the column index used to fetch the value from the HTML table. From the index we find the column. The index is base zero so the first column is zero.

Next, we take a look at the column values and compare the column values to the select's option values. There should be a match between the column values and the option values. If there is no match check if the column value matches the option text. If you are matching text then you need the code I posted above which queries the select to find the value given the text.

  <script>
        $('body').on('click', '#example1 tbody tr', function () {

            //Get and show the value in the console. 
            var item = $(this).find('td').eq(0).text();
            console.log(item);

            //Get the value from the select
            var val = $('#select2-1 option').filter(function () { return $(this).html() == item }).val();
            console.log(val);

            $("#select2-1").val(val);
        });
    </script>

If there are no matches then you have other design issues.

Analyst_SQL 3,576

@AgaveJoe

I followed same as you instructed

<span class="selection"><span class="select2-selection select2-selection--single" role="combobox" aria-haspopup="true" aria-expanded="false" tabindex="0" aria-labelledby="select2-select2-1-container"><span class="select2-selection__rendered" id="select2-select2-1-container" title="Select">Select</span><span class="select2-selection__arrow" role="presentation"><b role="presentation"></b></span></span></span>

table

<table id="example1" class="table table-bordered table-striped" style="">
                                    <thead>
                                        <tr>
                                            <th>ID</th>
                                            <th>Item Name</th>

                                            <th>BaleSize</th>
                                            <th>weight</th>
                                            <th>Section</th>
                                            <th>Action</th>

                                        </tr>
                                    </thead>
                                    <tbody><tr><td>7</td><td>4 Brands Summer # #</td><td>100 Lbs.</td><td>100</td><td>Brands</td><td><a id="lnkView" href="javascript:void(0);">View</a></td></tr></tbody>
                                    <tfoot>
                                    </tfoot>
                                </table>

<script type="text/javascript">
    $(document).ready(function () {
        $("#select2-3").on('change', function (e) {
            $.ajax({
                type: 'GET',
                url: "/Item/GetItem",
                dataType: 'json',
                data: { codeitem: $(this).find('option:selected').val() },
                success: function (response) {
                    $('#example1').hide();
                    $('#example1 tbody').empty();
                    $.each(response, function (i, item) {
                        var rows = "<tr>" +
                            "<td>" + item.CodeItem + "</td>" +
                            "<td>" + item.Descriptionitem + "</td>" +
                         
                            "<td>" + item.BaleSize + "</td>" +
                            "<td>" + item.weight + "</td>" +
                         
                            "<td>" + item.Section + "</td>" +
                            "<td><a id='lnkView' href='javascript:void(0);'>View</a></td>" +
                            "</tr>";
                        $('#example1 tbody').append(rows);
                    });
                    $('#example1').show();
                },
                error: function () {
                }
            });
        });
    });

    $(function () {
        $.ajax({
            type: 'GET',
            url: "/Item/SelectItem",
            dataType: 'json',
            data: {},
            success: function (response) {
                $('#example1 tbody').empty();
                $.each(response, function (i, item) {
                    var rows = "<tr>" +
                        "<td>" + item.CodeItem + "</td>" +
                        "<td>" + item.Descriptionitem + "</td>" +
                   
                        "<td>" + item.BaleSize + "</td>" +
                        "<td>" + item.weight + "</td>" +
                        "<td>" + item.Section + "</td>" +
                        "<td><a id='lnkView' href='javascript:void(0);'>View</a></td>" +
                        "</tr>";
                    $('#example1 tbody').append(rows);
                });
                $('#example1').show();
            },
            //error: function () {
            //}
        });

        $('body').on('click', '#example1 tbody tr', function () {
            $("#CodeItem").val($(this).find('td').eq(0).html());
            $("#item_Name").val($(this).find('td').eq(1).html());
  
            $("#BaleSize").val($(this).find('td').eq(2).text());
            $("#weight").val($(this).find('td').eq(3).text());

            $("#select2-1").val($(this).find('td').eq(4).text());



            });

    });
</script>

AgaveJoe 30,126 Reputation points

2023-03-02T12:02:59.45+00:00

The HTML is not a select element. Maybe it is a 3rd party JavaScript widget you found? This HTML is not included in your original post. For 5 days the community has been focused on the original code which may or may not be the actual problematic code. Is this another sloppy response where you share code that does not exist in your project? Or have you wasted everyone's time?

Also, the HTML table has one numeric value (ID). Realistically, you can have only one dropdown (select element). The original code has three!

I'm not sure how anyone can help you as it seems you have no idea what you're doing and you are unable to communicate with forum members.

Analyst_SQL 3,576

I think you looking for this below

.select2-container--bootstrap4 .select2-selection--single {
  height: calc(2.25rem + 2px) !important; }
  .select2-container--bootstrap4 .select2-selection--single .select2-selection__placeholder {
    color: #757575;
    line-height: 2.25rem; }
  .select2-container--bootstrap4 .select2-selection--single .select2-selection__arrow {
    position: absolute;
    top: 50%;
    right: 3px;
    width: 20px; }
    .select2-container--bootstrap4 .select2-selection--single .select2-selection__arrow b {
      top: 60%;
      border-color: #343a40 transparent transparent transparent;
      border-style: solid;
      border-width: 5px 4px 0 4px;
      width: 0;
      height: 0;
      left: 50%;
      margin-left: -4px;
      margin-top: -2px;
      position: absolute; }
  .select2-container--bootstrap4 .select2-selection--single .select2-selection__rendered {
    line-height: 2.25rem; }

.select2-search--dropdown .select2-search__field {
  border: 1px solid #ced4da;
  border-radius: 0.25rem; }

.select2-results__message {
  color: #6c757d; }

.select2-container--bootstrap4 .select2-selection--multiple {
  min-height: calc(2.25rem + 2px) !important;
  height: calc(2.25rem + 2px) !important; }
  .select2-container--bootstrap4 .select2-selection--multiple .select2-selection__rendered {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    list-style: none;
    margin: 0;
    padding: 0 5px;
    width: 100%; }
  .select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice {
    color: #343a40;
    border: 1px solid #bdc6d0;
    border-radius: 0.2rem;
    padding: 0;
    padding-right: 5px;
    cursor: pointer;
    float: left;
    margin-top: 0.3em;
    margin-right: 5px; }
  .select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice__remove {
    color: #bdc6d0;
    font-weight: bold;
    margin-left: 3px;
    margin-right: 1px;
    padding-right: 3px;
    padding-left: 3px;
    float: left; }
    .select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice__remove:hover {
      color: #343a40; }

.select2-container *:focus {
  outline: 0; }

.select2-container--bootstrap4 .select2-selection {
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
  width: 100%; }

.select2-container--bootstrap4.select2-container--focus .select2-selection {
  border-color: #17a2b8;
  -webkit-box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
          box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); }

.select2-container--bootstrap4.select2-container--focus.select2-container--open .select2-selection {
  border-bottom: none;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0; }

select.is-invalid ~ .select2-container--bootstrap4 .select2-selection {
  border-color: #dc3545; }

select.is-valid ~ .select2-container--bootstrap4 .select2-selection {
  border-color: #28a745; }

.select2-container--bootstrap4 .select2-dropdown {
  border-color: #ced4da;
  border-top: none;
  border-top-left-radius: 0;
  border-top-right-radius: 0; }
  .select2-container--bootstrap4 .select2-dropdown .select2-results__option[aria-selected=true] {
    background-color: #e9ecef; }

.select2-container--bootstrap4 .select2-results__option--highlighted,
.select2-container--bootstrap4 .select2-results__option--highlighted.select2-results__option[aria-selected=true] {
  background-color: #007bff;
  color: #f8f9fa; }

.select2-container--bootstrap4 .select2-results__option[role=group] {
  padding: 0; }

.select2-container--bootstrap4 .select2-results__group {
  padding: 6px;
  display: list-item;
  color: #6c757d; }

.select2-container--bootstrap4 .select2-selection__clear {
  width: 1.2em;
  height: 1.2em;
  line-height: 1.2em;
  padding-left: 0.3em;
  margin-top: 0.5em;
  border-radius: 100%;
  background-color: #6c757d;
  color: #f8f9fa;
  float: right;
  margin-right: 0.3em; }
  .select2-container--bootstrap4 .select2-selection__clear:hover {
    background-color: #343a40; }

AgaveJoe 30,126 Reputation points

2023-03-02T13:25:22.33+00:00

Seriously?! Your original code has nothing to do with the actual issue! You've wasted too much of my time. I have no desire to continue with this nonsense.
Analyst_SQL 3,576 Reputation points

2023-03-02T15:15:04.27+00:00

@AgaveJoe

I figure out ,it is not working my template ,which i am using in project

Answer 2

I did my best to create a test based on your unfinished code. As far as I can tell, the reason only 2 inputs are populated is because you did not write any code that sets the other input values?!

@model MvcBasic.Controllers.ItemModel
@{
    ViewBag.Title = "CreaterItem";
    Layout = "~/Views/Shared/_Layout.cshtml";

}

<h2>Index</h2>


<div class="col-lg-8">
    <div class="card card-default mb-5">
        <div class="card-header">Employee Form</div>
        <div class="card-body">

            @using (Html.BeginForm("CreateItem", "Item", FormMethod.Post))

            {
                @Html.AntiForgeryToken()

                <div class="form-horizontal">

                    <hr />
                    @Html.ValidationSummary(true, "", new { @class = "text-danger" })


                    <div class="form-group">
                        @Html.LabelFor(model => model.Descriptionitem, htmlAttributes: new { @class = "control-label col-md-2" })
                        <div class="col-md-10">
                            @Html.EditorFor(model => model.Descriptionitem, new { htmlAttributes = new { @class = "form-control", @id = "item_Name" } })
                            @Html.ValidationMessageFor(model => model.Descriptionitem, "", new { @class = "text-danger" })
                        </div>
                    </div>

                    <div class="form-group">
                        @Html.LabelFor(model => model.BaleSize, htmlAttributes: new { @class = "control-label col-md-2" })
                        <div class="col-md-10">
                            @Html.EditorFor(model => model.BaleSize, new { htmlAttributes = new { @class = "form-control" } })
                            @Html.ValidationMessageFor(model => model.BaleSize, "", new { @class = "text-danger" })
                        </div>
                    </div>

                    <div class="form-group">
                        @Html.LabelFor(model => model.weight, htmlAttributes: new { @class = "control-label col-md-2" })
                        <div class="col-md-10">
                            @Html.EditorFor(model => model.weight, new { htmlAttributes = new { @class = "form-control" } })
                            @Html.ValidationMessageFor(model => model.weight, "", new { @class = "text-danger" })
                        </div>
                    </div>





                    <div class="form-group">
                        @Html.LabelFor(model => model.SecID, "Select Department Level", htmlAttributes: new { @class = "control-label col-md-6" })
                        <div class="col-md-10">
                            @* @Html.DropDownList("SecId", null, "Select Department", htmlAttributes: new { @class = "form-control", @id = "select2-1" })*@

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

                            @Html.ValidationMessageFor(model => model.SecID, "", new { @class = "text-danger" })
                        </div>
                    </div>
                    <div class="form-group">
                        @Html.LabelFor(model => model.IDUOM, htmlAttributes: new { @class = "control-label col-md-2" })
                        <div class="col-md-10">
                            @Html.EditorFor(model => model.IDUOM, new { htmlAttributes = new { @class = "form-control" } })
                            @Html.ValidationMessageFor(model => model.IDUOM, "", new { @class = "text-danger" })
                        </div>
                    </div>




                    <div class="form-group">
                        @Html.LabelFor(model => model.CID, "Select Category Level", htmlAttributes: new { @class = "control-label col-md-6" })
                        <div class="col-md-10">
                            @Html.DropDownList("cID", null, "Select Department", htmlAttributes: new { @class = "form-control", @id = "select2-2" })
                            @Html.ValidationMessageFor(model => model.CID, "", 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>


            }
            <h4>Item Search</h4>
            <hr />
            <div class="form-group">
                @Html.LabelFor(model => model.CodeItem, "Select Item", htmlAttributes: new { @class = "control-label col-md-6" })
                <div class="col-md-10">
                    @Html.DropDownList("codeitem", null, "Select Item", htmlAttributes: new { @class = "form-control", @id = "select2-3" })
                    @Html.ValidationMessageFor(model => model.CodeItem, "", new { @class = "text-danger" })
                </div>
            </div>



            <section class="content">
                <div class="row">
                    <div class="col-xs-12">
                        <div class="box box-primary">


                            <div class="box-body">
                                <table id="example1" class="table table-bordered table-striped">
                                    <thead>
                                        <tr>
                                            <th>ID</th>
                                            <th>Item Name</th>
                                            <th>Section</th>
                                            <th>BaleSize</th>
                                            <th>weight</th>
                                            <th>UOM</th>
                                            <th>Action</th>

                                        </tr>
                                    </thead>
                                    <tbody>

                                        @foreach (var item in Model.Itemss)
                                        {
                                            <tr>
                                                <td>@Html.DisplayFor(module => item.CodeItem)</td>
                                                <td>@Html.DisplayFor(module => item.Descriptionitem)</td>
                                                <td>@Html.DisplayFor(module => item.Section)</td>
                                                <td>@Html.DisplayFor(module => item.BaleSize)</td>
                                                <td>@Html.DisplayFor(module => item.weight)</td>
                                                <td>@Html.DisplayFor(module => item.UOM)</td>

                                            </tr>
                                        }
                                    </tbody>
                                    <tfoot>
                                    </tfoot>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>




            </section>

        </div>
    </div>
</div>

@*<script src="~/Content/Template/vendor/ddlsearch.js"></script>*@

@section scripts {
    <script type="text/javascript">
        $(document).ready(function () {
            $("#select2-3").on('change', function (e) {
                $.ajax({
                    type: 'GET',
                    url: "/Item/GetItem",
                    dataType: 'json',
                    data: { codeitem: $(this).find('option:selected').val() },
                    success: function (response) {
                        $('#example1').hide();
                        $('#example1 tbody').empty();
                        $.each(response, function (i, item) {
                            var rows = "<tr>" +
                                "<td>" + item.CodeItem + "</td>" +
                                "<td>" + item.Descriptionitem + "</td>" +
                                "<td>" + item.Section + "</td>" +
                                "<td>" + item.BaleSize + "</td>" +
                                "<td>" + item.weight + "</td>" +
                                "<td>" + item.UOM + "</td>" +
                                "<td><a id='lnkView' href='javascript:void(0);'>View</a></td>" +
                                "</tr>";
                            $('#example1 tbody').append(rows);
                        });
                        $('#example1').show();
                    },
                    //error: function () {
                    //}
                });
            });
        });

        $(function () {
            $.ajax({
                type: 'GET',
                url: "/Item/SelectItem",
                dataType: 'json',
                data: {},
                success: function (response) {
                    $('#example1 tbody').empty();
                    $.each(response, function (i, item) {
                        var rows = "<tr>" +
                            "<td>" + item.CodeItem + "</td>" +
                            "<td>" + item.Descriptionitem + "</td>" +
                            "<td>" + item.Section + "</td>" +
                            "<td>" + item.BaleSize + "</td>" +
                            "<td>" + item.weight + "</td>" +
                            "<td>" + item.UOM + "</td>" +
                            "<td><a id='lnkView' href='javascript:void(0);'>View</a></td>" +
                            "</tr>";
                        $('#example1 tbody').append(rows);
                    });
                    $('#example1').show();
                },
                //error: function () {
                //}
            });

            $('body').on('click', '#example1 tbody tr', function () {
                $("#item_Name").val($(this).find('td').eq(1).html());
                $("#select2-1").val($(this).find('td').eq(2).html());
                $("#BaleSize").val($(this).find('td').eq(3).text());
                $("#weight").val($(this).find('td').eq(4).text());
                $("#IDUOM").val($(this).find('td').eq(5).text());
                $("#select2-3").val($(this).find('td').eq(0).text());
                
                

            });
        });
    </script>
}

Controller

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace MvcBasic.Controllers
{
    public class ItemModel
    {
        public int weight { get; set; }
        public string CodeItem { get; set; }
        public string Descriptionitem { get; set; }
        public string Section { get; set; }
        public int BaleSize { get; set; }
        public string UOM { get; set; }

        public int SecID { get; set; }
        public int  IDUOM { get; set; }
        public int CID { get; set; }

        public List<Item> Itemss { get; set; }
    }

    public class Item {
        public int weight { get; set; }
        public string CodeItem { get; set; }
        public string Descriptionitem { get; set; }
        public string Section { get; set; }
        public int BaleSize { get; set; }
        public string UOM { get; set; }
    }

    public class ItemController : Controller
    {
        private List<Item> MockData;

        private List<SelectListItem> cIDData;
        private List<SelectListItem> SecIdData;
        private List<SelectListItem> codeitemData;

        private SelectList cID;
        private SelectList SecId;
        private SelectList codeitem;

        public ItemController()
        {
            MockData = new List<Item>()
            {
                new Item()
                {
                    BaleSize = 96,
                    CodeItem = "1",
                    Descriptionitem = "Description 1",
                    Section = "1",
                    UOM  = "1",
                    weight = 10
                },
                new Item(){
                    BaleSize = 55,
                    CodeItem = "2",
                    Descriptionitem = "Description 1",
                    Section = "2",
                    UOM  = "2",
                    weight = 20
                },
                 new Item(){   
                     BaleSize = 54,
                    CodeItem = "3",
                    Descriptionitem = "Description 3",
                    Section = "3",
                    UOM  = "3",
                    weight = 40
                },

            };

            cIDData = new List<SelectListItem>()
            {
                new SelectListItem()
                {
                    Value ="1",
                    Text = "CID 1"
                },
                 new SelectListItem()
                {
                    Value ="2",
                    Text = "CID 2"
                },
                  new SelectListItem()
                {
                    Value ="3",
                    Text = "CID 3"
                }
            };

            SecIdData = new List<SelectListItem>()
            {
                new SelectListItem()
                {
                    Value ="1",
                    Text = "SecId 1"
                },
                 new SelectListItem()
                {
                    Value ="2",
                    Text = "SecId 2"
                },
                  new SelectListItem()
                {
                    Value ="3",
                    Text = "SecId 3"
                }
            };

            codeitemData = new List<SelectListItem>()
            {
                new SelectListItem()
                {
                    Value ="1",
                    Text = "codeitem 1"
                },
                 new SelectListItem()
                {
                    Value ="2",
                    Text = "codeitem 2"
                },
                  new SelectListItem()
                {
                    Value ="3",
                    Text = "codeitem 3"
                }
            };

            cID = new SelectList(cIDData, "Value", "Text");
            SecId = new SelectList(SecIdData, "Value", "Text");
            codeitem = new SelectList(codeitemData, "Value", "Text");
        }
        // GET: Item
        public ActionResult Index()
        {
            ItemModel item = new ItemModel();
            ViewBag.cID = cID;
            ViewBag.SecId = SecId;
            ViewBag.codeitem = codeitem;
            item.Itemss = MockData;
            return View(item);
        }
        public ActionResult CreateItem()
        {
            ItemModel item = new ItemModel();
            ViewBag.cID = cID;
            ViewBag.SecId = SecId;
            ViewBag.codeitem = codeitem;
            item.Itemss = MockData;
            return View(item);

        }
        [HttpPost]
        [ValidateAntiForgeryToken]
        public ActionResult CreateItem(ItemModel objmod)
        {
            if(!ModelState.IsValid)
            {
                return View(objmod);
            }
            return RedirectToAction("CreateItem");
        }


        public JsonResult GetItem(string codeitem)
        {
            var jsonResult = Json(MockData.Where(m => m.CodeItem == codeitem), JsonRequestBehavior.AllowGet);
            return jsonResult;
        }



        public JsonResult SelectItem()
        {
            IEnumerable<Item> jasonResult = MockData.Take(1).ToList();
            return Json(jasonResult, JsonRequestBehavior.AllowGet);
        }
    }
}

Analyst_SQL 3,576 Reputation points

2023-02-27T10:37:01.6433333+00:00

Still have same issue,dropdown list values is not passing from row to fields,but textbox field is populating
AgaveJoe 30,126 Reputation points

2023-02-27T11:54:32.6666667+00:00

The only select that is not populated when a row is clicked is the "Select Department" (select2-2). The reason is there is no department ID that I could find in your code. If the "select2-2" is the ID column then the code is simply...

$("#select2-2").val($(this).find('td').eq(0).text());

...which is the same as the select2-3.

akhter hussain, you have to understand that your code does not follow any standard MVC programming pattern and we cannot see the data or the model which makes helping you very difficult.

If the problem is clicking the "Create" button then you need to explain the use case. The design looks like an edit not create and the code calls a method that we cannot see.

int result = sdb.CreateItem(objmod);
Analyst_SQL 3,576 Reputation points

2023-02-27T12:18:37.41+00:00

@AgaveJoe

Please try to underdstand

I am populating dropdown on page load below,as you can see (ViewBag.SecId) is for Department dropdown list populate

public ActionResult CreateItem() { ModelState.Clear(); ItemModel item = new ItemModel(); //For Loading Data item.Itemss = sdb.GetItem(); var cID = 0; var secID = 0; var codeitEM = 0; ViewBag.cID = new SelectList(DB.Catagories.Where(bt => bt.CID > cID), "CID", "CName", "0"); ViewBag.SecId = new SelectList(DB.Sections.Where(bt => bt.SecID > secID), "SecID", "Secnam", "0"); ViewBag.codeitem = new SelectList(DB.ItemMasterFiles.Where(bt => bt.CodeItem > codeitEM), "codeitem", "Descriptionitem", "0"); return View(item); }

select2-2 is CSS and JS reference and also using for dropdown list ID

as you said ,that i am not following MVC pattern Standard ,can you help me to refine above controller code .

here is my department table

USE [SilverProduction] GO /****** Object: Table [dbo].[Sections] Script Date: 27/02/2023 5:15:28 PM ******/ SET ANSI_NULLS ON GO SET QUOTED_IDENTIFIER ON GO SET ANSI_PADDING ON GO CREATE TABLE [dbo].[Sectionsss]( [SecID] [int] IDENTITY(1,1) NOT NULL, [Secnam] [varchar](50) NULL, CONSTRAINT [PK_Sections] PRIMARY KEY CLUSTERED ( [SecID] ASC )WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY] ) ON [PRIMARY] GO SET ANSI_PADDING OFF GO

i am make this form for creating not for editing or updating.

Answer 3

AgaveJoe 30,126

This is your original problem statement.

I am selecting or Clicking on row of table, then relevant data from get populate in downdown and text field, issue is that text field is getting populate ,but dropdown field is not getting populating

Your original code only sets the value of two inputs when a table row was selected; #item_Name and #select2-1. I provided code that sets the other input values when a row is clicked.

If the problem is a select's options are not populated. That's probably due to you naming the table "Sectionsss" while the entity name is "Sections". Do you have two tables? Sectionsss and Sections????

ViewBag.SecId = new SelectList(DB.Sections.Where(bt => bt.SecID > secID), "SecID", "Secnam", "0");

Analyst_SQL 3,576

I just missed type ,it is actually Sections

Your original code only sets the value of two inputs when a table row was selected; #item_Name and #select2-1. I provided code that sets the other input values when a row is clicked.

I have mentioned all value in table.

 $(function () {
        $.ajax({
            type: 'GET',
            url: "/Item/SelectItem",
            dataType: 'json',
            data: {},
            success: function (response) {
                $('#example1 tbody').empty();
                $.each(response, function (i, item) {
                    var rows = "<tr>" +
                        "<td>" + item.CodeItem + "</td>" +
                        "<td>" + item.Descriptionitem + "</td>" +
                        "<td>" + item.Section + "</td>" +
                        "<td>" + item.BaleSize + "</td>" +
                        "<td>" + item.weight + "</td>" +
                        "<td>" + item.UOM + "</td>" +
                        "<td><a id='lnkView' href='javascript:void(0);'>View</a></td>" +
                        "</tr>";
                    $('#example1 tbody').append(rows);
                });
                $('#example1').show();
            },
            //error: function () {
            //}
        });

        $('body').on('click', '#example1 tbody tr', function () {
            $("#item_Name").val($(this).find('td').eq(1).html());
            $("#select2-1").val($(this).find('td').eq(2).html());
            $("#BaleSize").val($(this).find('td').eq(3).text());
            $("#weight").val($(this).find('td').eq(4).text());
            $("#IDUOM").val($(this).find('td').eq(5).text());
            $("#select2-3").val($(this).find('td').eq(0).text());



        });
    });
</script>

AgaveJoe 30,126 Reputation points

2023-02-27T15:33:31.5966667+00:00

I just missed type ,it is actually Sections

It is impossible to provide meaningful assistance if the code posted on the forum is not the same code that is executing on the system.

What problem you are trying to solve? You say the form is for creating but the code is clearly copying data from a table row to inputs which is typically an edit/update.

Why do you have code Razor code (View) that initializes the table but is overwritten by an AJAX call when the page loads in the browser?

If you need further assistance, explain the expected results, the actual results, and steps.

I provided sample code that works. Perhaps you can take a look at that code and explain what is not working as expected.

Answer 4

AgaveJoe 30,126

Maybe you are asking how to select a select's option using the text rather than the value????

Below is an example.


@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>Index</h2>

<div>
    <select id="select2-1" name="SelId">
        <option value="">-- Select --</option>
        <option value="1">Belt</option>
        <option value="2">Pant</option>
    </select>
</div>

<div>
    <table id="example1">
        <thead>
            <tr>
                <th>Item name</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Belt</td>
            </tr>
            <tr>
                <td>Pant</td>
            </tr>
        </tbody>
    </table>
</div>

@section scripts
        {
    <script>
        $('body').on('click', '#example1 tbody tr', function () {

            //Get and show the value in the console. 
            var item = $(this).find('td').eq(0).text();
            console.log(item);

            //Get the value from the select
            var val = $('#select2-1 option').filter(function () { return $(this).html() == item }).val();
            console.log(val);

            $("#select2-1").val(val);
        });
    </script>
}

Analyst_SQL 3,576 Reputation points

2023-02-28T18:08:45.5+00:00

@AgaveJoe

Maybe you are asking how to select a select's option using the text rather than the value????

i want value,after select ,i will again insert value into database table,
AgaveJoe 30,126 Reputation points

2023-02-28T21:35:39.12+00:00

Did you fix any of the issues with your code that I pointed out? The new table design has two columns but your script is looking for a third column. The SQL you shared populates the new HTML table with text not the value the select needs. However, the code I posted above queries the select to get the option by text and return the value.

There are a few other other oddities with your design/code that basic debugging will find.

Lastly, did you review the working code I provided and compare it to your code? I provided actual mock data so you have that as well.

Analyst_SQL 3,576

I used below code

  <script>
        $('body').on('click', '#example1 tbody tr', function () {

            //Get and show the value in the console. 
            var item = $(this).find('td').eq(0).text();
            console.log(item);

            //Get the value from the select
            var val = $('#select2-1 option').filter(function () { return $(this).html() == item }).val();
            console.log(val);

            $("#select2-1").val(val);
        });
    </script>

value is displaying in console ,but not populating in dropdownlist,i upload image for your consideration

Analyst_SQL 3,576 Reputation points

2023-03-01T07:56:03.22+00:00

Maybe you are asking how to select a select's option using the text rather than the value????

I want value ,but on front it display text but on back it also hold value in dropdown list ,because i have to insert value into database table
AgaveJoe 30,126 Reputation points

2023-03-01T11:59:44.8866667+00:00
I want value ,but on front it display text but on back it also hold value in dropdown list ,because i have to insert value into database table

I do not understand your response. I think you want to select an option by text which is the code sample I provided. Most likely you have other design issues. For example, this SQL shows that Belt and Pant have the same Id which must be a mistake. I pointed out this mistake in a previous post.

Create table Sections (SecID int,Secnam varchar(50)) Insert into Sections values(1,'Belt') Insert into Sections values(1,'Pant')

If the select HTML looks like the code below then your design will not work because there is no way to select a unique item.

<select id="select2-1" name="SelId"> <option value="">-- Select --</option> <option value="1">Belt</option> <option value="1">Pant</option> </select>

Unfortunately, your code and posts are very sloppy. When the community informs you about the mistakes you don't give us any feedback or updated code. We have no idea if you fixed the problems. To make things more confusing you've posted code that is not part of your project!

Secondly, you posted a screenshot but you did not include the table!!!!! the table is were the values are coming from!!!! Why??????????

If you are interested in fixing your code then you need to make an effort to debug, troubleshoot, and clean up your code! I provided working code with mock data. Compare my sample code with your code. You'll want to look at the HTML in dev tools and pay attention to select options and data in general.

Lastly, the 404 warnings are related to loading map files. Enable this feature in your browser. Again, make an effort... this information is easily found with a basic internet search. The error seems to be related building an SPA. It's not clear what you've done...

Answer 5

Lan Huang-MSFT 30,186 Microsoft External Staff

Hi @Analyst_SQL ,
I tested your code with simple data, and you try to change the eq() of select to 0.

It may be that the index of eq(index) is inconsistent due to data problems, but the reason should be related to this. You can try changing it to a different number to see.

$('body').on('click', '#example1 tbody tr', function () {
            $("#item_Name").val($(this).find('td').eq(0).html());
            $("#select2-1").val($(this).find('td').eq(0).html());
            $("#select2-3").val($(this).find('td').eq(0).html());

        });

TEST

Best regards,
Lan Huang

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Analyst_SQL 3,576 Reputation points

2023-03-01T11:04:11.72+00:00

still not working,i changed number and on console following error is showing

Failed to load resource: the server responded with a status of 404 (Not Found)
Analyst_SQL 3,576 Reputation points

2023-03-01T12:11:24.24+00:00

i got frustrated ,do not know ,where i am making mistake,
AgaveJoe 30,126 Reputation points

2023-03-01T14:04:58.1766667+00:00

This is very very frustrating! I already shared whole code with sample data!!!!!
Analyst_SQL 3,576 Reputation points

2023-03-01T14:24:32.01+00:00

@AgaveJoe

I used your code accordingly ,but just dropdown value is not populating ,text filed are populating fine.

so where i am make mistake in dropdown
AgaveJoe 30,126 Reputation points

2023-03-01T14:52:21.1866667+00:00

so where i am make mistake in dropdown

My best guess is you lack basic troubleshooting skills. I created a new post that has detailed troubleshooting steps.
Analyst_SQL 3,576 Reputation points

2023-03-01T19:10:43.19+00:00

i check in console in chrome, but no error is coming their for dropdown list
Analyst_SQL 3,576 Reputation points

2023-03-02T01:17:07.7966667+00:00

@Lan Huang-MSFT

i think ,there is issue in dropdown.

can you share whole code, secondly are you getting data in dropdown from database?

Lan Huang-MSFT 30,186 Microsoft External Staff

Hi @akhter hussain ,

Below is my entire code, I need to emphasize that I just did a simple test based on your code.

CreaterItem View

@model MvcEPPLUS.Models.ItemModel

@{
    ViewBag.Title = "CreaterItem";

}


<div class="col-lg-8">
    <div class="card card-default mb-5">
        <div class="card-header">Employee Form</div>
        <div class="card-body">
            @using (Html.BeginForm("CreateItem", "Item", FormMethod.Post))
            {
                @Html.AntiForgeryToken()
                <div class="form-horizontal">
                    <hr />
                    @Html.ValidationSummary(true, "", new { @class = "text-danger" })
                    <div class="form-group">
                        @Html.LabelFor(model => model.Descriptionitem, htmlAttributes: new { @class = "control-label col-md-2" })
                        <div class="col-md-10">
                            @Html.EditorFor(model => model.Descriptionitem, new { htmlAttributes = new { @class = "form-control", @id = "item_Name" } })
                            @Html.ValidationMessageFor(model => model.Descriptionitem, "", new { @class = "text-danger" })
                        </div>
                    </div>
                    <h4>Item Search</h4>
                    <hr />
                    <div class="form-group">
                        @Html.LabelFor(model => model.CodeItem, "Select Item", htmlAttributes: new { @class = "control-label col-md-6" })
                        <div class="col-md-10">
                            @Html.DropDownList("codeitem", null, "Select Item", htmlAttributes: new { @class = "form-control", @id = "select2-1" })
                            @Html.ValidationMessageFor(model => model.CodeItem, "", 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>
            }
            <h4>Item Search</h4>
            <hr />
            <div class="form-group">
                @Html.LabelFor(model => model.CodeItem, "Select Item", htmlAttributes: new { @class = "control-label col-md-6" })
                <div class="col-md-10">
                    @Html.DropDownList("codeitem", null, "Select Item", htmlAttributes: new { @class = "form-control", @id = "select2-3" })
                    @Html.ValidationMessageFor(model => model.CodeItem, "", new { @class = "text-danger" })
                </div>
            </div>
            <section class="content">
                <div class="row">
                    <div class="col-xs-12">
                        <div class="box box-primary">
                            <div class="box-body">
                                <table id="example1" class="table table-bordered table-striped">
                                    <thead>
                                        <tr>
                                            <th>ID</th>
                                            <th>Item Name</th>                                       
                                        </tr>
                                    </thead>
                                    <tbody>

                                        @foreach (var item in Model.Itemss)
                                        {
                                            <tr>
                                                <td>@Html.DisplayFor(module => item.CodeItem)</td>
                                                <td>@Html.DisplayFor(module => item.Descriptionitem)</td>                                              
                                            </tr>
                                        }
                                    </tbody>
                                    <tfoot>
                                    </tfoot>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

        </div>
    </div>
</div>

<script src="~/Scripts/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $("#select2-3").on('change', function (e) {
            $.ajax({
                type: 'GET',
                url: "/Item/GetItem",
                dataType: 'json',
                data: { codeitem: $(this).find('option:selected').val() },
                success: function (response) {
                    $('#example1').hide();
                    $('#example1 tbody').empty();
                    $.each(response, function (i, item) {
                        var rows = "<tr>" +
                            "<td>" + item.CodeItem + "</td>" +
                            "<td>" + item.Descriptionitem + "</td>" +
                         
                           
                            "<td><a id='lnkView' href='javascript:void(0);'>View</a></td>" +
                            "</tr>";
                        $('#example1 tbody').append(rows);
                    });
                    $('#example1').show();
                },
                error: function () {
                }
            });
        });
    });

    $(function () {
        $.ajax({
            type: 'GET',
            url: "/Item/SelectItem",
            dataType: 'json',
            data: {},
            success: function (response) {
                $('#example1 tbody').empty();
                $.each(response, function (i, item) {
                    var rows = "<tr>" +
                        "<td>" + item.CodeItem + "</td>" +
                        "<td>" + item.Descriptionitem + "</td>" +
                      
                       
                        "<td><a id='lnkView' href='javascript:void(0);'>View</a></td>" +
                        "</tr>";
                    $('#example1 tbody').append(rows);
                });
                $('#example1').show();
            },
            error: function () {
            }
        });

        $('body').on('click', '#example1 tbody tr', function () {
            $("#item_Name").val($(this).find('td').eq(0).html());
            $("#select2-1").val($(this).find('td').eq(0).html());
            $("#select2-3").val($(this).find('td').eq(0).html());

        });
    });
</script>

ItemController

public class ItemController : Controller
    {
       SilverProductionEntities DB = new SilverProductionEntities();
       
      
        ItemModelDal sdb = new ItemModelDal();
        public ActionResult CreateItem()
        {                    
            ModelState.Clear();
            ItemModel item = new ItemModel();
            //For Loading Data
            ViewBag.codeitem =new SelectList(DB.GetList().Where(bt => bt.CodeItem >=0), "codeitem", "Descriptionitem", "0");          
            item.Itemss = sdb.GetItem();                 
            return View(item);
        }      
        public JsonResult GetItem(string codeitem)
        {
            List<ItemModel> items = new List<ItemModel>();

            using (SqlConnection con = new SqlConnection("Data Source=(localdb)\\MSSQLLocalDB;Initial Catalog=master;Integrated Security=True;Connect Timeout=30;Encrypt=False;TrustServerCertificate=False;ApplicationIntent=ReadWrite;MultiSubnetFailover=False;"))
            {
                string query = "SELECT CodeItem,Descriptionitem FROM ItemMasterFile ";
                using (SqlCommand cmd = new SqlCommand(query))
                {
                    cmd.Connection = con;
                    cmd.Parameters.AddWithValue("@CodeItem", codeitem);
                    con.Open();
                    using (SqlDataReader sdr = cmd.ExecuteReader())
                    {
                        while (sdr.Read())
                        {
                            items.Add(new ItemModel
                            {
                                CodeItem = Convert.ToInt32(sdr["CodeItem"]),
                                Descriptionitem = Convert.ToString(sdr["Descriptionitem"]),
                               
                            });
                        }
                    }
                    con.Close();
                }
            }
            var jsonResult = Json(items, JsonRequestBehavior.AllowGet);
            return jsonResult;


        }       
        public JsonResult SelectItem()
        {
            IEnumerable<ItemMasterFile> jasonResult = DB.GetList().Take(1).ToList();
            return Json(jasonResult, JsonRequestBehavior.AllowGet);
        }
    }

Models

public class ItemMasterFile
    {

        public int CodeItem { get; set; }
         public string Descriptionitem { get; set; }
    }
    public class ItemModel
    {
        public int CodeItem { get; set; }
        public string Descriptionitem { get; set; }

        public string BaleSize { get; set; }
        public Nullable<int> weight { get; set; }
        public Nullable<int> SecID { get; set; }
        public string Section { get; set; }
        public string Packsize { get; set; }
        public string ALID { get; set; }
        public Nullable<int> IDUOM { get; set; }
        public string UOM { get; set; }
        public Nullable<System.DateTime> entryDate { get; set; }
        public Nullable<int> CID { get; set; }
        public string Icn { get; set; }
        public Nullable<int> TiD { get; set; }
        public Nullable<int> RID { get; set; }
        public Nullable<System.DateTime> udate { get; set; }
        public string IPAddress { get; set; }
        public Nullable<int> delid { get; set; }
        public string I_Status { get; set; }
        public Nullable<System.TimeSpan> U_Time { get; set; }
        public string I_Cat { get; set; }
        public string I_Hot { get; set; }
        public Nullable<decimal> Y_per { get; set; }
        public Nullable<int> W_Type { get; set; }
        public Nullable<int> Empid { get; set; }
        public Nullable<int> I_Rate { get; set; }
        public Nullable<int> I_Level { get; set; }


        public List<ItemModel> Itemss { get; set; }
    }
    public class ItemModelDal
    {

        SqlConnection con = new SqlConnection("Data Source=(localdb)\\MSSQLLocalDB;Initial Catalog=master;Integrated Security=True;Connect Timeout=30;Encrypt=False;TrustServerCertificate=False;ApplicationIntent=ReadWrite;MultiSubnetFailover=False;");


        public List<ItemModel> GetItem()
        {
            List<ItemModel> item = new List<ItemModel>();
            SqlCommand cmd = new SqlCommand("SELECT Codeitem,Descriptionitem FROM ItemMasterFile where codeitem is null", con);
            cmd.CommandType = CommandType.Text;
            SqlDataAdapter sd = new SqlDataAdapter(cmd);
            DataTable dt = new DataTable();
            con.Open();
            sd.Fill(dt);
            con.Close();
            foreach (DataRow dr in dt.Rows)
            {
                item.Add(
                new ItemModel
                {
                    CodeItem = Convert.ToInt32(dr["CodeItem"]),
                    Descriptionitem = Convert.ToString(dr["Descriptionitem"]),
                  
                  
                });
            }
            return item;
        }

    }

SilverProductionEntities

 public class SilverProductionEntities 
    {   
        SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["SilverProductionEntities"].ToString());
        public IEnumerable<ItemMasterFile> GetList()
        {
            List<ItemMasterFile> item = new List<ItemMasterFile>();
            SqlCommand cmd = new SqlCommand("SELECT Codeitem,Descriptionitem FROM ItemMasterFile", con);
            cmd.CommandType = CommandType.Text;
            SqlDataAdapter sd = new SqlDataAdapter(cmd);
            DataTable dt = new DataTable();
            con.Open();
            sd.Fill(dt);
            con.Close();
            foreach (DataRow dr in dt.Rows)
            {
                item.Add(
                new ItemMasterFile
                {
                    CodeItem = Convert.ToInt32(dr["CodeItem"]),
                    Descriptionitem = Convert.ToString(dr["Descriptionitem"]),

                });
            }
            return item;
        }       
        }

CREATE TABLE [dbo].[ItemMasterFile] (
    [CodeItem]        INT          NULL,
    [Descriptionitem] VARCHAR (50) NULL,
    [SecID]           INT          NULL,
    [CID]             INT          NULL
);

Analyst_SQL 3,576 Reputation points

2023-03-02T09:24:20.93+00:00

@Lan Huang-MSFT

i have same code ,as you provided above, might i have another issue ,which is creating problem
Analyst_SQL 3,576 Reputation points

2023-03-02T09:26:36.5666667+00:00

i followed your step code, but still have same issue think it could be other issue, which creating problem
Lan Huang-MSFT 30,186 Reputation points Microsoft External Staff

2023-03-02T09:35:28.05+00:00

Hi @akhter hussain ,

Are you sure it doesn't work after trying the exact same? I suggest you reopen a new project and try my steps from scratch.

I also tested AgaveJoe's code and it works fine too. You said it might be another problem, if you don't provide it, it's really hard for us to help you.
Analyst_SQL 3,576 Reputation points

2023-03-02T14:47:45.71+00:00

@Lan Huang-MSFT

I created new project ,there your code is working fine,having issue in my template ,so how could i figure out
Lan Huang-MSFT 30,186 Reputation points Microsoft External Staff

2023-03-03T01:30:01.26+00:00

Hi @akhter hussain ,

Based on the information you have provided so far, we have indeed done our best to restore your issue and provide you with a solution.

You can compare my code with yours and see what's different. Maybe you could try building an ItemMasterFile class separately.
Analyst_SQL 3,576 Reputation points

2023-03-03T07:14:01.66+00:00

it is not issue of itemmasterfile class,this issue happening due to template ,by the way thanks

Share via

select table row value populate in form control(Dropdown,text field)

5 additional answers

Your answer