Send and receive data through jQuery ajax and update database in Entity Framework in ASP.NET MVC

When I select dropdownlist I want to retrieve data from database according to dropdownlist ID.

The whole row is retrieved through an ajax call and I only want PurchasePrice and RemainingQuantity to display through label in view.

Second is: I want to update tbl_addproduct when user give some date from input text I created a function in jQuery but don’t know how to update table row through PID.

Like previously I used in ASP.NET

update tbl_AddProduct 
set Date = @date 
where PID = @pid

I have two model classes:

public class addproduct
{
    public int PID { get; set; }
    public int VID { get; set; }
    public string ProductName { get; set; }
    public decimal ProductQuantity { get; set; }
    public decimal PurchasePrice { get; set; }
    public decimal SellingPrice { get; set; }
    public decimal RemainingQuantity { get; set; }
    public DateTime Date { get; set; }
    public int SID { get; set; }
    public Boolean Paid { get; set; }
}

Second view model. through this performing cascading dropdownlist

public class vendorproductVM
{
    public addproduct addpro { get; set; }
    public int VID { get; set; }
    public int PID { get; set; }
}

Index view:

        <div class="row">
            <div class="col-sm-6">
                @Html.Label("Vendor Name")
                @if (ViewBag.vendorlist != null)
                {
                    @Html.DropDownListFor(m => m.VID, ViewBag.vendorlist as SelectList, "Select", new { @class = "  form-control" })
                }

            </div>
            <div class="col-sm-6">
                @Html.Label("Product Name")
                @Html.DropDownListFor(m => m.PID, new SelectList(" "), "--Select--", new { @class = "form-control" })

            </div>
        </div>
        <div class="row">


            <div class="col-sm-4">
                @Html.Label("Remaining Quantity")
                @Html.LabelFor(m => m.addpro.RemainingQuantity)
            </div>

            <div class="col-sm-4">
                @Html.Label("Purchase Price")
                @Html.LabelFor(m => m.addpro.PurchasePrice )
            </div>

            <div class="col-sm-4">
                @Html.Label("Date")
                <input type="text" id="txt_date" />
            </div>
        </div>
        <div>
            <div class="col-sm-4" style="align-content: center">
                <input type="button" id="btn_save" value="Save" CssClass="btn btn-success" />
                <input type="button" id="btn_cancel" value="Cancel" CssClass="btn btn-danger" />
            </div>
        </div>
<script>
$(function () {
     $("#VID").change(function () {

        var vid = $("#VID").val();
        $("#PID").empty();
        $.ajax({
            type: "post",
            url: "/ProductInventory/getproductlist",
            //datatype: "Json",
            data: { VID: vid, },
            success: function (products) {
                debugger
                $.each(products, function (index, row) {
                    $("#PID").append("<option value='" + row.PID + "'>" + row.ProductName + "</option>");
                });
                //$("productlist").append();
            },
            failure: function () {
                alert("something goes wrong")
            }
        })
    });

    $(function () {
    $("#btn_save").click(function () {
        $.ajax({
            type: "Post",
            url: "/ProductInventory/updatedate",
            data: {
                date: $("#txt_date").val(),
            },
            success: function (da) {
                alert("updated date successfully");
            },
            failure: function (da) {
                alert("error");
            },
        })
   })
})

$("#PID").change(function () {
        var pid = $("#PID").val();

        $.ajax({
            type: "post",
            url: "/ProductInventory/getremaining",
            data: { PID: pid },
            success: (function (data) {
                debugger
                $.each(data, function (index, value) {
                // I want to show remaining amount and purchase price in label 
                // and I tried below code this 
                $("#lblremquantity").html(parseInt(value.RemainingQuantity))
                    //$("#RemaingQuantity").append("<label value='" + value.PID + "'>" + 
                    value.RemaingQuantity + "</label>");
                });
            })
        })
    });
})
</script>

My controller:

public class ProductInventoryController : Controller
{
    private db_shopEntities db = new db_shopEntities();

    // GET: ProductInventory
    public ActionResult Index()
    {
        ViewBag.vendorlist = new SelectList(getvendorlist(), "VID", "VendorName");
        return View();
    }

    public List<tbl_AddVendor> getvendorlist()
    {
       List<tbl_AddVendor> vendors = db.tbl_AddVendor.ToList();
       return vendors;
    }

    public JsonResult getproductlist(int VID)
    {
        db.Configuration.ProxyCreationEnabled = false;
        List<tbl_AddProduct> products = db.tbl_AddProduct.Where(x => x.VID == VID).ToList();
        var pro = products;
        // ViewBag.productlist = new SelectList(products, "VID", "VendorName");
        return Json(products, JsonRequestBehavior.AllowGet);
    }

    public JsonResult getremainingquantity(int PID)
    {
        db.Configuration.ProxyCreationEnabled = false;

        List<tbl_AddProduct> remquantity = db.tbl_AddProduct.Where(x => x.PID == PID).ToList();
        return Json(remquantity, JsonRequestBehavior.AllowGet);
    }

    public JsonResult updatedate(string date)
    {
        DateTime sdate = DateTime.ParseExact(date, "dd-MM-yyyy", CultureInfo.InvariantCulture);
        db.Configuration.ProxyCreationEnabled = false;

        // I want to update tbl_addproduct.. update date column when submit
        return Json(success, JsonRequestBehavior.AllowGet);
    }
}