Using jquery to get a partial view and updating the UI

Question

Hi I need to render a partial view (returned from the controller) to show some customer summary details. This will need to happen when the user clicks on a button. In the the mean time the user can select different customers on a grid. I keep note of the selected customer id in a hidden field using jquery on the grids selection changed event. When the user clicks on a button i need to pass this hidden field value (selected id) to the controller, the controller does some work and returns a partial view. I then need to render this partial view on the page. I have tried the following but have two problems

1) I cant fig out how to send the hidden field value to the controller 2) After the partial view is rendered I cant get it to rerender if the user selects another customer and clicks the button again

#PlaceHolder is just a div element

function DoSomwWork() { $('#PlaceHolder').load('<%= Url.Action("GetSelectedCustSummary", "SomeController", new { selectedId = NEED THE HIDDEN FIELD VAL HERE })%>'); } }

Answer 1

I doubt you will be able to do it this way.

However since you are already using MVC, you shall be able to define a action ("GetSelectedCustSummary"in your case) and return a json object instead, then manipulate it with your jQuery

Update: Define Action Method something like:

[HttpGet]
        public JsonResult ActionName(string id)
        {
            //some logic here to get QueryResult
            return Json(QueryResult, JsonRequestBehavior.AllowGet);
        }

then call your Action Method in Jquery:

$.ajax({
//you can assign id dynamically
                    url: '<%= Url.Content("~/Controller/ActionName/YourId") %>',
                    type: 'GET',
                    dataType: 'json',
                    success: function (data) {
                       //manipulate your div content with data
                    },
                    error: function (e) {
                        //manipulate your div content with error
                    }
                }
            );

Every time you click update button, assign the id you want, and trigger the Jquery function. It worked for me in my project