MVC如何在主页上返回多个网格的VIEW?

时间:2016-09-20 13:03:16

标签: c# asp.net-mvc razor view

我想在主页上放置多个网格,但是当我在View中返回多个网格时,它会显示错误。

它说我可以尝试抛出新的异常,但仍然是一个错误。如何让它显示多个网格?网格在模型中的列表中创建。

@using GridMvc.Html;
@model IEnumerable<Website.Models.Activities>
@model IEnumerable<Website.Models.Cities>

@{
        ViewBag.Title = "Index";
}
<head>
    <link href="@Url.Content("~/Content/Homestyle.css")" rel="stylesheet" type="text/css" />
</head>

<body>
    <h1 align="center" id="homewords">Home</h1><br/><br/><br/>
    <p id="mainp" align="center">
        Welcome to What2Do, we are a website to help you find things to do around town as a local or a tourist. We are a brand new website
        and we are still looking for more places and cities in the future. If you have any good ideas or know good places, please see the about
        page to email this information! Hope you enjoy! :)
    </p>
     <br /><br />
    <div id="city">
        <p id="choosecity">City: </p>
        @Html.Grid(Model).Columns(cols =>
    {
       cols.Add(c => c.stpete).Titled("St. Petersburg");
       cols.Add(c => c.tampa).Titled("Tampa");
       cols.Add(c => c.orlando).Titled("Orlando");
   });

</div>       
<div id="act" align="center">
        <p  id="activity">Activity: </p>
        <select id="ddlactivity" name="activity" size="4">
            <option value="1">Theme Parks</option>
            <option value="2">Outdoor Activities</option>
            <option value="3">Beach Activities</option>
            <option value="4">Bars and Music</option>
        </select>
    </div>
    <br/><br/><br/><br/>

    <div id="results" width="500px">

        @Html.Grid(Model).Columns(columns=>
   {
       columns.Add(c => c.activity).Titled("Activity");
       columns.Add(c => c.location).Titled("Location");
       columns.Add(c => c.cost).Titled("Cost");
       columns.Add(c => c.hours).Titled("Hours");

   }).WithPaging(3).Sortable(true)

    </div>

控制器:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Website.Models;

namespace Website.Controllers
{
    public class HomeController : Controller
    {
        // GET: Default
        public ActionResult Index()
        {
            var citymodel = new Cities();
            List<Cities> citygrid = citymodel.city();
            var model = new Activities();
            List<Activities> actgrid = model.Acts();

            return View(actgrid, citygrid);

        }

3 个答案:

答案 0 :(得分:0)

有很多方法可以实现这一点,但就其本身而言,一个视图只能有一个模型进入它。

您可以创建一个包含两个模型的ViewModel类,或者您可以将一个View重构为一个包含多个PartialViews的视图,每个视图都有一个模型。

答案 1 :(得分:0)

这是无效的

@model IEnumerable<Website.Models.Activities>
@model IEnumerable<Website.Models.Cities>

视图如何知道要映射到哪个

@Html.Grid(Model)?

一个视图只能有一个模型,要么将这些Enumerables组合成一个模型,要么将视图分解为可以拥有自己视图的部分。

您的主视图中没有网格,然后是两个部分,每个部分包含一个网格,连接的控制器操作为每个部分获取并附加特定网格的正确模型。

答案 2 :(得分:0)

您在视图中接受两种类型的模型列表,它也不起作用:

@model IEnumerable<Website.Models.Activities>
@model IEnumerable<Website.Models.Cities>

要在视图中使用多个模型列表,请使用Touple或添加主模型,然后将模型列表指定为该模型中的属性

<强> Touple:

model Tuple<IEnumerable<Website.Models.Activities>,IEnumerable<Website.Models.Cities>>;

实施例

<强>类别:

public class User
{
    public int Id { get; set; }
    public string Name { get; set; }
    public string ContactNo { get; set; }
}

public class UserEducation
{
    public int Id { get; set; }
    public int UserId { get; set; }
    public int PassingYear { get; set; }
    public string Education { get; set; }
}

<强>控制器:

[HttpGet]
public ActionResult Index()
{
    List<User> userList = new List<User>();
    for (int i = 1; i < 4; i++)
    {
        User objUser = new User();
        objUser.Id = i;
        objUser.Name = "Name" + i.ToString();
        userList.Add(objUser);
    }

    List<UserEducation> userEducationList = new List<UserEducation>();
    for (int i = 1; i < 4; i++)
    {
        UserEducation objUserEducation = new UserEducation();
        objUserEducation.Id = i;
        objUserEducation.Education = "Education" + i.ToString();
        objUserEducation.PassingYear = 2015+i;
        userEducationList.Add(objUserEducation);
    }

    return View(new Tuple<List<User>, List<UserEducation>>(userList, userEducationList));
}

查看:

@model Tuple<List<TestMVCApp.Models.User>, List<TestMVCApp.Models.UserEducation>>
@{
     Layout = null;
 }

 <style>
    tr th,tr td{
       padding:10px;
    }
  </style>
  <body style="margin-left:20px">
   <div style="float:left;clear:both;font-weight:bold;color:red;font-size:20px;">
    Users:
</div>
<div style="float:left;clear:both">

    <table>
        <tr>
            <th>
                Id
            </th>
            <th>
                Name
            </th>
        </tr>
        @foreach (var item in Model.Item1)
        {
            <tr>
                <td>@item.Id</td>
                <td>@item.Name</td>
            </tr>
        }
    </table>


</div>
<div style="float:left;clear:both;font-weight:bold;color:red;font-size:20px;">
    User Education:
</div>
<div style="float:left;clear:both">

    <table>
        <tr>
            <th>
                Id
            </th>
            <th>
                Education
            </th>
            <th>
                PassingYear
            </th>
        </tr>
        @foreach (var item in Model.Item2)
        {
            <tr>
                <td>@item.Id</td>
                <td>@item.Education</td>
                <td>@item.PassingYear</td>
            </tr>

        }
    </table>
</div>

<强>输出:

enter image description here