在索引页面中显示部分视图

时间:2015-02-19 09:52:07

标签: asp.net asp.net-mvc asp.net-mvc-4

我制作我的第一个.NET MVC 4应用程序只是为了尝试一下。我已经创建了一个连接到MongoDB的应用程序,您可以在其中存储反向汽车数据。目前这些是两种不同的观点。但我希望它们成为两个不同的局部视图,我可以在一个视图中显示。为此,我开始使用我的应用程序。

我制作了一个CarsController:

namespace MvcApplication1.Controllers
{
    public class CarsController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }

        [HttpGet]
        public ActionResult Create()
        {
            return PartialView();
        }
    }
}

我制作了一个CarsModel

namespace MvcApplication1.Models
{
    public class InsertCarViewModel
    {
        public string Make { get; set; }
        public int NumberOfDoors { get; set; }
        public decimal DailyRentalFee { get; set; }
        public string DelimitedListOfCountries { get; set; }
    }
}

我已经为Indexview创建了Cars文件夹,为部分视图创建了Shared文件夹(_Create.cshtml)。

我的索引视图:

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>
    <div>
        @{Html.RenderPartial("_Create", Model.InsertCarViewModel)}
    </div>
</body>
</html>

我的部分视图(_Create)

@model MvcApplication1.Models.InsertCarViewModel

<script src="~/Scripts/jquery-1.8.2.min.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>

@using (Html.BeginForm()) {
    @Html.AntiForgeryToken()
    @Html.ValidationSummary(true)

    <fieldset>
        <legend>InsertCarViewModel</legend>

        <div class="editor-label">
            @Html.LabelFor(model => model.Make)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Make)
            @Html.ValidationMessageFor(model => model.Make)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.NumberOfDoors)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.NumberOfDoors)
            @Html.ValidationMessageFor(model => model.NumberOfDoors)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.DailyRentalFee)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.DailyRentalFee)
            @Html.ValidationMessageFor(model => model.DailyRentalFee)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.DelimitedListOfCountries)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.DelimitedListOfCountries)
            @Html.ValidationMessageFor(model => model.DelimitedListOfCountries)
        </div>

        <p>
            <input type="submit" value="Create" />
        </p>
    </fieldset>
}

我无法看到我的部分视图,但我收到了错误消息。 我错过了什么/做错了什么?我的索引视图是否需要模型?

4 个答案:

答案 0 :(得分:1)

请这样做

注意:您必须提及使用“索引”页面的模型命名空间。

@model MvcApplication1.Models.InsertCarViewModel
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>
    <div>
        @{Html.RenderPartial("_Create", Model)}
    </div>
</body>
</html>

您的部分视图必须包含您传递的相同名称空间

示例:

 @model MvcApplication1.Models.InsertCarViewModel
@{
    layout = null;
 }
<p> partial view</p>

答案 1 :(得分:1)

您的主视图未定义模型,您可以使用RenderAction(),因为它更适合您创建操作:

<div>
    @{  Html.RenderAction("Create", "Cars"); } // first parameter action name,
                                        //   second controller name
</div>

或使用Html.Action()

<div>
     @Html.Action("Create", "Cars") // first parameter action name,
                                            //   second controller name

</div>

答案 2 :(得分:1)

请创建如下所示的课程:我以你的为例。

namespace MvcApplication1.Models
{
    public class InsertCarViewModel
    {
        public string Make { get; set; }
        public int NumberOfDoors { get; set; }
        public decimal DailyRentalFee { get; set; }
        public string DelimitedListOfCountries { get; set; }

        public List<InsertBikeViewModel> Bike { get; set; }
        public InsertCicyleViewModel Cicyle { get; set; }
    }

    public class InsertBikeViewModel
    {
        public string Name { get; set; }
        public int Id { get; set; }
    }

    public class InsertCicyleViewModel
    {
        public string cicyleName { get; set; }
        public int cicyleId { get; set; }
    }
}

您的主要索引必须如下

@model MvcApplication1.Models.InsertCarViewModel
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>
    <div>
        @{
        Html.RenderPartial("_CreateBike", Model.Bike)
        }
    </div>
    <div>
        @{
        Html.RenderPartial("_CreateCicyle", Model.Cicyle)
        }
    </div>
</body>
</html>

在下面的代码中,我将在部分视图中显示自行车列表。

注意:我将名称“_CreateBike”提供给下面的部分视图,该视图应该与我在索引视图中定义的名称匹配。

@model List<MvcApplication1.Models.InsertBikeViewModel>
@{
    Layout = null;
}

 @foreach ( var bikeItem in Model)
 {
    <div>  @bikeItem.Name </div>
    <div>  @bikeItem.Id </div>
 }


</body>
</html>

你和Cicyle的另一个部分观点。

注意:我的名称为“_CreateCicyle”,位于部分视图下方,该视图应与我在“索引”视图中定义的名称相匹配。

@model MvcApplication1.Models.InsertCicyleViewModel
@{
    Layout = null;
}

<div>  @cicyleItem .cicyleName </div>
<div>  @cicyleItem .cicyleId </div>

答案 3 :(得分:0)

你可以使用Html.Partial,这里不需要渲染部分。

<div>
    @Html.Partial("_Create", Model.InsertCarViewModel)
</div>