ASP.NET MVC复用EditorTemplate实现AJAX新增Person的最佳实践

这个场景太常见了——既要复用已有的EditorTemplate，又不想因为多余的间接层让代码变晦涩。其实有几个简洁的方案可以解决这个问题，不需要绕弯路：

先整理下你提供的基础代码，方便参考：

Person模型 #

public class Person 
{ 
    public string Name { get; set; } 
    public string Email { get; set; } 
}

Person的EditorTemplate（~/Views/Shared/EditorTemplates/Person.cshtml） #

@model Person
<div class="form-group">
    @Html.LabelFor(model => model.Name)
    @Html.EditorFor(model => model.Name)
</div>
<div class="form-group">
    @Html.LabelFor(model => model.Email)
    @Html.EditorFor(model => model.Email)
</div>

原Index.cshtml代码 #

@model Person[]
<ul>
    @foreach (var person in Model)
    {
        <li>@person.Name</li>
    }
</ul>
<div class="modal" id="new">
    <div class="modal-dialog">
        <div class="modal-content">
            @using (Ajax.BeginForm("create", "contacts", new AjaxOptions()))
            {
                <div class="modal-header">
                    Create person
                </div>
                <div class="modal-body">
                    <!-- use editor template ? -->
                    @Html.AntiForgeryToken()
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn">Ok</button>
                </div>
            }
        </div>
    </div>
</div>

方案1：直接在弹窗中调用EditorTemplate（最简洁） #

你完全不需要额外的分部视图，直接在弹窗的modal-body里调用@Html.EditorFor并传入一个新的Person实例即可，ASP.NET MVC会自动匹配你定义的Person EditorTemplate：

修改Index.cshtml的弹窗部分：

<div class="modal-body">
    @Html.EditorFor(m => new Person()) <!-- 自动复用Person的EditorTemplate -->
    @Html.AntiForgeryToken()
</div>

如果需要指定模板名称（比如存在多个同名模板时），可以用：

@Html.Editor("NewPerson", typeof(Person), new Person())

优点：零额外文件，代码直接明了，完全遵循DRY原则，没有冗余。
缺点：如果弹窗的表单逻辑后续需要扩展（比如添加额外提示、自定义按钮逻辑），会让Index.cshtml变得臃肿。

方案2：封装弹窗表单为专用PartialView（平衡复用与清晰） #

如果担心弹窗逻辑后续会变复杂，把表单部分抽成PartialView是更合理的选择——这不是“不必要的间接性”，反而会让代码结构更模块化：

1. 创建~/Views/Contacts/_CreatePersonForm.cshtml（对应你的contacts控制器）：

@model Person
@using (Ajax.BeginForm("create", "contacts", new AjaxOptions()))
{
    <div class="modal-header">
        Create person
    </div>
    <div class="modal-body">
        @Html.EditorForModel() <!-- 复用已有EditorTemplate -->
        @Html.AntiForgeryToken()
    </div>
    <div class="modal-footer">
        <button type="submit" class="btn">Ok</button>
    </div>
}

2. 在Index.cshtml中调用这个PartialView：

<div class="modal" id="new">
    <div class="modal-dialog">
        <div class="modal-content">
            @Html.Partial("_CreatePersonForm", new Person())
        </div>
    </div>
</div>

优点：把弹窗的表单逻辑完全封装，Index.cshtml只负责渲染弹窗容器，代码结构更清晰；后续修改表单逻辑只需要改动PartialView，不影响主页面。
缺点：多了一个文件，但这是模块化开发的合理代价，完全算不上“晦涩”。

方案3：通过Html.Action动态加载表单（适合复杂场景） #

如果你的表单需要从服务器获取初始数据（比如下拉选项），或者希望表单逻辑完全由控制器控制，可以用Html.Action来加载表单：

1. 在ContactsController中添加一个Action：

public ActionResult CreateForm()
{
    // 可在这里初始化Person实例，或传入默认值/动态数据
    return PartialView("_CreatePersonForm", new Person());
}

2. 在Index.cshtml中调用：

<div class="modal" id="new">
    <div class="modal-dialog">
        <div class="modal-content">
            @Html.Action("CreateForm", "Contacts")
        </div>
    </div>
</div>

优点：表单的初始化逻辑交给控制器，符合MVC职责分离；适合需要动态数据的复杂表单场景。
缺点：比前两种方案多了一层控制器逻辑，简单场景下没必要。

总结推荐 #

• 如果弹窗表单逻辑简单，方案1是最优解，直接复用EditorTemplate，代码最简洁。
• 如果后续可能扩展表单逻辑，方案2更合适，模块化清晰，没有冗余。
• 只有当表单需要动态数据或复杂初始化时，才考虑方案3。

内容的提问来源于stack exchange，提问作者Nformer