Populate TextBox based on DropDownList in HTML Table Row using jQuery Ajax in ASP.Net MVC

Hi mahesh213,

Check this example. Now please take its reference and correct your code.

Database

For this example I have used of Northwind database that you can download using the link given below.

Download Northwind Database

Controller

public class HomeController : Controller
{
    // GET: /Home/
    public ActionResult Index()
    {
        return View();
    }

    public ActionResult GetProducts()
    {
        NorthwindEntities entities = new NorthwindEntities();
        List<Categorty> items = entities
                                .Products.OrderBy(x => x.ProductName)
                                .Select(x => new Categorty
                                {
                                    CategortyName = x.ProductName,
                                    CategoryID = x.ProductID
                                }).ToList();

        return Json(items, JsonRequestBehavior.AllowGet);
    }

    public ActionResult GetPrice(int id)
    {
        NorthwindEntities entities = new NorthwindEntities();
        decimal? price = entities.Products.Where(x => x.ProductID == id).Select(x => x.UnitPrice).FirstOrDefault();
        return Json(price, JsonRequestBehavior.AllowGet);
    }

    public class Categorty
    {
        public string CategortyName { get; set; }
        public int CategoryID { get; set; }
    }
}

View

<div class="container">
    <div class="details">
        <table class="table table-responsive">
            <tr>
                <td>Name</td>
                <td>Rate</td>
                <td></td>
            </tr>
            <tr class="mycontainer" id="mainrow">
                <td>
                    <select id="ddlProducts" class="pc form-control" onchange="LoadRate(this)">
                        <option>Select</option>
                    </select>
                </td>
                <td><input type="text" id="txtRate" class="rate form-control" disabled="disabled" /></td>
                <td><input type="button" id="btnAdd" value="Add" class="btn btn-success" /></td>
            </tr>
        </table>
        <hr />
        <div id="orderItems">
            <table class="table table-responsive" id="orderdetailsItems">
            </table>
        </div>
    </div>
</div>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
    var Categories = [];
    function LoadCategory(element) {
        if (Categories.length == 0) {
            $.ajax({
                type: "GET",
                url: '/Home/GetProducts',
                success: function (data) {
                    Categories = data;
                    renderCategory(element);
                }
            })
        } else {
            renderCategory(element);
        }
    }

    function renderCategory(element) {
        var $ele = $(element);
        $ele.empty();
        $ele.append($('<option/>').val('0').text('Select'));
        $.each(Categories, function (i, val) {
            $ele.append($('<option/>').val(val.CategoryID).text(val.CategortyName));
        })
    }
    function LoadRate(ele) {
        var id = $(ele).find('option:selected').val();
        var txtRate = $(ele).closest('tr').find('.rate');
        if (id != 0) {
            $.ajax({
                type: "GET",
                url: '/Home/GetPrice',
                data: "id=" + id,
                success: function (data) {
                    $(txtRate).removeAttr('disabled');
                    $(txtRate).val(data);
                }
            });
        } else {
            $(txtRate).attr('disabled', 'disabled');
            $(txtRate).val('');
        }
    }
    $(document).ready(function () {
        LoadCategory($('#ddlProducts'));
        $('#btnAdd').click(function () {
            var $newRow = $('#mainrow').clone().removeAttr('id');
            $('.pc', $newRow).val($('#ddlProducts').find('option:selected').val());
            $('#ddlProducts,#txtRate,#btnAdd', $newRow).removeAttr('id');
            $('#orderdetailsItems').append($newRow);
            $('#ddlProducts').val('0');
            $('#txtRate').val('');
            $('#txtRate').attr('disabled', 'disabled');
        })
    });
</script>

Screenshot