通过 json 结果 MVC 渲染 Html 部分视图

Posted 2023-05-09

【中文标题】通过 json 结果 MVC 渲染 Html 部分视图

【英文标题】：Render Html partial view via json result MVC

【发布时间】：2015-12-26 06:36:04

【问题描述】：

回答

我在这个问题上采用了不同的方法。我没有从服务器端加载数据表，而是决定在通过 ajax 加载 tbody 并稍后初始化数据表时初始化数据表。这样，我的页面正常加载，然后通过 ajax 加载数据，然后初始化数据表，使其具有数据表的所有功能。如果它对任何人有帮助，下面是我的脚本。

$(document).ready(function () 
        $('#targetingtable tbody').block(
            message: "<i class='fa fa-spinner fa-spin'></i> Loading Data...",
            css:  border: '1px solid #aaa', padding: '10px 5px' ,
            overlayCSS:  backgroundColor: 'rgba(196, 196, 196, .5)' 
        );
        $.ajax(
            url: '@Url.Action("GetDealerMediaRates", "Signup", new  cultureName = Model.CurrentCultureName )?ordersignupitemId=@Model.OrderSignupItemId&creativeTemplateId=@Model.CreativeTemplateId',
            type: "POST",
            dataType: "html",
            success: function (data) 
                var newHtml = $(data);
                $('.dealermediarates').html(newHtml);
                $('#targetingtable').DataTable(
                    'aoColumnDefs': [
                        'bSortable': false,
                        'aTargets': ['nosort']
                    ],
                    'order': [[1, 'asc']],
                    'aLengthMenu': [[10, 25, 50, 100, 150, -1], [10, 25, 50, 100, 150, "All"]]
                );
                $('#targetingtable tbody').unblock();
            
        );
        $('#targetingtable').unblock();
    );

更新：

我现在可以将我的部分视图作为 json 结果。数据显示在网站上，但我现在遇到的问题是我没有看到数据表有任何分页。加载图标一直亮着。这是我更新的代码。我做错什么了吗？

var rows = new SelectTargetingViewModel(signupService, orderSignupItem, creativeTemplateId, cultureName, false, dealermedias.OrderBy(d => d.Description).Skip(model.Start).Take(model.Length).ToList());
        string html = "";
        using (var sw = new StringWriter())
        
            PartialViewResult partialresult = LoadGetDealerMediaPartialView(rows);
            partialresult.View = ViewEngines.Engines.FindPartialView(ControllerContext, "_GetDealerMediaRate").View;
            ViewContext vc = new ViewContext(ControllerContext, partialresult.View, partialresult.ViewData, partialresult.TempData, sw);
            partialresult.View.Render(vc, sw);
            html = sw.GetStringBuilder().ToString();
        
        var result = new
        
            recordsTotal = unfilteredCount,
            recordsFiltered = dealermedias.Count(),
            draw = model.Draw,
            data = rows.DealerMedias,
            resultset = html
        ;
        return Json(result, JsonRequestBehavior.AllowGet);
    
    [HttpGet]
    public PartialViewResult LoadGetDealerMediaPartialView(SelectTargetingViewModel model)
    
        return PartialView("_GetDealerMediaRate", model);
    

//查看

$(document).ready(function () 
        $("#targetingtable").dataTable(
            "processing": true,
            "serverSide": true,
            "iDisplayLength": 10,
            "autoWidth": false,
            "ajax": 
                "url": '@Url.Action("GetDealerMediaRates", "Signup", new  cultureName = Model.CurrentCultureName )?ordersignupitemId=@Model.OrderSignupItemId&creativeTemplateId=@Model.CreativeTemplateId&columnheader=@Model.Description',
                "type": "POST",
                "dataType": "json",
                success: function (result) 
                    $('.dealermediarates').html(result.resultset);
                
            ,
            "aoColumnDefs": [
                'bSortable': false,
                'aTargets': ['nosort']
            ],
            "order": [[1, 'asc']],
            "aLengthMenu": [[10, 25, 50, 100, 150, -1], [10, 25, 50, 100, 150, "All"]],
            "language": 
                "processing": "<i class='fa fa-spinner fa-spin'></i> Loading Data ..."
            
        );
    );

//以下是我最初提交的内容。

