asp.net mvc,razor 部分视图 - 布尔值 属性 未显示

asp.net mvc, razor partial view - boolean property not showing

这是一个 JQuery 数据表,其中我 select 模式 - 编辑、详细信息或删除。

第 1 行显示布尔值 PublishedSwitch = true。


对于编辑和删除模式,布尔值 - PublishedSwitch(作为单选按钮)不会显示为 true (selected)。但是,它是在相应的视图模型中传递的,值为 true。

没有选中的属性。

此外,对于编辑模式,如果我单击保存按钮,视图模型 'required' 数据注释会启动,说明“需要发布选项”。它似乎没有意识到它带有一个值 = true。如果我 select 单选按钮,则验证通过,因此设置方面没问题。

编辑模式部分视图在 Bootstrap 模式中呈现,我将视图模型中的属性发送给它。

删除仅查看部分视图在 Bootstrap 模式中呈现,我将视图模型中的属性发送给它。 (为了简单起见,我不会显示删除模式代码)。


注意:我有一个类似(几乎相同)的博客维护功能,包括编辑、详细信息和删除部分视图。对于那个,我为 PublishSwitch 设置了相同的单选按钮。它在那里可以很好地进行编辑、删除和详细信息。当视图模型包含一个 PublishSwitch 值为 true 时,单选按钮被 selected - 在所有视图中显示为 true。有一个选中的属性。

这里是博客维护-编辑模式的屏幕截图。

发送到局部视图之前的视图模型。

有checked属性。

我对比了2套代码,是一样的。所以我不明白为什么在这种情况下它不能正确显示。


对于详细信息模式,布尔值 - PublishedSwitch(作为单选按钮)显示得很好 selected.

在底部,我展示了仅供查看的详细信息部分视图的代码和屏幕截图。仅查看详细信息部分视图在 Bootstrap 模态中呈现,我将视图模型中的属性发送给它。


对于编辑模式:

这是一个屏幕截图,描述了视图模型在发送到分部视图之前的状态。

这是部分视图 - _EditGbngUpdate.cshtml:

@model GbngWebClient.Models.GbngUpdateDetailForMaintVM

@{
  Layout = null;
}

@Scripts.Render("~/bundles/jqueryval")
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@Styles.Render("~/Content/css")

<div id="modalView" class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" id="xClose" class="close" aria-hidden="true">×</button>

            <h4 class="modal-title"><strong>Edit Gbng Update</strong></h4>
        </div>

    @using (Ajax.BeginForm("EditGbngUpdate", "GbngUpdateMaint", null, new AjaxOptions { HttpMethod = "Post", OnSuccess = "UpdateGbngUpdateSuccess" }, new { @class = "form-horizontal", role = "form" }))
    {
        <div class="modal-body">
            <div class="form-horizontal">
                @Html.ValidationSummary(true, "", new { @class = "text-danger" })

                @Html.HiddenFor(model => model.GbngUpdateId)

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

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

                <div class="form-group">
                    @Html.LabelFor(model => model.PublishedSwitch, htmlAttributes: new { @class = "control-label col-md-2 manadatory" })
                    <div class="col-md-10">
                        Publish
                        @Html.RadioButtonFor(model => model.PublishedSwitch, true, htmlAttributes: new { @id = "PublishedSwitchTrue" })
                        Un-Publish
                        @Html.RadioButtonFor(model => model.PublishedSwitch, false, htmlAttributes: new { @id = "PublishedSwitchFalse" })
                    </div>
                    @Html.ValidationMessageFor(model => model.PublishedSwitch, "", new { @class = "text-danger" })
                </div>

                @if (Model.PublishedSwitch == false)
                {
                    <div>
                        <br />
                        <strong class="warningdescr">Warning: Before you publish this gbng update, be aware that you will NOT be able to unpublish it after you publish it. Also, once published, you cannot modify it or delete it.</strong>
                    </div>
                }
            </div>
        </div>

        <div class="modal-footer">
            <div class="form-group">
                <div class="col-md-offset-2 col-md-10">
                    <input type="submit" class="btn btn-primary" value="Save" />
                    <button type="button" id="buttonClose" class="btn btn-default">Close</button>
                </div>
            </div>
        </div>

        // To stop forgery - CSRF.
        @Html.AntiForgeryToken()
    }
