使用 MVC 在同一页面上的多个部分视图和模型绑定实例

Posted 2023-04-13

【中文标题】使用 MVC 在同一页面上的多个部分视图和模型绑定实例

【英文标题】：Multiple instances of partial views and model binding on same page with MVC

【发布时间】：2016-07-05 09:19:58

【问题描述】：

我有一个局部的两次视图。部分不使用循环并具有基本验证。

这里是部分查看代码：

 <div class="col-md-4">
                    @html.LabelFor(model => model.ZipCode, new  @class = "control-label " )
                    @Html.TextBoxFor(model => model.ZipCode, new  @class = "form-control ",  tabindex = "4" )
                    @Html.ValidationMessageFor(model => model.ZipCode)
                </div>

这是我的主视图两次调用：

<div id="homeaddress">
                                @if (Model == null)
                                
                                @Html.Partial("~/Views/AddrPartial.cshtml", new Address())
                            
                            else
                            
                                @Html.Partial("~/Views/AddrPartial.cshtml", Model.HomeAddress)
                            
                        </div>

<div id="mailingaddress">
                                @if (Model == null)
                                
                                    @Html.Partial("~/Views/AddrPartial.cshtml", new Address())
                                
                                else
                                
                                    @Html.Partial("~/Views/AddrPartial.cshtml", Model.MailingAddress)
                                
                            </div>

那么只有“homeadrress” div 验证有效...这是我的模型的设置方式：

    public class Information
   
    public Address HomeAddress  get; set; 
    public Address MailingAddress  get; set; 
    

然后有一个单独的地址类...

public class Address

        [Display(Name = "Address")]
        public string Addr1  get; set; 
        [Display(Name = "Address 2")]
        public string Addr2  get; set; 
        [Display(Name = "Zip Code")]
        [RegularExpression(@"^\d5(-\d4)?|^$", ErrorMessage = "Invalid Zip Code")]
        public string ZipCode  get; set; 

生成的 html 显示了问题... mailingaddress html 没有检查验证所需的正则表达式..

<input class="form-control " data-val="true" data-val-regex="Invalid Zip Code" data-val-regex-pattern="^\d5(-\d4)?|^$" id="ZipCode_home" name="ZipCode_home"  tabindex="4" type="text" value="12345">
<span class="field-validation-valid" data-valmsg-for="ZipCode_home" data-valmsg-replace="true"></span>

<input class="form-control " id="ZipCode_mailing" name="ZipCode_mailing"  tabindex="4" type="text" value="54321">
<span class="field-validation-valid" data-valmsg-for="ZipCode_mailing" data-valmsg-replace="true"></span>

查看此代码后，我的问题是为什么会发生这种情况以及如何解决此问题。在此先感谢，如果需要，我可以回答问题并提供更多代码。

【问题讨论】：

您是否要求为您提供电子邮件验证正则表达式？见validating email address using regular expression on razor page。

你为什么会认为@WiktorStribiżew

生成的 html 显示了问题... mailingaddress html 没有检查验证所需的正则表达式... 为什么会发生这种情况，我该如何解决这个

1) 它是一个物理地址，而不是电子邮件。 2）因此，它需要邮政编码验证。 3）我在提供的代码中有正则表达式验证。它适用于第一个部分实例。第二个它没有。这就是我遇到麻烦的地方。

如果您将部分重命名为/Views/Shared/EditorTemplate/Address.cshtml（即，它是EditorTemplate），那么它只是@Html.EditorFor(m => m.HomeAddress) 和@Html.EditorFor(m => m.MailingAddress)，并且所有这些都可以正确处理（正确的前缀将添加到您的表单控件中）

【参考方案1】：

这是因为您正在渲染地址部分页面的两个实例。模型绑定框架要求 HTML 字段遵循此命名约定，模型绑定才能按预期工作

<input id="ShippingAddress_Street1" 
   name="ShippingAddress.Street1" type="text" value="" />
<input id="BillingAddress_Street1" 
   name="BillingAddress.Street1" type="text" value="" />

从上面的标记可以看出，id 和 name 属性必须完全限定被绑定的模型属性。

上述问题可以通过在渲染地址部分页面时使用 Partial() 助手的变体来解决

Html.Partial("_Address", 
new ViewDataDictionary() 
 
     TemplateInfo = new TemplateInfo() 
       HtmlFieldPrefix = "ShippingAddress"  )

<h3>Billing Address</h3>
@Html.Partial("_Address", 
new ViewDataDictionary() 
 
    TemplateInfo = new TemplateInfo() 
        HtmlFieldPrefix = "BillingAddress"  )

【讨论】：

当您通过 $.ajax( ... success: function (data) $("#newPanel").html(data); ... ); 更新每个“地址面板”时，这会起作用吗？ （其中调用的 Action 方法返回一个PartialView("_MyPanel", spPanelVm);）

【参考方案2】：

由于某种原因，上面的代码对我不起作用，所以我最终写成如下：

@Html.Partial("_Address",
                 Model?.Form?.BillingAddress,
                 new ViewDataDictionary(ViewContext.ViewData)
                 
                     TemplateInfo =  
                                      HtmlFieldPrefix = "billing",
                                      FormattedModelValue = "Billing address" 
                                    
                 )

我使用FormattedModelValue 来存储标签，因为相同的视图用于生成公司地址和帐单地址。

希望有帮助

【讨论】：

ViewDataDictionary() 没有接受 0 个参数的构造函数！！！所以你的构造函数有 ViewData 请求的参数