如何在 ASP.NET MVC 的剃刀视图中使用多个单独的模型？

Question

我目前正在开展一个项目，我想在其中显示 2 个具有不同模型的 webgrid 表。我发现了很多教程如何在常规 MVC 视图中使用多个模型，但它在 Razor 视图中不起作用。我现在有点卡住了。

到目前为止我所尝试的 - 1

控制器：

我尝试使用动态 ExpandObject 向此视图添加两个列表，查看代码：

public ActionResult Index(int page = 1, string sortApi = "ApiName",string sortCompany = "CompanyName", string sortdir = "asc", string search = "")
{
        int pageSize = 13;
        int totalRecords = 0;
        if (page < 1)
        {
            page = 1;
        }
        int skip = (page * pageSize) - pageSize;
        ViewBag.TotalRows = totalRecords;
        ViewBag.search = search;

        //Dynamic ExpandObject
        var dataApiRedirects = getRedirects(search, sortApi, sortdir, skip, pageSize, out totalRecords);
        var dataCompanies = getCompanies(search, sortCompany, sortdir, skip, pageSize, out totalRecords);
        dynamic mymodel = new ExpandoObject();
        mymodel.ApiList = dataApiRedirects;
        mymodel.CompanyList = dataCompanies;

        return View(mymodel);
}

查看：

<div class="col-sm-1 d-flex align-items-stretch" style="padding-top: 5%;">
                <div class="form-group">
                    <a href="#" class="btn btn-primary" data-toggle="modal" data-target="#myModal">+API</a>
                </div>
                <!--MODAL-->
                <div class="modal fade" id="myModal" >
                    <div class="modal-dialog" style="width: 20%;">
                        <div class="modal-content">
                            <div class="modal-header">
                                <a href="#" class="close" data-dismiss="modal">&times;</a>
                                <h3 class="modal-title">Add API</h3>
                            </div>
                            <div class="modal-body">
                                <form id="myForm">
                                    <p>@Html.TextBoxFor(Model.ApiList.ApiName, new { @class = "form-control", @placeholder = "Name" })</p>
                                    <p>@Html.TextBoxFor(model => model.ApiList.First().Company.CompanyName, new { @class = "form-control", @placeholder = "Company" })</p>
                                    <p>@Html.TextBoxFor(model => model.ApiList.First().ApiURL2, new { @class = "form-control", @placeholder = "URL" })</p>
                                </form>
                            </div>
                            <div class="modal-footer">
                                <a href="#" class="btn btn-default" data-dismiss="modal">Cancel</a>
                                <input type="reset" value="Submit" class="btn btn-success" id="btnSubmit" />
                            </div>
                        </div>
                    </div>
                </div>
 </div>

但是，当我想在我的模式中创建文本框时，我收到以下错误：

到目前为止我尝试过的 - 2

我也尝试过使用 ViewBag：

控制器代码：

public ActionResult Index(int page = 1, string sortApi = "ApiName",string sortCompany = "CompanyName", string sortdir = "asc", string search = "")
{
        int pageSize = 13;
        int totalRecords = 0;
        if (page < 1)
        {
            page = 1;
        }
        int skip = (page * pageSize) - pageSize;

        var dataApiRedirects = getRedirects(search, sortApi, sortdir, skip, pageSize, out totalRecords);
        var dataCompanies = getCompanies(search, sortCompany, sortdir, skip, pageSize, out totalRecords);
        dynamic mymodel = new ExpandoObject();
        mymodel.ApiList = dataApiRedirects;
        mymodel.CompanyList = dataCompanies;

        //Model 1 data
        ViewBag.CompaniesList = dataCompanies;


        ViewBag.TotalRows = totalRecords;
        ViewBag.search = search;

        //Model 2 data
        return View(mymodel);
}

HTML 代码：

var getlist = ViewBag.CompaniesList as IEnumerable<APIBrokerFrontend.Models.Company>;

<div class="modal fade" id="myModalCompany">
                <div class="modal-dialog" style="width: 20%;">
                    <div class="modal-content">
                        <div class="modal-header">
                            <a href="#" class="close" data-dismiss="modal">&times;</a>
                            <h3 class="modal-title">Add Company</h3>
                        </div>
                        <div class="modal-body">
                            <form id="myForm">
                                @<p>@Html.TextBoxFor(getlist.First().CompanyName, new { @class = "form-control", @placeholder = "Company Name" })</p>
                            </form>
                        </div>
                        <div class="modal-footer">
                            <a href="#" class="btn btn-default" data-dismiss="modal">Cancel</a>
                            <input type="reset" value="Submit" class="btn btn-success" id="btnSubmit" />
                        </div>
                    </div>
                </div>
</div>

使用 ViewBag 我收到以下错误：

有人对此有解决方案吗？

提前致谢！

Answer 1

问题是使用了像First() 这样的操作。 here 解释了使用动态模型的正确方法。请更正您的代码以使用索引 0（例如 ApiList[0]）来获取第一个元素而不是 First()。

使用动态的例子：

查看：

@using Sample;

@model dynamic

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>Index</h2>

<a href="~/Default1">@Model.Blogs[0].MyCompany.CompanyName</a>

控制器：

public class Company
{
    public string CompanyName { get; set; }
}

public class Blog
{
    public string Name;
    public string URL;
    public Company MyCompany;
}

public class MyModel
{
    public List<Blog> Blogs { get; set; }
}

public class Default1Controller : Controller
{
 public class Company
{
    public string CompanyName { get; set; }
}

public class Blog
{
    public string Name;
    public string URL;
    public Company MyCompany;
}

public class MyModel
{
    public List<Blog> Blogs { get; set; }
}

public class Default1Controller : Controller
{
    List<Blog> topBlogs = new List<Blog>
      { 
          new Blog { Name = "ScottGu", URL = "http://weblogs.asp.net/scottgu/", MyCompany = new Company{
              CompanyName = "Microsoft"
          }},
          new Blog { Name = "Scott Hanselman", URL = "http://www.hanselman.com/blog/", MyCompany = new Company{
              CompanyName = "Microsoft"
          }},
          new Blog { Name = "Jon Galloway", URL = "http://www.asp.net/mvc", MyCompany = new Company{
              CompanyName = "Microsoft"
          }}
      };

    //
    // GET: /Default1/

    public ActionResult Index()
    {
        var myModel = new MyModel();
        myModel.Blogs = topBlogs;

        return View(myModel);
    }

}

希望对您有所帮助。

Answer 2

你不能。

你必须定义你传递的视图模型的类型并定义它的使用。

像这样：

@model ViewModel.MyModel

Razor 代表一个具体的语法，你不能像 javascript 动态那样使用它，你必须预先定义它，否则 razor 编译器不知道你正在使用的类型，也不知道这样的属性是否存在。

更新

第二个想法是有办法解决它，使用 Viewbag 它是动态的并且是为此而生的。但是，在使用前请务必确保属性存在。

Answer 3

您不能使用两个模型来传递视图。但是您可以查看ViewData。这是一个Dictionary<string, object>。你可以在你的控制器中尝试ViewData["Model2"] = Model2;，在你需要像Model2 model2 = (Model2)ViewData["Model2"]这样的视图中。

编辑：错误地使用了 ViewBag 而不是 ViewData。