</div>
</div>

<script type="text/javascript">
    $(function () {
        $('#xClose').on('click', function () {
            $('#modalView').modal('hide');
            let myurl = "/GbngUpdateMaint/Index";
            window.location.href = myurl;
        })

        $('#buttonClose').on('click', function () {
            $('#modalView').modal('hide');
            let myurl = "/GbngUpdateMaint/Index";
            window.location.href = myurl;
        })
    })

    tinymce.init({ selector: 'textarea' });
</script>

这是它的视图模型 - GbngUpdateDetailForMaintVM:

using System.ComponentModel.DataAnnotations;
using System.Web.Mvc;

namespace GbngWebClient.Models
{
    public class GbngUpdateDetailForMaintVM
    {
        public int GbngUpdateId { get; set; }

        [Required(ErrorMessage = "Gbng Update Title required")]
        [MinLength(5, ErrorMessage = "Gbng Update Title Must Be At Least 5 characters")]
        [Display(Name = "Title: ")]
        public string GbngUpdateTitle { get; set; }

        [Required(ErrorMessage = "Gbng Update Content required")]
        [MinLength(10, ErrorMessage = "Gbng Update Content Must Be At Least 10 characters")]
        [AllowHtml]
        [Display(Name = "Content: ")]
        public string GbngUpdateContent { get; set; }

        [Required(ErrorMessage = "Publish Option required")]
        [Display(Name = "Publish Option: ")]
        public bool PublishedSwitch { get; set; }
   }

}

这是一个屏幕截图,描述了 PublishSwith(作为单选按钮)不会显示的视图。

详情查看模式:

在此仅查看详细信息视图中,布尔值 - PublishedSwitch(作为单选按钮) - 显示得很好。

这是在 Bootstrap 模态中呈现的仅供查看的详细信息局部视图,由此我将视图模型中的属性发送给它。

这是一个屏幕截图,描述了视图模型在发送到分部视图之前的状态。

这是部分视图 - _DetailsGbngUpdate.cshtml:

@model GbngWebClient.Models.GbngUpdateDetailVM

@{
    Layout = null;
}

@Scripts.Render("~/bundles/jqueryval")
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@Styles.Render("~/Content/css")

