如何从另一个视图模型检索一个视图模型？

Question

I have this ViewModel which incorporates 3 other viewmodels and a list:

public class GroupPageViewModel{
    public string GroupName { get; set; }
    public GroupSelectViewModel _groupSelectVM {get; set;}
    public List<User> _users { get; set; }
    public ViewModelStudent _studentVM { get; set; }
    public ViewModelGroupMembers _groupMembersVM { get; set; }
}

In the view I can access each of these sub-ViewModels by Model._groupSelectVM , each of the sub-ViewModels are associated with a partial view. The problem arises when I need to refresh just one or two partial views, I'm not sure how to access the inner ViewModels returned in an Ajax success, and as I'm relatively new to MVC and asp.net in general. And I literally know next to nothing about JavaScript, jquery or Ajax.

How would I go about getting a specific ViewModel from the main ViewModel in an Ajax success?

This is just one example for the clarification requested all the others are pretty much the same (although some of them might need to update mutliple partial views -

From the controller:

[HttpPost]
public ActionResult Index(string groupChoice = "0", string newGroup = "")
    {
        string groupName = "";

        if (groupChoice == "0" && newGroup != "")
        {
            if (ModelState.IsValid)
            {
                Group group = new Group
                {
                    GroupName = newGroup,
                    Active = true
                };

                db.Groups.Add(group);
                db.SaveChanges();
                PopulateLists();
            }
        }
        else if (groupList == null)
        {
            groupList = (List<SelectListItem>)Session["groupList"];                
            Session["groupName"] = groupName = groupList.Where(m => m.Value == groupChoice).FirstOrDefault().Text;
            MembersInSpecificGroup(groupName, groupMembers, groupMembersList);
            groupPageVM._groupMembersVM = groupMembers;
        }

        return View("GroupSelection", groupPageVM);
    }

The script:

$(document).ready(function () {
        $('#selectedGroup').change(function () {
            var data = {
                groupChoice: $('#selectedGroup').val()
            };

            var groupChoice = $('#selectedGroup').val();
            $.ajax({
                url: '/Group/Index/',
                type: 'POST',
                data: { groupChoice: groupChoice },
                success: function (data) {
                    setTimeout(function () {
                        delayGroupSuccess(data);
                    }, delay);

                }
            });
        })
    });
    function delayGroupSuccess(data) {
        $("#groupSelect").html(data);
    }

The main page:

 @model EMBAProgram.ViewModels.GroupPageViewModel @{ Layout = "~/Views/Shared/_Layout.cshtml"; } <h2>Group Selection</h2> <div class="row" id="groupSelect"> @{ Html.RenderPartial("_GroupSelect", Model._groupSelectVM);} </div> <hr size="5" /> <div style="display: flex;"> <div> @{Html.RenderPartial("_Students", Model._studentVM);} </div> <div> @{ Html.RenderPartial("_GroupMembers", Model._groupMembersVM);} </div> <div> @{ Html.RenderPartial("_Users", Model._users);} </div> <br style="clear: left;" /> </div> 

The partial view:

 @model EMBAProgram.ViewModels.ViewModelGroupMembers <div class="table-responsive" id="groupResults"> <table class="table table-condensed table-responsive"> <thead> <tr> <th>@Html.DisplayName("M-Number")</th> <th>@Html.DisplayName("Name")</th> <th>@Html.DisplayName("Student")</th> </tr> </thead> <tbody> @foreach (var item in Model._groupVM) { <tr> <td>@Html.DisplayFor(m => item.MNumber)</td> <td>@Html.DisplayFor(m => item.Name)</td> <td>@Html.DisplayFor(m => item.Student)</td> </tr> } </tbody> </table> </div> 

Basically I need to be able pull the ViewModel for the partial view from the main ViewModel (which I believe is what is being returned in the Ajax,) and refresh the partial view.

Answer 1

I removed the original answer, it's available in the edit log if folks want to see it I think. But it was taking up too much space and was incorrect.

---

You can return multiple partial views, I thought it was a built in way to get them to a string (I was in a rush in my comment), but I've got a working example.

In the controller I have the following:

public ActionResult Index()
{
    var model = new TestViewModel
    {
        Students = GetStudents(),
        Categories = GetCategories(),
        Groups = GetGroups()
    };

    return View("Index", model);
}

// Returns multiple partial views as strings.
public ActionResult StudentsAndGroups()
{
    return Json(new
    {
        Students = RenderRazorViewToString("_Students", GetStudents()),
        Groups = RenderRazorViewToString("_Groups", GetGroups())
    }, JsonRequestBehavior.AllowGet);
}

// Creates a string from a Partial View render.
private string RenderRazorViewToString(string viewName, object model)
{

    ControllerContext.Controller.ViewData.Model = model;

    using (var stringWriter = new StringWriter())
    {
        var viewResult = ViewEngines.Engines.FindPartialView(ControllerContext, viewName);
        var viewContext = new ViewContext(ControllerContext, viewResult.View, ControllerContext.Controller.ViewData, ControllerContext.Controller.TempData, stringWriter);
        viewResult.View.Render(viewContext, stringWriter);
        viewResult.ViewEngine.ReleaseView(ControllerContext, viewResult.View);
        return stringWriter.GetStringBuilder().ToString();
    }
}

I have my main index view that looks like the following:

<button class="refresh">Refresh</button>

<div class="row">
    <div class="col-md-4 students">
        @{
            Html.RenderPartial("_Students", Model.Students);
        }
    </div>

    <div class="col-md-4">
        @{
            Html.RenderPartial("_Category", Model.Categories);
        }
    </div>

    <div class="col-md-4 groups">
        @{
            Html.RenderPartial("_Groups", Model.Groups);
        }
    </div>
</div>

@section scripts
{
    <script type="text/javascript">
        $(".refresh").click(function () {
            $.get("/Home/StudentsAndGroups", function (d) {
                $(".students").html(d.Students);
                $(".groups").html(d.Groups);
            })
        });
    </script>
}

The controller action StudentsAndGroups turns two partial views into strings. From there, the javascript calls that view and accesses the elements and returns them.

Helper method for rendering a view as a string was found here: https://stackoverflow.com/a/34968687/6509508