在.Net Core中使用jquery渲染带有复杂对象的PartialView - 不返回ajax调用

Question

我的 .Net 5 core mvc 应用程序有一个非常复杂的结构。我正在尝试使用 jquery 来调用控制器方法。我可以将 json 模型发送到控制器。控制器的action方法正在获取json对象并进行处理。但是 ajax 调用没有达到成功部分，因此无法渲染部分视图。

其功能是处理网格中选定复选框的数据并相应地显示结果。用于检查/取消检查的 jquery 工作正常。

单击 btnRevokeSelected 时，它会调用 /CDFAU/Revoke 操作，但永远不会到达 ajax 调用的成功部分。

控制器方法

   [HttpPost]
    public async Task<IActionResult> Revoke([FromBody] CDFAUViewModel cdf)
    {
        ViewData["UserName"] = "XYZ";
        CDFAUViewModel viewModel = new CDFAUViewModel();
        viewModel.Parameters = cdf.Parameters;
        if (ModelState.IsValid)
        {
            viewModel = await _cdfauService.RevokeSelectedUserEntityAccess(viewModel);
        }
        return PartialView("Home", viewModel);
    }

布局 div 呈现在

<div id="mainContainer" class="container-fluid" style="border:2px solid black;">        
        @RenderBody()
</div>

主页视图部分与按钮

<div class="row" style="width:100%; padding-top:0.5%; padding-left:2%;">
    @*border:1px solid blue;*@
    <div class="row" style="width: 100%;">
        @*border: 2px solid red;*@
        <div class="col-lg-8" style="width:100%;">
            @*border:1px solid green;*@
            <div class="row" style="width: 100%;">
                @*border: 2px solid red;*@
                @using (Html.BeginForm(null, null, null, FormMethod.Post, false, new { id = "formUserAccessRevoke", style = "width:100%; margin-bottom: 0.5%;" }))
                {
                    <button type="submit" id="btnRevokeSelected" title="Revoke Selected" class="btn btn-dark btn-info">
                        @*asp-controller="CDFAU" asp-action="Revoke"*@
                        <img src="~/Images/revoke.png" />
                        <span class="bttn-text">Revoke</span>
                    </button>
                }
            </div>
            <div class="row" style="width: 100%;">
                @*border: 2px solid red;*@
                <div id="partialViewContainer" class="col" style=" width:100%;">
                    @*border:1px solid blue;*@
                    @{ 
                        await Html.RenderPartialAsync("_UserAccessDetails", Model.UserAccess);
                    }                        
                </div>
            </div>
        </div>
        <div class="col-lg-4" style="width:100%; ">
            @*border:1px solid green;*@
            <p>messages</p>
        </div>
    </div>
</div>

Jquery

$('#btnRevokeSelected').click(function () {
    
    var mainModel = {};
    var parameters = {};

    CreateParametersModelObject('#formUserAccessActions', parameters);
    //alert(JSON.stringify(mainModel));
    mainModel.Parameters = parameters;

    if ($('#formUserAccessDetails1').length) {
        var _userAccess1 = {};
        CreateUserAccessModelObject("#formUserAccessDetails1", _userAccess1);
        mainModel.UserAccess1 = _userAccess1;
        //alert(JSON.stringify(_userAccess1));
    } else {
        mainModel.UserAccess1 = {};
    }


    if ($('#formUserAccessDetails2').length) {
        var _userAccess2 = {};
        CreateUserAccessModelObject("#formUserAccessDetails2", _userAccess2);
        mainModel.UserAccess2 = _userAccess2;
        //alert(JSON.stringify(_userAccess2));
    } else {
        mainModel.UserAccess2 = {};
    }


    if ($('#formUserAccessDetails3').length) {
        var _userAccess3 = {};
        CreateUserAccessModelObject("#formUserAccessDetails3", _userAccess3);
        mainModel.UserAccess3 = _userAccess3;
        //alert(JSON.stringify(_userAccess3));
    } else {
        mainModel.UserAccess3 = {};
    }


    if ($('#formUserAccessDetails4').length) {
        var _userAccess4 = {};
        CreateUserAccessModelObject("#formUserAccessDetails4", _userAccess4);
        mainModel.UserAccess4 = _userAccess4;
        //alert(JSON.stringify(_userAccess4));
    } else {
        mainModel.UserAccess4 = {};
    }


    if ($('#formUserAccessDetails5').length) {
        var _userAccess5 = {};
        CreateUserAccessModelObject("#formUserAccessDetails5", _userAccess5);
        mainModel.UserAccess5 = _userAccess5;
        //alert(JSON.stringify(_userAccess5));
    } else {
        mainModel.UserAccess5 = {};
    }

    //alert(JSON.stringify(mainModel));
    //console.log(JSON.stringify(mainModel));
    //alert(model);'application/x-www-form-urlencoded; charset=UTF-8'*@
       $.ajax({
            url: "/CDFAU/Revoke",
            type: "POST",
            dataType: 'html',
            contentType: 'application/json; charset=UTF-8',
            data: JSON.stringify(mainModel),
            success: function (response) {
                alert(response);
            }
        });
});

Answer 1

我终于解决了这个问题。 ajax调用需要这样改变。部分视图的渲染需要在done中完成，而不是success。

$.ajax({
        type: "POST",
        data: JSON.stringify(mainModel),
        url: "/CDFAU/Revoke",
        dataType: 'html',
        contentType: 'application/json; charset=UTF-8',
        processData: false,
        success: function (response) {
            if (response.success) {
                //alert(response.responseText);
            } else {
                // DoSomethingElse()
                //alert(response.responseText);
            }
        },
        error: function (response) {
            //alert("error!");  // 
        }
    }).done(function (response) {
        //debugger;            
        $('#partialViewContainer').html('');
        $('#partialViewContainer').html(response);
    });

成功/错误/失败可以根据需要进行处理。