在 mvc 中调用 jQuery Ajax 后数据表（视图）不刷新

Question

我在刷新在 MVC 中使用 Ajax 发布的数据时遇到了以下问题。 POST 已成功执行，但 VIEW 上的数据没有用新数据刷新。当我调试时，来自 Ajax POST 的值已成功传递给我的控制器。当控制器返回视图模型返回 View(objLMT); 时，我的 VIEW 没有刷新新数据。如何让新数据显示在我的 VIEW 中？

AJAX

function getAllUserRoleCompany() {
    debugger

    var url = '@Url.Action("GetAllUserRoleCompany", "UserRoleCompany")';

    var Organisation = $("#Organisation").val();

    if (Organisation == "All") {
        Organisation = "";
    }
    else {
        Organisation = Organisation;
    }

    var RoleName = $("#RoleName").val();

    if (RoleName == "All") {
        RoleName = "";
    }
    else {
        RoleName = RoleName;
    }

    var i = 0;
    if ($("#UserName").find("option:selected").length >= 0) {
        var len = $("#UserName").find("option:selected").length;
    }
    else {
        len = 0;
    }


    var UserName = "";



    for (; i < len; i++) {
        if ($("#UserName").find("option:selected")[i].text != "All") {
            if (i == 0) {
                UserName = "',";
            }

            if (i < len - 1) {
                UserName += $("#UserName").find("option:selected")[i].text + ",";
                UserName = UserName.substring(0, UserName.indexOf("-")) + ",";
            }
            else {
                UserName += $("#UserName").find("option:selected")[i].text + ",'";
                UserName = UserName.substring(0, UserName.indexOf("-")) + ",'";
            }
        }
    }

    if (UserName == "All") {
        UserName = ""
    }
    else {
        UserName = UserName;
    }

    var UserStatus = $("#UserStatus").val();

    if (UserStatus == "All") {
        UserStatus = "";
    }
    else {
        UserStatus = UserStatus;
    }

    $.ajax({
        url: url,
        data: { Organisation: Organisation, RoleName: RoleName, UserName: UserName, UserStatus: UserStatus },

        cache: false,
        type: "POST",
        success: function (data) {
            //$("#dataTables-example").bind("");
            //$("#dataTables-example").bind();
            //location.reload(true);

        },
        error: function (reponse) {
            alert("error : " + reponse);
        }
    });

以下是同一页面的查看代码

<div class="row">
@Html.Partial("pv_UserRoleCompany", Model)

控制器

  public ActionResult GetAllUserRoleCompany(String Organisation, String RoleName, String UserName, int UserStatus)
    {
        LMTUsage objLMT = new LMTUsage();
        LMTDAL objLMTDAL = new LMTDAL();

        string usrNameWithDomain = System.Web.HttpContext.Current.User.Identity.Name;
        //string userID = "261213";  // Environment.UserName;
        string userID = "100728";

        ViewBag.UserRoleId = objLMTDAL.GetRoleID(userID);
        objLMT.TypeList = objLMTDAL.UserRoleCompany_GetAll(Organisation, RoleName, userID, ViewBag.UserRoleId, UserName, UserStatus);

       // return Json(objLMT, JsonRequestBehavior.AllowGet);
        return PartialView("pv_UserRoleCompany", objLMT);
    }

使用上面的代码 My while SEARCHING 或 UPDATING 查看我的表/网格不刷新。 请帮忙。

Answer 1

如果您从 AJAX 调用返回部分视图，则必须使用 jQuery 来“刷新”数据。

在你的 js 代码中你可以这样做：

$.ajax({
    url: url,
    data: { Organisation: Organisation, RoleName: RoleName, UserName: UserName, 
            UserStatus: UserStatus },
    cache: false,
    type: "POST",
    success: function (data) {
        //$("#dataTables-example").bind("");
        //$("#dataTables-example").bind();
        //location.reload(true);
        $("#dataTables-example").html(data);
    },
    error: function (reponse) {
        alert("error : " + reponse);
    }
});

这会将现有的 HTML 替换为控制器中部分视图结果中的 HTML。

Answer 2

@Mihail 我已经尝试使用上述解决方案。它有效我的意思是它刷新了我的视图，但它没有像预期的那样完美地加载我的视图。

查看之前（预期）

使用后查看 $("#dataTables-example").html(data);

Answer 3

试试这是否适合你 根据您的要求调用此函数：

function getAllUserRoleCompany(parameters) {
    var token = $('[name=__RequestVerificationToken]').val();
    $.ajax({
        type: "POST",
        url: '/UserRoleCompany/GetAllUserRoleCompany',
        data: { Organisation: Organisation, RoleName: RoleName, UserName: UserName, UserStatus: UserStatus },
        dataType: 'html',
        success: function (data) {
            $("#").empty().html(data);

        }
    });

}