使用jquery渲染局部视图

时间:2014-04-14 08:39:21

标签: c# jquery asp.net-mvc gridview razor

问题;

我有一个带有两个局部视图的视图,一个视图用于处理客户端消息和gridview。

gridview是一个表单,可以删除更新项。当删除或更新错误/成功时,在tempdata中生成消息,但是只从动作结果函数呈现网格部分视图。

我需要一种方法来简单地呈现消息部分视图而不发布任何内容或将其重定向到控制器,因为数据已存在于tempData中。

查看:

<div id="page-KnownRecipient">   

    @Html.Partial("ClientSideMessages")

    @Html.Partial("_TabsPartial")

    @if(Model != null)
    {
        using (Html.BeginForm())
        {
            @Html.Partial("_EditModePartial", Model);//Grid
        }
    }

</div>

来自gridview的所有回调路由只返回partialview EditModePartial,因为VIEW永远不会重新加载应该显示在&#34; ClientSideMessages&#34;删除/更新回调后,从不呈现部分。因此,我需要一种方法来呈现&#34; ClientSideMessages&#34;使用jquery的partialview,只需要部分视图的实际渲染,不需要新的数据。

// ---- 结束使用这样的东西;

查看;

    <div id="detailsDiv">
        @Html.Partial("ClientSideMessages")
    </div>

控制器;

public ActionResult StatusMessages()
{
    return PartialView("ClientSideMessages");
}

JS;

function getStatusMessages() {
    var sURL = "/Home/StatusMessages"; // Just put the function in some base controller
    var $detailDiv = $('#detailsDiv');

    $.get(sURL, function (data) {
        $detailDiv.html(data);
    });
}

感谢您的提示和指示!

2 个答案:

答案 0 :(得分:2)

如果您只想渲染

@Html.Partial("ClientSideMessages")

使用Jquery你可以:

<div id="target">
    @Html.Partial("ClientSideMessages")
</div id="target">

并使用ajax:

$.ajax({
        url: "/{Controle}/ClientSideMessages",
        type: "POST",
        contentType: "application/json; charset=utf-8",
        data: {Your data},
        error: function (data) {
            {error message};
        },
        success: function (data) {
                $('#target').html(data); // loading partialView into div
        }
    });

答案 1 :(得分:2)

要执行此操作,您必须在Controller上创建一个Action,它将返回客户端消息部分视图。完成后,您必须执行以下操作。

<div id="page-KnownRecipient">   

    <div id="clientMessages">
    @Html.Partial("ClientSideMessages")
    </div>
    @Html.Partial("_TabsPartial")

    @if(Model != null)
    {
        using (Html.BeginForm())
        {
            @Html.Partial("_EditModePartial", Model);//Grid
        }
    }

</div>

然后您可以使用以下函数在任何回调中呈现客户端消息。

<script type="text/javascript>
$(function(){
   var renderClientMessage = function(){
   $("#clientMessages").load("ClientMessageAction_URL");
};
});
</script>