由于我的 jquery 数据表存在一些性能问题，即使该表在给定时间内可以显示的总记录不超过 300 行，但我仍然遇到了性能问题。话虽如此，我正在尝试使用服务器端加载数据。我的列是根据模型数据动态加载的，并且根据模型标题中的可用列，适当地加载行。此外，数据表有一些数量字段都是复选框。我所有的表 td 元素现在都是部分的，所以我想知道是否有办法加载部分并将其作为 json 结果传递。这是我目前所拥有的。

//控制器

var rows = new SelectTargetingViewModel(signupService, orderSignupItem, creativeTemplateId, cultureName, false, dealermedias.OrderBy(d => d.Description).Skip(model.Start).Take(model.Length).ToList());
        var result = new
        
            recordsTotal = unfilteredCount,
            recordsFiltered = dealermedias.Count(),
            draw = model.Draw,
            data = rows.DealerMedias,
            resultset = LoadGetDealerMediaPartialView(rows)
        ;
        return Json(result, JsonRequestBehavior.AllowGet);

[HttpGet]
    public ActionResult LoadGetDealerMediaPartialView(SelectTargetingViewModel model)
    
        return PartialView("_GetDealerMediaRate", model);
    

//查看

<tbody id="editorRows" class="dealermediarates"></tbody>

//客户端

$(document).ready(function () 
        $("#targetingtable").dataTable(
            "processing": true,
            "serverSide": true,
            "iDisplayLength": 10,
            "autoWidth": false,
            "ajax": 
                "url": '@Url.Action("GetDealerMediaRates", "Signup", new  cultureName = Model.CurrentCultureName )?ordersignupitemId=@Model.OrderSignupItemId&creativeTemplateId=@Model.CreativeTemplateId&columnheader=@Model.Description',
                "type": "POST",
                dataType: 'json',
                success: function (data) 
                    $('.dealermediarates').html(data.resultset);
                
            ,
            "language": 
                "processing": "<i class='fa fa-spinner fa-spin'></i> Loading ..."
            ,
            "aoColumnDefs": [
                'bSortable': false,
                'aTargets': ['nosort']
            ],
            "order": [[1, 'asc']],
            "aLengthMenu": [[10, 25, 50, 100, 150, -1], [10, 25, 50, 100, 150, "All"]]
        );
    );

这种方法有什么问题吗？目前，当我这样做时，我没有得到我的行，我想知道这种方法是否有效，有什么我遗漏的吗？

【参考方案1】：

我对 jQuery DataTables 的经验有限，因此我无法准确回答这部分问题。不过，除了 DataTables 之外，是的，这是可能的。

您可以通过JsonResult 操作传回您的模型，然后使用 jQuery 操作 DOM 并使用您从 AJAX 调用中收到的 JSON 对象的值更新您的 HTML，完全消除了对局部视图的需要。

您也可以让您的ActionResult 成为PartialViewResult（ActionResult 仍然有效，因为PartialViewResult 是ActionResult 的一种类型，但这样您就可以明确说明您的操作可以返回什么）和用从局部视图返回的 HTML 替换 HTML。

下面后​​者的玩具示例。

---

主视图

<div id="foobar">
    <!-- first time load -->
    @ Html.RenderAction("FooBar", new  whateverParam = "whateverValue" );         
</div>

局部视图（剃刀）

@model FooBarViewModel

@foreach (Bar bar in Model.Foo)
       
    <div>Content goes here</div>

局部视图（动作）

public PartialViewResult FooBar(string whateverParam)

    return PartialView(fooBarViewModel);

jQuery

$.ajax(
    url: "ControllerName/FooBar",
    data: 
            whateverParam: $("#whateverParam").val()
        ,
        type: "GET",
        success: function (fooBarHTML) 
            $("#foobar").html(fooBarHTML);
        ,
        error: function (xhr, status, errorThrown) 
            //...
        
);

【讨论】：

感谢您的帮助。我的问题是如何将部分视图作为 json 结果。我在几个地方显示了来自 ajax 调用的部分视图，那里没有问题。只是想知道是否可以通过 json 结果获取部分视图，然后我可以在视图上使用它来呈现为 html。我想我能够做到这一点，看看我上面更新的部分。现在，我的数据表没有呈现分页并且加载图标不断出现。这些行现在显示在数据表上。

@bladerunner 从这个线程中仍然不清楚你是否能够解决在使用 DataTable 服务器端时将列文本加载为部分视图的问题