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

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

我有这个ViewModel,其中包含3个其他视图模型和一个列表:

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.

在视图中,我可以通过Model._groupSelectVM访问这些子ViewModel中的每一个,每个子ViewModel都与局部视图相关联。当我需要刷新一个或两个局部视图时,问题出现了,我不知道如何访问在Ajax成功中返回的内部ViewModel,并且因为我对MVC和asp.net一般都比较新。而且我几乎不了解JavaScript,jquery或Ajax。

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

如何在Ajax成功中从主ViewModel获取特定的ViewModel?

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.

基本上我需要能够从ViewModel(我认为是在Ajax中返回的内容)拉取部分视图的ViewModel并刷新局部视图。

1 个解决方案

#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.

控制器操作StudentsAndGroups将两个部分视图转换为字符串。从那里,javascript调用查看和访问元素并返回它们。

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

在这里可以找到将视图呈现为字符串的Helper方法:https://*.com/a/34968687/6509508

#1