在索引页中显示部分视图

Question

我正在制作我的第一个 .NET MVC 4 应用程序只是为了试用一下。我制作了一个连接到 MongoDB 的应用程序，您可以在其中存储检索汽车数据。目前这是两种不同的观点。但我希望它们成为两个不同的局部视图，我可以在一个视图中显示它们。为此，我重新开始我的应用程序。

我做了一个 CarsController：

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

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

我做了一个汽车模型

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>
}

我看不到我的部分视图，并且出现错误。我错过了什么/做错了什么？我的索引视图需要模型吗？

Answer 1

您可以只使用 Html.Partial，这里不需要渲染部分。

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

Answer 2

请这样做

注意：您必须提及您使用索引页面的模型的名称space。

@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>

并且你的部分视图都必须包含相同的名称space你传递

示例：

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

Answer 3

您的主视图没有定义模型，您可以使用 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>

Answer 4

请像下面这样创建 class：我以你的为例。

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 的另一个局部视图 class。

注意 : 我在部分视图下面将名称命名为“_CreateCicyle”，它应该与我在索引视图中定义的相匹配。

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

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

在索引页中显示部分视图

Display a partial view in an index page

asp.net

asp.net-mvc

asp.net-mvc-4