在索引页中显示局部视图



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

我做了一个车载控制器:

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.cs.html)

我的索引视图:

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

我看不到我的局部视图,出现了一个错误。我错过了什么/做错了什么?我的索引视图需要模型吗?

请喜欢这个

注意:您必须提到您使用索引页面的模型的名称空间

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

请创建如下类:我以您的为例。

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>

还有你对西塞尔课的另一个局部看法。

注意:我在下面的部分视图中命名为"_CreateCiyle",该视图应与我在索引视图中定义的视图相匹配

@model MvcApplication1.Models.InsertCicyleViewModel
@{
    Layout = null;
}
<div>  @cicyleItem .cicyleName </div>
<div>  @cicyleItem .cicyleId </div>

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

您可以只使用Html.Partial,不需要在此处渲染部分。

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

最新更新