Rendar partial view in another partial view along with data model using jQuery .Ajax function

Question

I am working on MVC 5 app and I want to render partialView in another partialview with model data using jQuery ajax function. when javaScript function is called, it suppose to send ID of selected element back to controller which is working fine, and in return bring partial view along with model which is not working from following code

<td>
   <a href="#" class="SearchUser_Icon Hyperlink_Text" onclick="load_getUserListByGroupID(this)" [email protected]></a>
</td>

.

JavaScript function

function load_getUserListByGroupID(element)
{
    var selectedGroupID = element.id;

    alert(selectedGroupID);

    $.ajax({
        type: "POST",
        url: "/UserManagement/SearchUsersByGroupID/",
        dataType: "json",
        data: { 'GroupID': selectedGroupID },
        success: function (viewHTML) {
            alert("success");
            $("#userContentBlock").html(viewHTML);
        },
        error: function (errorData) { onError(errorData); }
    }).done(function (result) {
        alert("done!");
    });
}

.

<div id="userContentBlock"></div>

Controller Method

[HttpPost]
    public ActionResult SearchUsersByGroupID(string GroupID)
    {

        int intID = Convert.ToInt32(GroupID);

        var UsersListByGroupID = _userServices.GetUsersByGroupID(intID);

        return PartialView("GetUsersListByGroup_Partial", UsersListByGroupID );
    }

Answer 1

You are returning HTML while expecting JSON in the ajax call. Just remove the dataType: "json" from the settings and everything should work as expected.

jQuery.ajax() dataType:

The type of data that you're expecting back from the server. If none is specified, jQuery will try to infer it based on the MIME type of the response.