简体   繁体   English

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

[英]Pass model from 1 partial view to another partial view in the same view

I have 2 partial views being loaded in my main view. 我在主视图中加载了2个局部视图。 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. 主视图会自动刷新部分视图1,而仅当用户单击Ajax时才应更新部分视图2。部分视图1中的ActionLink应将模型传递到部分视图2,然后应更新部分视图2。

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

Update Not updating monitorDetail div 更新不更新monitorDetail div

Main View 主视图

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

Inside LCARS Partial 内部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>

UPDATE 2 更新2

Here is the code currently. 这是当前的代码。 Removing the data throws an error that the value can't be null which is correct. 删除数据会引发错误,该值不能为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);
        }
    })

Update 3 更新3

I can now hit the controller but now the div does't show the partial view 我现在可以点击控制器,但现在div不显示局部视图

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

Main View 主视图

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

If I understood your problem correctly, I would have done following: 如果我正确理解了您的问题,则可以执行以下操作:

  1. In Main view, I would just load the div1 (partial view 1). 在主视图中,我只加载div1(局部视图1)。

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

Second div would not load anything initially. 第二个div最初不会加载任何内容。

  1. Then I would define a click handler for the link (using its id). 然后,我将为链接定义一个点击处理程序(使用其ID)。 In this function I will load the content of second div using AJAX and then just update the second div like: 在此函数中,我将使用AJAX加载第二个div的内容,然后像这样更新第二个div:

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

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM