How to Add Custom Fields to a Json Result - ASP.NET MVC

Question

I am developing an admin page that able to edit registered users info. When I select a user from a dropdownlist, the users current info is filling to edit fields. I made it with Javascript and Json.

This is my JS code so far:

$(document).ready(function () {

        $("#UserId").change(function () {

            if ($(this).val() != "" && $(this).val() != undefined && $(this).val() != null) {
                $.ajax({
                    type: "POST",
                    url: "/AdminController/GetUserData",
                    cache: false,
                    data: { userid: $(this).val() },
                    success: function (result) {                         
                        $("#EMailAdress").val(result.EMailAdress)
                        $("#UserName").val(result.UserName)
                    }

                });
            }

            else {
                $("#UserName").val("");
                $("#EMailAdress").val("");
            }

        });
    });

As you see I am trigering "/AdminController/GetUserData" and I have this code in there:

[HttpPost]
    public JsonResult GetUserData()
    {
        int userid = Convert.ToInt32(Request.Form["userid"]);
        MyContext _db = new MyContext();
        var userObj = _db.Users.SingleOrDefault(p => p.UserId == userid);
        return Json(userObj);
    }

Now I have to display the selected user's current role in same page. I can reach that role data in my controller. But I can't find a way to add it to my JsonResult. I think I can trigger another controller method that gets role data for the user with another JS code but I think it is not a good way to do this.

I am a begginer so if the solution is easy please don't blame me... I hope I made myself clear. Any help would be appreciated.

Answer 1

You could define a view model:

public class MyViewModel
{
    public User User { get; set; }
    public RoleData Role { get; set; }
}

that your controller action will populate:

[HttpPost]
public ActionResult GetUserData(int userId)
{
    MyContext _db = new MyContext();
    var userObj = _db.Users.SingleOrDefault(p => p.UserId == userId);
    var roleData = .....

    var model = new MyViewModel();
    model.User = userObj;
    model.Role = roleData;
    return Json(model);
}

Notice how the controller action takes the userId as parameter to avoid you from writing plumbing code of parsing it from the request. That's already handled by the default model binder.

And inside your AJAX success callback you could access the 2 properties of the view model that we defined (User and Role respectively):

success: function (result) {                         
    $("#EMailAdress").val(result.User.EMailAdress);
    $("#UserName").val(result.User.UserName);

    var roleData = result.Role;
    // do something here with the role data
}