时间戳

首页 > 解决方案 > asp.net mvc，剃刀部分视图-布尔属性未显示

jquery - asp.net mvc，剃刀部分视图-布尔属性未显示

问题描述

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

第 1 行显示布尔 PublishedSwitch = true。

在此处输入图像描述

对于编辑和删除模式，布尔值 - PublishedSwitch（作为单选按钮）不会显示为 true（选中）。但是，它在相应的视图模型中以 value = true 传递。

没有选中的属性。

在此处输入图像描述

此外，对于编辑模式，如果我单击保存按钮，视图模型的“必需”数据注释会启动，说明“需要发布选项”。它似乎没有意识到它的值 = true。如果我选择单选按钮，则验证通过，因此设置方面很好。

编辑模式部分视图在 Bootstrap 模式中呈现，我将其发送到视图模型中的属性。

仅删除视图的部分视图在 Bootstrap 模式中呈现，我将其发送到视图模型中的属性。（为了保持简洁，我不会显示删除模式代码）。

注意：我有一个类似（几乎相同）的博客维护功能，包括编辑、详细信息和删除部分视图。对于那个，我为 PublishSwitch 设置了相同的单选按钮。它在编辑、删除和细节方面工作得很好。当视图模型包含 true 的 PublishSwitch 值时，单选按钮被选中 - 在所有视图中显示为 true。有一个选中的属性。

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

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

在此处输入图像描述

在此处输入图像描述

具有选中的属性。

在此处输入图像描述

我比较了两组代码，它们是相同的。所以我不明白为什么在这种情况下它不能正确显示。

对于详细信息模式，布尔值 - PublishedSwitch（作为单选按钮）显示为选中状态。

在底部，我展示了仅查看详细信息部分视图的代码和屏幕截图。仅查看详细信息部分视图在 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（作为单选按钮）显示得很好的视图。

在此处输入图像描述

标签： jqueryasp.net-mvcrazorpartial-views

解决方案

问题是模型绑定变得混乱，因为我将一个动作参数（在发送部分视图的动作方法中）命名为与我的模型属性相同 - 已发布开关。

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

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

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

推荐阅读