<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>

            <h4 class="modal-title"><strong>Gbng Update's Details</strong></h4>
        </div>

    @using (Ajax.BeginForm(null))
    {
        <div class="modal-body">
            <div class="form-horizontal">
                 @Html.ValidationSummary(true, "", new { @class = "text-danger" })

                <div class="form-group">
                    @Html.LabelFor(model => model.GbngUpdateTitle, htmlAttributes: new { @class = "col-md-2" })
                    <div class="col-md-10">
                        @* Note: I used EditorFor here instead of TextAreaFor as the width was too small. *@
                        @Html.EditorFor(model => model.GbngUpdateTitle, new { htmlAttributes = new { @class = "form-control", @disabled = "disabled" } })
                    </div>
                </div>

                <div class="form-group">
                    @Html.LabelFor(model => model.GbngUpdateContent, htmlAttributes: new { @class = "col-md-2" })
                    <div class="col-md-10">
                        @* Multi-line text box. *@
                        @* Note: I had to set the htmlAttributes this way to get it to be disabled. *@
                        @*           If I use: new { htmlAttributes = new { @disabled = "disabled" } }, it will NOT be disabled. *@
                        @Html.TextAreaFor(model => model.GbngUpdateContent, htmlAttributes: new { @disabled = "disabled" })
                    </div>
                </div>

                <div class="form-group">
                    @Html.LabelFor(model => model.PublishedSwitch, htmlAttributes: new { @class = "col-md-2" })
                    <div class="col-md-5">
                        Publish
                        @Html.RadioButtonFor(model => model.PublishedSwitch, true, htmlAttributes: new { @disabled = "disabled" })
                        Un-Publish
                        @Html.RadioButtonFor(model => model.PublishedSwitch, false, htmlAttributes: new { @disabled = "disabled" })
                    </div>
                </div>

                <div class="form-group">
                    @Html.LabelFor(model => model.PublishedDateTime, htmlAttributes: new { @class = "col-md-2" })
                    <div class="col-md-5">
                        @Html.EditorFor(model => model.PublishedDateTime, new { htmlAttributes = new { @class = "form-control", @disabled = "disabled" } })
                    </div>
                </div>

                <div class="form-group">
                    @Html.LabelFor(model => model.AlertSentSwitch, htmlAttributes: new { @class = "col-md-2" })
                    <div class="col-md-5">
                        @Html.EditorFor(model => model.AlertSentSwitch, new { htmlAttributes = new { @class = "form-control", @disabled = "disabled" } })
                    </div>
                </div>

                <div class="form-group">
                    @Html.LabelFor(model => model.CreatedDateTime, htmlAttributes: new { @class = "col-md-2" })
                    <div class="col-md-5">
                        @Html.EditorFor(model => model.CreatedDateTime, new { htmlAttributes = new { @class = "form-control", @disabled = "disabled" } })
                    </div>
                </div>

                <div class="form-group">
                    @Html.LabelFor(model => model.CreatorsUserName, htmlAttributes: new { @class = "col-md-2" })
                    <div class="col-md-5">
                        @Html.EditorFor(model => model.CreatorsUserName, new { htmlAttributes = new { @class = "form-control", @disabled = "disabled" } })
                    </div>
                </div>

                <div class="form-group">
                    @Html.LabelFor(model => model.ModifiedDateTime, htmlAttributes: new { @class = "col-md-2" })
                    <div class="col-md-5">
                        @Html.EditorFor(model => model.ModifiedDateTime, new { htmlAttributes = new { @class = "form-control", @disabled = "disabled" } })
                    </div>
                </div>

                <div class="form-group">
                    @Html.LabelFor(model => model.ModifiersUserName, htmlAttributes: new { @class = "col-md-2" })
                    <div class="col-md-5">
                        @Html.EditorFor(model => model.ModifiersUserName, new { htmlAttributes = new { @class = "form-control", @disabled = "disabled" } })
                    </div>
                </div>
            </div>
        </div>

        <div class="modal-footer">
            <div class="form-group">
                <div class="col-md-offset-2 col-md-10">  
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    }
</div>

这是视图模型 - GbngUpdateDetailVM:

using System;
using System.ComponentModel.DataAnnotations;

namespace GbngWebClient.Models
{
    public class GbngUpdateDetailVM
    {   
        public int GbngUpdateId { get; set; }

        [Display(Name = "Title: ")]
        public string GbngUpdateTitle { get; set; }

        [Display(Name = "Content: ")]
        public string GbngUpdateContent { get; set; }

        [Display(Name = "Publish Option: ")]
        public bool PublishedSwitch { get; set; }

        [Display(Name = "Published Date: ")]
        public DateTime? PublishedDateTime { get; set; }

        [Display(Name = "Email Alert Sent: ")]
        public bool AlertSentSwitch { get; set; }

        [Display(Name = "Modified Date: ")]
        public DateTime ModifiedDateTime { get; set; }

        [Display(Name = "Modifier:")]
        public string ModifiersUserName { get; set; }

        [Display(Name = "Created Date: ")]
        public DateTime CreatedDateTime { get; set; }

        [Display(Name = "Creator: ")]
        public string CreatorsUserName { get; set; }
    }
}

这是一个屏幕截图,描述了 PublishSwith(作为单选按钮)显示得很好的视图。

问题是模型绑定变得混乱,因为我将一个动作参数(在发送局部视图的动作方法中)命名为与我的模型相同 属性 - publishedSwitch。

 public async Task<ActionResult> 
 EditGbngUpdate(int gbngUpdateId, bool publishedSwitch, bool 
 alertSentSwitch).

我更改了操作参数的名称 - publishedSwitch。现在它工作正常。我知道很奇怪,因为我从未考虑过。一个很难弄清楚,但经过更多研究,我在另一个 Whosebug 类似情况下发现了解决方案。所以我在 Using Html.RadioButtonFor with a boolean isn't writing Checked="Checked"

中感谢 AJ

注意:我的博客维护版本运行良好,因为在那种情况下,我不需要包含该操作参数。