Question

我正在尝试通过部分视图填充并呈现webgrid，并在单击按钮时呈现ajax。我有两个问题。部分网格似乎永远不会在屏幕上填充和渲染，虽然我在局部视图中有一个断点，但我看到它被击中了。 2. Action方法被调用两次，但第二次出错。我想知道这是否会造成一个。

主要观点：

  $(function () {
        $("#btnGetOpsLog").click(function () {

            var numberOfRecords = $("#ddlNumberOfRecords").val();

            $.ajax({
                type: "POST",
                url: '@Url.Action("NumberOfRecordsChanged")',
                data: { numberOfRecords: numberOfRecords }
            }).success(function (result) {
                $('#Grid').html(result);
            }).error(function (xhr, status) {
                alert(xhr.responseText);
            });
        });
    });

<div class="row">
    @Html.DropDownList("ddlNumberOfRecords", Model.NumberOfRecordsSelectList, "Select", new { id = "ddlNumberOfRecords" })
    <input type="button" id="btnGetOpsLog" value="Get Logs" />
</div>
<br />
<br />
<div id="Grid">
    @Html.Partial("_OperationLogs")
</div>

这是我的部分观点

@model Assurant.Integration.ServiceRegistry.ServiceRegistryWebUI.Models.OperationLogViewModel
    
@{
    if (Model != null && Model.Logs != null && Model.Logs.Any())
    {
        var grid = new WebGrid(null, defaultSort: "Name", rowsPerPage: Model.NumberOfRecords);
        grid.Bind(Model.Logs, rowCount: Model.Logs.Count, autoSortAndPage: false);
        grid.Pager(WebGridPagerModes.All);
        
        grid.GetHtml(tableStyle: "display",
            alternatingRowStyle: "alt");
    }
}

最后，我的行动方法：

public ActionResult NumberOfRecordsChanged(int? numberOfRecords)
    {
        if (numberOfRecords.HasValue)
        {
            var model = new OperationLogViewModel
            {
                Logs =
                    _serviceManager.GetOperationLogs(numberOfRecords.Value, 0,
                        new Guid("45726746-f62d-41cb-bdba-bc4c6ab6cc43"),
                        new Guid("ef8c3e19-179e-4303-afbb-21613c148b50")).ToList(),
                NumberOfRecordsSelectList = new SelectList(new List<int> { 25, 50, 75, 100 }),
                NumberOfRecords = numberOfRecords.Value
            };

            return PartialView("_OperationLogs", model);
        }

        return Json(new { ok = false, message = "Broken" }, JsonRequestBehavior.AllowGet);
    }

我似乎正在做我见过别人所做的事，但显然有些不对劲。

Answer 1

第一次加载页面时，您没有传递模型：

@Html.Partial("_OperationLogs")

因此，部分语句中的语句if (Model != null ..会忽略它。

将其更改为：

@Html.Partial("_OperationLogs", Model)

它会被调用两次，因为您没有阻止按钮默认设置并且您的表单再次提交，而numberOfRecords没有值。

使用preventDefault修正：

 $("#btnGetOpsLog").click(function (e) {
         e.preventDefault();

<强>更新

根据评论，grid.GetHtml在一个没有@的表达式中进行评估。

Answer 2

您需要将PartialView结果转换为字符串，并将其从NumberOfRecordsChanged传回。这是一个关于如何将局部视图转换为字符串的代码片段

protected string RenderPartialViewToString(string viewName, object model)
    {
        if (string.IsNullOrEmpty(viewName))
            viewName = ControllerContext.RouteData.GetRequiredString("action");

        ViewData.Model = model;

        using (StringWriter sw = new StringWriter()) {
            ViewEngineResult viewResult = ViewEngines.Engines.FindPartialView(ControllerContext, viewName);
            ViewContext viewContext = new ViewContext(ControllerContext, viewResult.View, ViewData, TempData, sw);
            viewResult.View.Render(viewContext, sw);

            return sw.GetStringBuilder().ToString();
        }
    }

然后你的ActionResult看起来像

public ActionResult NumberOfRecordsChanged(int? numberOfRecords)
    {
        if (numberOfRecords.HasValue)
        {
            var model = new OperationLogViewModel
            {
                Logs =
                    _serviceManager.GetOperationLogs(numberOfRecords.Value, 0,
                        new Guid("45726746-f62d-41cb-bdba-bc4c6ab6cc43"),
                        new Guid("ef8c3e19-179e-4303-afbb-21613c148b50")).ToList(),
                NumberOfRecordsSelectList = new SelectList(new List<int> { 25, 50, 75, 100 }),
                NumberOfRecords = numberOfRecords.Value
            };

            if (Request.IsAjaxRequest())
            {
                return Json(new { ok = true, message = "", operationLogs = RenderPartialViewToString("_OperationLogs", model) }, JsonRequestBehavior.AllowGet);
            }
            else
            { 
                return PartialView("_OperationLogs", model); 
            }
            return Content(RenderPartialViewToString("_OperationLogs", model));
        }

        return Json(new { ok = false, message = "Broken" }, JsonRequestBehavior.AllowGet);
    }

您的脚本

$(function () {
        $("#btnGetOpsLog").click(function (e) {
            e.preventDefault();
            var numberOfRecords = $("#ddlNumberOfRecords").val();

            $.ajax({
                type: "POST",
                url: '@Url.Action("NumberOfRecordsChanged")',
                data: { numberOfRecords: numberOfRecords }
            }).success(function (result) {
                $('#Grid').html(result.operationLogs);
            }).error(function (xhr, status) {
                alert(xhr.responseText);
            });
        });
    });

您已经找到了部分视图应该是什么样子

部分视图不渲染，Action方法被调用两次

2 个答案: