Question

我在主视图中加载了2个部分视图。主视图自动刷新部分视图1，而部分视图2应该仅在用户从部分视图1单击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

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

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

如果我理解你的问题，我会做的就是：

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

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

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

然后我会为链接定义一个点击处理程序（使用它的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) {
    });

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

1 个答案: