Reload partial view with a button in the partial view

Question

i use mvc 4 and try to give my web application more dynamic. At the moment i try to split some of the views in partial views so the code gets better readable and i can better re-use parts of the application. So now this leads me to a problem. I have a view similar to this one:

<h1>Manage department</h1>
<div id="EmployeesManagement">@Html.Action("OpenEmployeesManagement")</div>
<div id="DepartmentManagement">@Html.Action("OpenDepartmentManagement")</div>
<div id="DepartmentTumorModels">@Html.Action("OpenDepartmentModels")</div>

Each of those are partial views which get called from the controller like:

public PartialViewResult OpenDepartmentModels()
{
    ViewBag.ChangeVisibility = -1;
    HoDManagementModel hoDManagementModel = new HoDManagementModel { UserWithRoleModelList = azaraUserManagement.GetAllEmployesOfHoD(user.getUserId()), OrganisationUnits = azaraUserManagement.GetAllOrganisationUnitsFromHoD(user.getUserId()) };
    List<ModelWithOrganisationUnit> Models = ModelManagement.SearchModelsOfDepartment(hoDManagementModel.OrganisationUnits);
    return PartialView("DepartmentModels", Models);
}

Now to my problem. I have a partial view like this one:

@model List<Modelle.Models.BusinessTierObjects.Models.ModelWithOrganisationUnit>
<fieldset>
    <legend>Manage the models of your department</legend>
        <table class="tablesorter">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>Name </th>
                    <th>Department </th>
                    <th>Visibility</th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                @foreach (var item in @Model)
                {
                    <tr>
                        <td>@item.ModelId</td>
                        <td>@Html.ActionLink((String)item.ModelName, "Details", "Details", new { id = item.ModelId }, null)</td>
                        <td>@item.OrganisationUnitName</td>
                        @if (ViewBag.ChangeVisibility == item.ModelId)
                        {
                        <td><select name="ChangeVisibility" id="ChangeVisibility">
                        <option value="Department" onclick="location.href='@Url.Action("ChangeVisibility", "ManageDepartment", new {tumorModelId = item.ModelId, Visibility = 0})'">Department</option>
                       option value="Coop" onclick="location.href='@Url.Action("ChangeVisibility", "ManageDepartment", new { ModelId = item.ModelId, Visibility = 2 })'">Coop</option>
                        <option value="WWW" onclick="location.href='@Url.Action("ChangeVisibility", "ManageDepartment", new { ModelId = item.ModelId, Visibility = 3 })'">WWW</option>
</select></td>
                        }
                        else{
                            switch ((byte)item.Visibility)
                            {
                                case 0: <td>Department</td>; break;
                                case 2: <td>Coop</td>; break;
                                case 3: <td>WWW</td>; break;
                            }
                        }
                        <td><button name="button" class="button" onclick="location.href='@Url.Action("RequestChangeVisibility", "ManageDepartment", new { change = @item.ModelId })'">Change Visibility</button>
</td>
                    </tr>}
</fieldset>

and if i click on the last button just the partial view should be reloaded. But instead the application only show me the partial view without any layout in the browser. What have i done wrong or isn´t it possible to solve my problem? The controller action from the button is:

public PartialViewResult RequestChangeVisibility(int change)
        {
            ViewBag.ChangeVisibility = change;
            HoDManagementModel hoDManagementModel = new HoDManagementModel { UserWithRoleModelList = azaraUserManagement.GetAllEmployesOfHoD(user.getUserId()), OrganisationUnits = azaraUserManagement.GetAllOrganisationUnitsFromHoD(user.getUserId()) };
            List<ModelWithOrganisationUnit>  Models = ModelManagement.SearchModelsOfDepartment(hoDManagementModel.OrganisationUnits);
            return PartialView("DepartmentModels", Models);
        }

Answer 1

The reason this happens is because you are using:

onclick="location.href='@Url.Action("RequestChangeVisibility", "ManageDepartment", new { change = @item.ModelId })'"

This will refresh the whole page to the partial view result, so you only see that partial view.

what you need to do is to do an ajax call to that controller, so you should use:

<td><button name="button" class="button" onclick="RequestChangeVisibilityAjaxCall(@item.ModelId)">Change Visibility</button>

then add the following javascript to the page:

 <script>
    function RequestChangeVisibilityAjaxCall(change) {
        $.ajax({
            url: "../ManageDepartment/RequestChangeVisibility?Change=" + change,
            type: 'GET',
            success: function (data) {
                $('#DepartmentManagement').html(data);
            }
        });
    }
</script>

The line:

$('#DepartmentManagement').html(data);

will use the result of the ajax call (data) to populate the div with ID DepartmentManagement - I wasnt sure where you wanted that partial view to go, so just change the ID to what ever you need it to be.

Also, the line:

url: "../ManageDepartment/RequestChangeVisibility?Change=" + change,

is the url of the controller, I think i guessed it right, but you should change this to the correct address where needed.

I hope this helps.

Martyn

[edit] a good tutorial here: also, do some googling for "mvc jquery ajax" that should also help you understand it. Much better than I can explain it! :)