Creating helper popup in MVC5 to fill textbox itemname and description

Creating helper popup to select and fill item name and description on type item name on textbox as shown in figure below:






using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.ComponentModel.DataAnnotations.Schema;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Web.Mvc;

namespace msPoojaElectrical.Models.Material
{
    [Table("ItemMaster")]
    public class ItemMasterModel
    {
        public Int32 ITEM_APP_UNIT { get; set; }
        [Key]
        public Int64 ITEM_ID { get; set; }
        public string ITEM_CODE { get; set; }
        public string ITEM_NAME { get; set; }
        public string ITEM_DESC { get; set; }
        public string ITEM_RATE { get; set; }
        public string ITEM_QTY { get; set; }
        public string ITEM_STATUS { get; set; }

        public string ITEM_OPRLOG { get; set; }
        [NotMapped]
        public double ITEM_AMT { get; set; }
        [NotMapped]
        public string PopId { get; set; }
        [NotMapped]
        public string PopName { get; set; }
        [NotMapped]
        public List<SelectListItem> ddlItemType { get; set; }
    }
}

-----------------------------------------------------------------------------------

using msPoojaElectrical.Controllers;
using msPoojaElectrical.Models.Material;
using System;
using System.Collections.Generic;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace msPoojaElectrical.Areas.Material.Controllers
{
    public class ItemMasterController : BaseController
    {
        // GET: Material/ItemMaster
     
     
        public ActionResult CreateItem()
        {
         
            return View();
        }

        [HttpPost]
        public ActionResult CreateItem(ItemMasterModel itemMasterModel)
        {
         
            return View();
        }
     
    }

}

-----------------------------------------------------------------------------

@model msPoojaElectrical.Models.Material.ItemMasterModel

@{
    ViewBag.Title = "CreateItem";
    Layout = "~/Views/Shared/_LayoutNew.cshtml";
}

<style>
    #modalPopup {
        top: -425px;
        z-index: 99999999;
    }
</style>

