如何避免在 MVC 中查看代码重复？答案

【问题标题】：How to avoid view code duplication in MVC?如何避免在 MVC 中查看代码重复？
【发布时间】：2015-02-22 16:39:23
【问题描述】：

我为我的问题做了一个非常简单的模型。

如果我有一个复杂的人 viewModel：

 public class PersonViewModel
{
    public string Name { get; set; }
    public List<DogViewModel> Dogs { get; set; }
}

public class DogViewModel
 {
    public string Name { get; set; }
 }

我有 2 个视图：编辑人员和创建人员：

@model Custom.Models.PersonEditViewModel
@{
    ViewBag.Title = "Edit";
}

<h2>Edit Person</h2>

<div class="PersonDataArea">
    //this contain identical html in Create and Edit view
</div>
<div class="SelectDogAre">
    //this contain identical html in Create and Edit view
</div>

<input type="button" value="save" />





@model Custom.Models.PersonCreateViewModel
@{
    ViewBag.Title = "Create";
}

<h2>Create Person</h2>

<div class="PersonDataArea">
    //this contain identical html in Create and Edit view
</div>
<div class="SelectDogAre">
    //this contain identical html in Create and Edit view
</div>

<input type="button" value="save"/>

当然每个视图都有 2 个 ViewModel：

public class PersonEditViewModel
    {
        public PersonViewModel Person { get; set; }
    }




public class PersonCreateViewModel
{
    public PersonViewModel Person { get; set; }
}

问题：

如您所见，我在创建和编辑视图中有 2 个相同的区域，我想避免重复代码。我不能使用局部视图，因为局部视图中的模型不会绑定在帖子上。如何避免重复查看代码？

【问题讨论】：

“我不能使用局部视图”——这是一个有缺陷的陈述。没有理由你不能？
如何在发布请求时将数据部分视图绑定到 Mainview？
不确定你在问什么。你的意思是，如何将数据绑定到局部视图中？或者局部视图如何以 POST 的形式将数据传回？
局部视图如何将数据传回帖子？
如果PersonEditViewModel 和PersonCreateViewModel 相同并生成相同的html，为什么会有单独的视图模型？除非您将主模型传递给局部模型或指定 HtmlFieldPrefix (Refer this answer)，否则局部变量不会绑定。

标签： asp.net-mvc asp.net-mvc-3 asp.net-mvc-4 model-view-controller

【解决方案1】：

您肯定需要使用局部视图。

首先，您不需要两个单独的视图模型。只需PersonViewModel 就足够了。

然后您将创建一个局部视图_PersonEdit.cshtml（顺便说一下您的代码中缺少该表单）：

@model Custom.Models.PersonViewModel

@using(Html.BeginForm())
{
    <div class="PersonDataArea">
        //this contain identical html in Create and Edit view
    </div>
    <div class="SelectDogAre">
        //this contain identical html in Create and Edit view
    </div>

    <input type="button" value="save"/>
}

还有，用于创建和编辑的两个视图：

创建：

@{
    ViewBag.Title = "Create";
}

<h2>Create Person</h2>

@Html.Partial("_PersonEdit", Model)

编辑：

@{
    ViewBag.Title = "Edit";
}

<h2>Edit Person</h2>

@Html.Partial("_PersonEdit", Model)

或者，您可以只为这两个操作创建一个视图，并将 ViewBag.Title 从控制器传递到视图。

【讨论】：

如果提交操作不同？
当你使用Html.BeginForm()没有指定动作名称时，动作名称将与原始GET动作相同，所以你不必担心。但是，如果您需要传递不同的参数或出于其他原因，您可以将表单放在视图中（创建和编辑），而不是放在局部视图中。
@MikeDebela，最后一句话是什么意思？
“或者，您可以只为两个操作创建一个视图”
您可以使用 ViewBag 从控制器将提交动作名称传递给视图，然后在表单中指定动作名称。