Select row in table and populate row value on Forms fieldsBelow is View Codeltdiv class34collg834gt ltdiv class34card carddefault mb534gt ltdiv class34cardheader34gtEmployee Formltdivgt ltdiv class34cardbody34gt using HtmlBeginForm34CreateItem34 34Item34 FormMethodPost HtmlAntiForgeryToken ltdiv class34formhorizontal34gt

Hi akhterRefer below sampleDatabaseCreate table Sections SecID int PRIMARY KEYSecnam varchar50Insert into Sections values139Belt39Insert into Sections values239Pant39Create table ItemMasterFile Codeitem int PRIMARY KEYsecid intInsert into ItemMasterFile values1139139Insert into ItemMasterFile values1239239Model Classpublic class CascadingModel public ListltSelectListItemgt Sections get set public ListltSelectListItemgt ItemMasterFiles get set public int SecId get set public int CodeItem get set Controllerpublic class HomeController Controller tempdbEntities DB new tempdbEntities GET Home public ActionResult Index CascadingModel model new CascadingModel var items from item in thisDBItemMasterFiles select new SelectListItem Text itemCodeitemToString

Referltscript type34textjavascript34gt function ajax type 39POST39 url 34HomeAjaxMethod34 dataType 39json39 data codeitem thisfind39optionselected39val success function response 39idexample1 tbody39empty eachresponse function i item var rows 34lttr class39info39gt34 34lttdgt34 itemsecid 34lttdgt34 34lttdgt34 itemCodeitem 34lttdgt34 34lttrgt34 39idexample1 tbody39appendrows error function response alertresponseresponseText 39body39on39click39 39idexample1 tbody tr39

Populate Forms fields on HTML Table row selection using jQuery in ASP.Net MVC

akhter

SOLVED CLOSED ACTIVE ANSWERED
User: akhter
Posted: on Feb 23, 2023 10:06 PM
Forum: ASP.Net MVC
Answer: 2
Views: 2251

Select row in table and populate row value on Forms fields.

Below is View Code.

<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" } })
                            @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.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-header">
                                <h3 class="box-title">Roles List</h3>
                            </div>

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

                                        </tr>
                                    </thead>
                                    <tbody>

                                        @foreach (var item in Model.Items)
                                        {
                                        <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>
                                            <td></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.CodeItem + "</td>" +
                            "<td>" + item.Descriptionitem + "</td>" +
                            "<td>" + item.Section + "</td>" +
                            "<td>" + item.BaleSize + "</td>" +
                            "<td>" + item.weight + "</td>" +
                            "<td>" + item.UOM + "</td>" +
                            "</tr>";
                        $('#example1 tbody').append(rows);
                    });
                    $('#example1').show();
                },
                error: function () {
                }
            });
        });
    });
</script>

Note: I have Dropdown populating using below code

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);

so how to populate dropdown, when selcting row with other field

Download FREE API for Word, Excel and PDF in ASP.Net

Shailesh...

0 2

Reply
ANSWER
User: ShaileshY
Replied: on Feb 24, 2023 12:56 AM
Modified: on Mar 01, 2023 06:43 AM
Report

Hi akhter,

Refer below sample.

Database

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

Create table ItemMasterFile (Codeitem int PRIMARY KEY,secid int)
Insert into ItemMasterFile values(11,'1')
Insert into ItemMasterFile values(12,'2')

Model Class

public class CascadingModel
{
    public List<SelectListItem> Sections { get; set; }
    public List<SelectListItem> ItemMasterFiles { get; set; }
    public int? SecId { get; set; }
    public int? CodeItem { get; set; }
}

Controller

public class HomeController : Controller
{
    tempdbEntities DB = new tempdbEntities();
    // GET: Home
    public ActionResult Index()
    {
        CascadingModel model = new CascadingModel();
        var items = (from item in this.DB.ItemMasterFiles
                        select new SelectListItem
                        {
                            Text = item.Codeitem.ToString(),
                            Value = item.secid.ToString()
                        }).ToList();
        var sections = (from item in this.DB.Sections
                        select new SelectListItem
                        {
                            Text = item.Secnam.ToString(),
                            Value = item.SecID.ToString()
                        }).ToList();

        model.ItemMasterFiles = items;
        model.Sections = sections;

        return View(model);
    }

    public ActionResult AjaxMethod()
    {
        return Json(this.DB.ItemMasterFiles.ToList());
    }
}

View

<body class="container">
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
    <script type="text/javascript">
        $(function () {
            $.ajax({
                type: 'POST',
                url: "/Home/AjaxMethod",
                dataType: 'json',
                data: { codeitem: $(this).find('option:selected').val() },
                success: function (response) {
                    $('#example1 tbody').empty();
                    $.each(response, function (i, item) {
                        var rows = "<tr class='info'>" +
                            "<td>" + item.secid + "</td>" +
                            "<td>" + item.Codeitem + "</td>"
                        "</tr>";
                        $('#example1 tbody').append(rows);
                    });
                },
                error: function (response) {
                    alert(response.responseText);
                }
            });

            $('body').on('click', '#example1 tbody tr', function () {
                $("#select2-1").val($(this).find('td').eq(0).html());
                $("#select2-2").val($(this).find('td').eq(0).html());
            });
        });
    </script>
    <table id="example1" class="table table-striped">
        <thead>
            <tr class="success">
                <th>Sec ID</th>
                <th>Code Item</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
    <hr />
    @Html.DropDownListFor(m => m.CodeItem, Model.ItemMasterFiles, "Please select", new { @class = "form-control", @id = "select2-1" })
    @Html.DropDownListFor(m => m.SecId, Model.Sections, "Please select", new { @class = "form-control", @id = "select2-2" })
</body>

Screenshot

AjayV

0 27

Reply
ANSWER
User: AjayV
Replied: on Mar 02, 2023 06:49 AM
Report

Refer

<script type="text/javascript">
    $(function () {
        $.ajax({
            type: 'POST',
            url: "/Home/AjaxMethod",
            dataType: 'json',
            data: { codeitem: $(this).find('option:selected').val() },
            success: function (response) {
                $('[id*=example1] tbody').empty();
                $.each(response, function (i, item) {
                    var rows = "<tr class='info'>" +
                        "<td>" + item.secid + "</td>" +
                        "<td>" + item.Codeitem + "</td>"
                    "</tr>";
                    $('[id*=example1] tbody').append(rows);
                });
            },
            error: function (response) {
                alert(response.responseText);
            }
        });

        $('body').on('click', '[id*=example1] tbody tr', function () {
            $("[id*=select2-1]").val($(this).find('td').eq(0).html());
            $("[id*=select2-2]").val($(this).find('td').eq(0).html());
        });
    });
</script>

I agree, here is the link: https://www.e-iceblue.com/Introduce/spire-office-for-net-free.html

Populate Forms fields on HTML Table row selection using jQuery in ASP.Net MVC

Company

Explore

Follow us

Contact Us