<h2 class="text-center">Create Item</h2>
<br />
@using (Html.BeginForm("CreateItem", "ItemMaster", FormMethod.Post, new { @id = "formCreateItem" }))
{
    @Html.AntiForgeryToken()
    @Html.HiddenFor(model => model.PopId, new { htmlAttributes = new { @value = "txtItemCode", @id = "PopId" } })
    @Html.HiddenFor(model => model.PopName, new { htmlAttributes = new { @value = "txtItemDesc", @id = "PopName" } })
    <div class="form-horizontal">

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


        <div class="form-group">
            @Html.LabelFor(model => model.ITEM_CODE, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-4">
                @Html.EditorFor(model => model.ITEM_CODE, new { htmlAttributes = new { @class = "form-control", @id = "txtItemCode", @onkeyup = "ShowItemCode();" } })
                @Html.ValidationMessageFor(model => model.ITEM_CODE, "", new { @class = "text-danger" })
            </div>
        </div>

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

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

        <div class="form-group">
            @Html.LabelFor(model => model.ITEM_RATE, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-4">
                @Html.EditorFor(model => model.ITEM_RATE, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.ITEM_RATE, "", new { @class = "text-danger" })
            </div>
        </div>
        <div class="form-group">
            @Html.LabelFor(model => model.ITEM_QTY, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-4">
                @Html.EditorFor(model => model.ITEM_QTY, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.ITEM_QTY, "", new { @class = "text-danger" })
            </div>
        </div>
        <div class="form-group">
            @Html.LabelFor(model => model.ITEM_AMT, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-4">
                @Html.EditorFor(model => model.ITEM_AMT, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.ITEM_AMT, "", new { @class = "text-danger" })
            </div>
        </div>
        <div class="row">
            <div class="col-md-7 text-center">
                <input type="submit" value="Create" class="btn btn-primary" />
            </div>
        </div>
    </div>
}

<div class="text-center">
    @Html.ActionLink("Back to List", "Index")
</div>

<script>
    $(document).ready(function () {
        $("#modalPopup").hide();
        $("#PopId").val('txtItemCode');
        $("#PopName").val('txtItemDesc');
    });

    function ShowItemCode() {

        debugger;
        var App_Unit = '@Request.RequestContext.HttpContext.Session["App_Unit"]';
        if (App_Unit == 0)
            App_Unit = 1;
        $.ajax({
            url: '@Url.Action("ItemHelper", "MasterHelp", new { area = ""})',
            data: {
                TableName: "ItemMaster",
                CodeField: "Item_Code",
                DescField: "Item_Desc",
                Condition: "Where Item_Code like '" + $("#txtItemCode").val().toUpperCase() + "%'"
            },
            type: "get"
        }).done(function (response) {
            $("#exampleModelLabel").html("");
            $("#exampleModelLabel").html("ItemCode");
            $("#modalBody").html(response);
            $("#modalPopup").show();
            $("#modalPopup").removeClass("fade");
        });
    };
</script>

---------------------------------------------------------------------------
In Model

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace msPoojaElectrical.Models
{
    public  class RawQuery
    {
        public class MasterHelp
        {
            public string Code { get; set; }
            public string Description { get; set; }
        }
    }
}


In MasterHelp Controller


using msPoojaElectrical.DAL;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using static msPoojaElectrical.Models.RawQuery;

namespace msPoojaElectrical.Controllers
{
    public class MasterHelpController : Controller
    {
        // GET: MasterHelp
        DataAccess db = new DataAccess();
        string strSql = "";
        public ActionResult ItemHelper(string TableName, string CodeField, string DescField, string Condition)
        {
            strSql = "Select " + CodeField + " as Code, " + DescField + " as Description from " + TableName + " "+ Condition;
            List<MasterHelp> data = db.Database.SqlQuery<MasterHelp>(strSql).ToList();
           // return PartialView("_ItemHelper",data);
            return PartialView("_Index",data);
        }
    }
}

---------------------------------------------------------------------------------
In Partial View _Index

@model List<msPoojaElectrical.Models.RawQuery.MasterHelp>

<script type="text/javascript">
    // todo ; uncomment
    //$(document.ready(function () {
    //    var Table = $('.HelpTableClass').DataTable({
    //        "ScrollY": "350px",
    //        "ScrollCollaspe": true,
    //        lengthChange: true
    //    });
    //}));

</script>
@*<script src="~/Content/Assets/js/jquery-2.1.4.min.js"></script>*@
@*<script src="~/Content/Assets/js/jquery-2.1.4.min.js"></script>*@
<style>
    /*TODO :*/
    /*Get Css for web grid*/
</style>


@{
    var grid = new WebGrid(source: Model, canPage: false, rowsPerPage: 20, ajaxUpdateContainerId: "gridContent");
}
<div id="gridContent">
    @grid.GetHtml(htmlAttributes: new { id = "HelpTable" },
                                        tableStyle: "HelpTableClass table table-striped table-bodered",
                                        headerStyle: "thead th-lg",
                                        columns: grid.Columns(grid.Column(columnName: "Code", header: "Code"),
                                                             grid.Column(columnName: "Description", header: "Description")
                                        ))
</div>

<script type="text/javascript">
    // todo ; uncomment
    //$(document).ready(function () {
    //    $("#gridContent a").removeAttr("href");
    //});

    $("#HelpTable").on('click', 'tbody > tr > td', function () {
     
        //var Id = $("#PopId").val();
        //var Name = $("#PopName").val();
        var Id = "txtItemCode";
        var Name = "txtItemDesc";

        //var Id2 = $("#ConId").val();
        //var Name2 = $("#ConName").val();
        var rowIndex = $(this).parent().html();
        //$("#modalPopup").modal('hide');
        $("#modalPopup").hide();
        $("#modalPopup").addClass("fade");

        var currentRow = $(this).closest("tr");
        var col1 = currentRow.find("td:eq(0)").html();
        var col2 = currentRow.find("td:eq(1)").html();
     
        $("#" + Id + "").val(col1);
        $("#" + Id + "").focus();
        if (Name != "") {
            $("#" + Name + "").val(col2);
            $("#" + Name + "").focus();
        }
     

        //$("#" + Id2 + "").val(col1);
        //$("#" + Id2 + "").focus();
        //if (Name2 != "") {
        //    $("#" + Name2 + "").val(col2);
        //    $("#" + Name2 + "").focus();
        //}

        $("#ConId").val('');
        $("#ConName").val('');
        $("#" + Id + "").trigger("change");
    });
</script>

-----------------------------------------------------------------------------------
In _LayoutNew

 <!---//End-da-slider----->


    <div id="modalPopup" class="modal-dialog fade" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-content">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
            <div class="modal-header">
                <h4 class="modal-title" id="exampleModelLabel"></h4>
            </div>
            <div class="modal-body" id="modalBody">
                @*<div class="wthree-info">
                 
                </div>*@
                <div class="row">
                    <div>
                        <div class="table-responsive"></div>
                    </div>
                </div>
                <div class="clearfix"></div>
            </div>
        </div>
    </div>