load view on checkbox checkevent in ASP.NET MVC

Question

In an ASP.NET MVC View , I have checkbox control

@Html.CheckBoxFor(
    model => model.ServiceListDetails.IsCargoLiquidCall, 
    new { id = "chkCargoLiquid"}
) Cargo Call (Liquid)

 @Html.CheckBoxFor(
    model => model.ServiceListDetails.IsCargoDryCall, 
    new { id = "chkCargoDry"}
) Cargo Call (Dry)

..... and five more checkboxes. On checkbox checked event of each checkbox, i need to 'RenderAction' to fieldset, below

<fieldset>
@{Html.RenderAction("_CargoCalLiquid", "Services");}
</fieldset>

<fieldset>
 @{Html.RenderAction("_CargoCalDry", "Services");}
</fieldset>

This is happening on load of view, but the same is taking lot of time to load as there are seven checkboxes for every type and respective list of services.

So, when click of the checkbox, only then it should load.. How can this be achieved?

I tried the below, but not working.. I am new to MVC, or is there any way to load the same to datagrid control do that it will take less time..

Please appreciating help..

Answer 1

use javascript/jquery events and ajax call

Some thing like below

 @Html.CheckBoxFor(
        model => model.ServiceListDetails.IsCargoLiquidCall, 
        new { id = "chkCargoLiquid",onchange="RenderService()"}
    )
    <div id="TargetID"><div/>

    <script>
    function RenderService(){
           $.ajax({
                 type: "POST",
                 url: '@Url.Content("~/Services/_CargoCalLiquid")',
                 success: function(result) {
                    $('#TargetID').html(html);

                 },
                 error: function(msg) {
                     alert("failed");
                 }
             });
    }
    <script/>

hope this may help you