asp.net mvc，razor 部分視圖 - boolean 屬性未顯示

Question

這是一個 JQuery 數據表，其中我 select 模式 - 編輯、詳細信息或刪除。

第 1 行顯示 boolean PublishedSwitch = true。

---

對於編輯和刪除模式，boolean - PublishedSwitch（作為單選按鈕）不會顯示為 true（選中）。 但是，它在相應的視圖 model 中傳遞，值為 true。

沒有選中的屬性。

此外，對於編輯模式，如果我單擊保存按鈕，視圖 model“必需”數據注釋將啟動，說明“需要發布選項”。 它似乎沒有意識到它帶有一個值 = true。 如果我 select 單選按鈕，則驗證通過，因此設置方面很好。

編輯模式部分視圖在 Bootstrap 模式中呈現，我將視圖 model 中的屬性發送給它。

僅刪除視圖的部分視圖在 Bootstrap 模式中呈現，我將視圖 model 中的屬性發送給它。（為了保持簡潔，我不會顯示刪除模式代碼）。

---

注意：我有一個類似（幾乎相同）的博客維護 function，具有編輯、詳細信息和刪除部分視圖。 對於那個，我為 PublishSwitch 設置了相同的單選按鈕。 它在那里可以很好地進行編輯、刪除和詳細信息。 當視圖模型包含一個 PublishSwitch 值為 true 時，單選按鈕被選中 - 在所有視圖中顯示為 true。 有一個選中的屬性。

以下是博客維護 - 編輯模式的屏幕截圖。

發送到局部視圖之前的視圖 model。

具有檢查屬性。

我比較了兩套代碼，它們是一樣的。 所以我不明白為什么在這種情況下它不能正確顯示。

---

對於詳細信息模式，boolean - PublishedSwitch（作為單選按鈕）顯示為選中狀態。

在底部，我展示了僅供查看的詳細信息部分視圖的代碼和屏幕截圖。 僅查看詳細信息部分視圖在 Bootstrap 模式中呈現，我將視圖 model 中的屬性發送給它。

---

對於編輯模式：

這是一個屏幕截圖，描述了視圖 model 在發送到局部視圖之前。

這是局部視圖 - _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>

這是視圖 model - 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（作為單選按鈕）不會顯示的視圖。

有關詳細信息，僅查看模式：

在此僅供查看的詳細信息視圖中，boolean - PublishedSwitch（作為單選按鈕）- 顯示得很好。

這是在 Bootstrap 模態中呈現的僅供查看的詳細信息部分視圖，因此我將屬性發送到視圖 model 中。

這是一個屏幕截圖，描述了視圖 model 在發送到局部視圖之前。

這是局部視圖 - _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>

這是視圖 model - 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（作為單選按鈕）顯示得很好的視圖。

Answer 1

問題是 model 綁定變得混亂，因為我將一個動作參數（在發送局部視圖的動作方法中）命名為與我的 model 屬性 - publishedSwitch 相同。

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

我更改了操作參數的名稱 - publishedSwitch。 現在它工作正常。 我知道很奇怪，因為我從未考慮過。 一個很難弄清楚，但經過更多研究，我在另一個 stackoverflow 類似情況下發現了解決方案。 所以我在Using Html.RadioButtonFor with a boolean isn't writing Checked="Checked"中歸功於 AJ

注意：我的博客維護版本運行良好，因為在那種情況下，我不需要包含該操作參數。