代码之家  ›  专栏  ›  技术社区  ›  Pirate ammar

.NET MVC编辑器模板在回发时不返回数据

  •  0
  • Pirate ammar  · 技术社区  · 8 年前

    我需要显示一个动态复选框列表(数据来自数据库)。我有一个复选框的视图模型。

    public class AmenitiesListViewModel
        {
            public int AmenityId { get; set; }
            public string Title { get; set; }
            public bool Checked { get; set; }
            public string ImageSrc { get; set; }
        }
    

    另一个ViewModel具有该ViewModel的ICollection对象。

    public class HouseAmenityViewModel
        {
            public HouseAmenityViewModel()
            {
                Amenities = new HashSet<AmenitiesListViewModel>();
            }
    
            [HiddenInput]
            public Guid HouseId { get; set; }
            public ICollection<AmenitiesListViewModel> Amenities { get; set; }
        }
    

    然后,我创建了一个服务来准备来自数据库的复选框列表。

    var amenities = await _amenityRepository.ListAmenitiesAsync();
                    if (amenities != null)
                    {
                        model.HouseId = houseId;
                        foreach (var amenity in amenities)
                        {
                            model.Amenities.Add(new AmenitiesListViewModel
                            {
                                AmenityId = amenity.AmenityId,
                                Title = amenity.Description,
                                Checked = false,
                                ImageSrc = string.Format(_imageOptions.AmenityImagePath, amenity.ImageFileName)
                            });
                        }
                    }
    

    在我看来,我正在使用 @Html.EditorFor 以呈现复选框列表。

    <form asp-action="UpdateHouseAmenity" asp-controller="Admin" method="post" id="update-amenity-form" class="amenity-form">
    
            <input asp-for="HouseId" />
            <div class="row"><div class="col-md-12">@Html.EditorFor(m => m.Amenities)</div></div>
            <div class="row">
                <div class="col-md-12 mt-10">
                    <button type="submit" class="btn btn-primary" id="update-amenity-button">Submit</button>
                    <button type="button" class="btn btn-danger">Reset</button>
                </div>
            </div>
    
    </form>
    

    编辑器模板如下所示:

    @model HouseRentalManagement.Models.AdminViewModels.AmenitiesListViewModel
    
    <div class="container mt-10" style="width: 30%;
      display: inline-block;
      float: left;">
    
        <label>
            <img src="@Model.ImageSrc" style="height: 30px; width: 30px;" />
    
            <input type="checkbox" @string.Format("{0}", Model.Checked ? "checked" : "") /> @Model.Title
        </label>
    </div>
    

    我的视图中正确显示了复选框列表。我的表格正在提交给指定的操作。

    问题是:当我屈服的时候,我什么也得不到 @Html.EditorFor(m => m.Amenities) 收集。

    控制器:

    public async Task<IActionResult> UpdateHouseAmenity(HouseAmenityViewModel model)
            {
                var result = await _houseService.UpdateHouseAmenitiesAsync(model);            
            }
    

    这里要注意的一点是,在页面加载后,这个视图是使用ajax呈现的。 阿贾克斯:

    var loadAmenity = function () {
            $.ajax({
                url: "/Admin/GetHouseAmenities"
            }).done(function (data) {
                $('#amenity-info').html(data);
            }).fail(function (a, textError) {
                console.error(textError);
            });
        };
    

    控制器:

    var model = await _houseService.GetHouseAmenityViewModelAsync(new Guid());
                return PartialView("~/Views/Admin/_HouseAmenityPartial.cshtml", model);
    
    1 回复  |  直到 8 年前
        1
  •  0
  •   Shyju    8 年前

    您当前的编辑器模板代码将为 Amenities 收集

    <label>
           <img src="SomeImageSourceValue" style="height: 30px; width: 30px;">
           <input type="checkbox"> AminityTitle
    </label>
    

    复选框没有 name 属性值!为了使模型绑定工作,表单元素 名称 属性值应与类的属性名匹配( 作为httppost action方法参数的 )所以理想情况下我们需要这样生成

    <input type="checkbox" name="Amenities[0].Checked" value="true">
    <input type="checkbox" name="Amenities[1].Checked" value="true">
    <input type="checkbox" name="Amenities[2].Checked" value="true">
    

    好消息是,如果正确使用输入标记助手,它将为您生成正确的标记。

    @model HouseRentalManagement.Models.AdminViewModels.AmenitiesListViewModel
    
    <div class="container mt-10" >
    
        <img src="@Model.ImageSrc" style="height: 30px; width: 30px;" />
    
        <input type="checkbox" asp-for="Checked" /> @Model.Title
        <input type="hidden" asp-for="AmenityId" />
    
    </div>
    
    推荐文章