How to update the parent data when partial view data get updated?

Question

I am developing and ASP.NET MVC application.

I have the View which have a one partial view.

I do have quotation form and that form contains the Product list. I have shown the product list using partial view.

as you can see in the picture, I do have a list of products , user can select product from list and its quantity and price and total will appear on that list itself.

now, my issue is I cant get the updated data in the parent view whenever user changes/adds Products, Quantity and Price.

Like in picture, though I have added many products, Text box in partial view showing correct figure but text box on parent view which I want to show the total figure again , showing old values....

How can I get done this thing ?

I have tried the below code in Jscript tag in View, but not working.... (txtGrandTotal is the textbox name of the partial view)

jQuery('#txtGrandTotal').on('input', function () {
    alert("Changed");
 })


    $('#txtGrandTotal').change(function () {
        alert("Changed");
    });


    $('#txtGrandTotal').bind('input', function () {
        alert("Changed");
    });

Answer 1

Assuming the the total input in your partial view has the id txtGrandTotal and the one in the parent view has the id txtParentGrandTotal you can use the following:

$('#txtGrandTotal').change(function() {
     $('#txtParentGrandTotal').val($(this).val());
});

Please note that your need to execute this code on document ready in the partial view, so that the jQuery select ($('#txtGrandTotal')) correctly returns your target element.