【问题标题】:asp.net mvc parent child view with parent view updating childrenasp.net mvc 父子视图,父视图更新子视图
【发布时间】:2015-04-07 16:29:41
【问题描述】:

我正在使用局部视图来创建父子视图。我最理想的是父视图上的提交按钮以保存子值。

我有以下型号。

public class Course
{
    public int CourseId { get; set; }
    public string Name { get; set; }
    public int Par { get; set; }
    public string Tee { get; set; }
    public decimal Rating { get; set; }
    public virtual IEnumerable<CourseHole> Holes { get; set; }

    public static Course Create()
    {
        var course = new Course();
        course.Par = 72;
        var holes = new List<CourseHole>();
        for (int i = 0; i < 18; i++)
        {
            holes.Add(new CourseHole() { Course = course, Number = i + 1, Par = 4 });
        }
        course.Holes = holes;
        return course;
    }
}

public class CourseHole
{
    public int CourseHoleId { get; set; }
    public int Number { get; set; }
    public int Par { get; set; }
    public int Length { get; set; }
    public int Ranking { get; set; }
    public Course Course { get; set; }
}

还有下面的父视图。

@model Golf_Statz.Models.Course

@{
    ViewBag.Title = "Create";
}

<h2>Create</h2>


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

    <div class="form-horizontal">
        <h4>Course</h4>
        <hr />
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        <div class="form-group">
            @Html.LabelFor(model => model.Name, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-4">
                @Html.EditorFor(model => model.Name, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Name, "", new { @class = "text-danger" })
            </div>

            @Html.LabelFor(model => model.Par, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-4">
                @Html.EditorFor(model => model.Par, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Par, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Tee, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-4">
                @Html.EditorFor(model => model.Tee, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Tee, "", new { @class = "text-danger" })
            </div>

            @Html.LabelFor(model => model.Rating, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-4">
                @Html.EditorFor(model => model.Rating, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Rating, "", new { @class = "text-danger" })
            </div>
        </div>

        @foreach (Golf_Statz.Models.CourseHole hole in Model.Holes)
        {
            @Html.Partial("CreateHole", hole)
        }

        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Create" class="btn btn-default" />
            </div>
        </div>
    </div>
}



<div>
    @Html.ActionLink("Back to List", "Index")
</div>

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}

以及下面的局部视图。

@model Golf_Statz.Models.CourseHole

@{
    ViewBag.Title = "CreateHole";
}

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

    <div class="form-horizontal" id="CreateHole-" + model.CourseHoleId>
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        <div class="form-group">
            <div class="col-md-2 col-md-offset-2">
                <p>@Model.Number</p>
            </div>
            <div class="col-md-2">
                @Html.EditorFor(model => model.Par, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Par, "", new { @class = "text-danger" })
            </div>
            <div class="col-md-2">
                @Html.EditorFor(model => model.Length, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Length, "", new { @class = "text-danger" })
            </div>
            <div class="col-md-2">
                @Html.EditorFor(model => model.Ranking, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Ranking, "", new { @class = "text-danger" })
            </div>
        </div>
    </div>
}

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}

我的控制器方法是。

// GET: Course/Create
        public ActionResult Create()
        {           
            return View(Course.Create());
        }

        // POST: Course/Create
        // To protect from overposting attacks, please enable the specific properties you want to bind to, for 
        // more details see http://go.microsoft.com/fwlink/?LinkId=317598.
        [HttpPost]
        [ValidateAntiForgeryToken]
        public ActionResult Create([Bind(Include = "CourseId,Name,Par,Tee,Rating")] Course course)
        {
            if (ModelState.IsValid)
            {
                db.Courses.Add(course);
                foreach (var hole in course.Holes)
                {
                    db.CourseHoles.Add(hole);
                }
                db.SaveChanges();
                return RedirectToAction("Index");
            }

            return View(course);
        }

不管我做什么,当然。HttpPost Create 方法中的孔始终为空。 我想我想要类似于this 的东西,但它是用于编辑的,我希望它用于创建。 任何帮助将不胜感激,因为这是我的第一个 mvc 项目。

【问题讨论】:

  • 一些观察: - 你不能嵌套表单:你的部分有一个表单,我们的父级为每个 CourseHole 嵌套了这个部分。这是不允许的。 - 你部分有一个防伪令牌。这不是必需的,因为父视图已经有这个令牌。

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


【解决方案1】:

您的foreach 循环正在生成与您的模型无关的重复id 属性(无效的html)和name 属性。将部分更改为EditorTemplate

/Views/Shared/EditorTemplates/CourseHole.cshtml

并删除BeginFormAntiForgeryToken 和脚本

@model Golf_Statz.Models.CourseHole
<div class="form-horizontal" id="CreateHole-" + model.CourseHoleId>
    <div class="form-group">
        <div class="col-md-2 col-md-offset-2">
            <p>@Model.Number</p>
        </div>
        <div class="col-md-2">
            @Html.EditorFor(model => model.Par, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.Par, "", new { @class = "text-danger" })
        </div>
        <div class="col-md-2">
            @Html.EditorFor(model => model.Length, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.Length, "", new { @class = "text-danger" })
        </div>
        <div class="col-md-2">
            @Html.EditorFor(model => model.Ranking, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.Ranking, "", new { @class = "text-danger" })
        </div>
    </div>
</div>

然后在主视图中

@Html.EditorFor(m => m.Holes)

EditorFor() 方法将正确生成用于绑定到集合的 html,例如

<input name="Holes[0].Par" ...>
<input name="Holes[1].Par" ...>

您还需要删除[Bind] 属性,因为您排除了属性Holes,而且您似乎还是想绑定到所有属性。

旁注:您不会为洞CourseHoleIdNumber 属性生成输入,因此这些不会回发。

【讨论】:

  • 如何添加一个额外的孔? (我知道这有点超出 OP 的功能目标,但我真的很喜欢这种模式,并想用它来添加额外的子记录。)
  • @J-罗马。如果您希望创建一个表单以在视图中动态添加/删除集合项,请参考答案 herehere
  • 我只是在搜索并在相同的问题上找到了相同的答案!感谢您的许多贡献! (下次我会更加勤奋地搜索。;)
【解决方案2】:

在您的情况下,您有两种形式! Razor 会生成这个

<form>
    <form>
    </form>
 </form>

从局部视图中删除@using (Html.BeginForm()) {}

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2015-10-11
    • 1970-01-01
    • 2013-10-03
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多