将模型从 1 个局部视图传递到同一视图中的另一个局部视图

Question

我的主视图中加载了 2 个局部视图。 主视图自动刷新局部视图 1，而局部视图 2 仅应在用户单击局部视图 1 中的 Ajax.ActionLink 时更新，该 Ajax.ActionLink 应将模型传递到局部视图 2，然后应更新局部视图 2。

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

更新不更新monitorDetail div

主视图

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

内部 LCARS 部分

<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>

更新 2

这是当前的代码。删除数据会引发错误，该值不能为空，这是正确的。

    $.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);
        }
    })

更新 3

我现在可以点击控制器，但现在 div 不显示部分视图

控制器

    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);
    }

在 LCARS 部分视图中

<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>

主视图

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

Answer 1

如果我正确理解您的问题，我会做以下事情：

1. 在主视图中，我只加载 div1（部分视图 1）。

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

第二个 div 最初不会加载任何内容。

1. 然后我会为链接定义一个点击处理程序（使用它的 id）。在这个函数中，我将使用 AJAX 加载第二个 div 的内容，然后像这样更新第二个 div：

   $(#monitorDetail).html(result);
   

处理程序代码如下所示：

$.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) {
    });