Pass model from 1 partial view to another partial view in the same view

Question

I have 2 partial views being loaded in my main view. The main view auto refreshes partial view 1 while partial view 2 should only be updated when a user clicks on an Ajax.ActionLink from partial view 1 which should pass the model into partial view 2 and then partial view 2 should be updated.

<div id="lcars">@Html.Partial("LCARS")</div>
<div id="monitorDetail">@Html.Partial("MonitorDetail")</div>

Update Not updating monitorDetail div

Main View

<div id="lcars">@Html.Partial("LCARS")</div>
<br/>
<div id="monitorDetail"></div>

Inside LCARS Partial

<script>
$('#TestButton').on("click", function (event)
{
    event.preventDefault();
    alert("clicked ajax");
    $.ajax({
        url: '@Url.Action("MonitorDetail", "NOCCommand", PAL.Intranet.MonitorType.AHSSQLCluster)',
        contentType: 'application/json; charset=utf-8',
        type: 'POST',
        async: false,
        dataType: 'html',
        data: JSON.stringify(userModel)
    })
    .success(function (userResult) {
        $('#monitorDetail').html(userResult);
    })
    .error(function (xhr, status) {
    });
})
</script>

<div class="lcars-column u-1-3">
   <div id="TestButton" class="lcars-button radius">SQL Cluster Online <span class="lcars-button-addition @(mod.SQLClusterOnline ? "online" : "offline")"> @(mod.SQLClusterOnline ? "Online" : "Offline")</span></div>
</div>

UPDATE 2

Here is the code currently. Removing the data throws an error that the value can't be null which is correct.

    $.ajax({
        type: 'POST',
        url: '@Url.Action("MonitorDetail", "NOCCommand")',
        contentType: 'application/json; charset=utf-8',
        dataType: 'html',
        data: {
            mType: PAL.Intranet.MonitorType.AHSSQLCluster
        },
        success: function (data) {
            alert("clicked 2"); //doesn't work
            $('#monitorDetail').html(data);
        },
        error: function (xhr, status) {
            alert("Error: " + xhr.responseText);
        }
    })

Update 3

I can now hit the controller but now the div does't show the partial view

Controller

    public PartialViewResult AHSSQLClusterDetail()
    {
        PAL.Intranet.Models.MonitorDetailModel mDetail = new Models.MonitorDetailModel();
        mDetail.Item = "test";
        mDetail.Val = "test 2";

        List<PAL.Intranet.Models.MonitorDetailModel> d = new List<Models.MonitorDetailModel>();
        d.Add(mDetail);

        return PartialView("MonitorDetail", d);
    }

In LCARS Partial View

<script>
    $('#TestButton').on("click", function () {
        $.ajax({
            type: 'GET',
            url: '@Url.Action("AHSSQLClusterDetail", "NOCCommand")',
            dataType: 'html',
            async: false,
            cache: false,
            success: function (data) {
                $("#monitorDetail").html(data);
                alert("div loaded");
            },
            error: function (xhr, status) {
                alert("Error: " + xhr.responseText);
            }
        })
    })
</script>

<div id="TestButton" class="lcars-button radius">SQL Cluster Online <span class="lcars-button-addition @(mod.SQLClusterOnline ? "online" : "offline")"> @(mod.SQLClusterOnline ? "Online" : "Offline")</span></div>

Main View

<div id="lcars">@Html.Partial("LCARS")</div>
<br/>
<div id="monitorDetail"></div>

Answer 1

If I understood your problem correctly, I would have done following:

1. In Main view, I would just load the div1 (partial view 1).

     <div id="userSummaryContent" class="tabinsidebox"> @Html.Partial("_OrganizationUserSummary", Model.SummaryViewModel) </div> <div id="monitorDetail"></div> 

Second div would not load anything initially.

2. Then I would define a click handler for the link (using its id). In this function I will load the content of second div using AJAX and then just update the second div like:

    $(#monitorDetail).html(result); 

The handler code would look like this:

$.ajax({
    url: '@Url.Action("MonitorDetail", "Test")',
    contentType: 'application/json; charset=utf-8',
    type: 'POST',
    async: false,
    dataType: 'html',
    data: JSON.stringify(userModel)
})
    .success(function (userResult) {
        $('#monitorDetail').html(userResult);
    })
    .error(function (xhr, status) {
    });