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

C# Corner

First Last

5y5.8k.NET

Here is a JQuery Datatable where I select the mode - edit, details or delete.

The 1 row shows that the boolean PublishedSwitch = true.

For the edit and delete modes, the boolean - PublishedSwitch (as a radio button) will NOT show. However,

it is passed in the corresponding view model with a value = true.

Also, for the edit mode, if I click the save button, the view model 'required' data annotation kicks in stating

"Publish Option required". It does not seem to recognize that it came in with a value = true.

If I select the radio button, the validation passes.

The edit mode partial view is rendered in a Bootstrap modal whereby I send it the properties in a view model.

The delete view-only partial view is rendered in a Bootstrap modal whereby I send it the properties in a view model.

(For sake of keeping it light, I will not show the delete mode code).

For the details mode, the boolean - PublishedSwitch (as a radio button) shows just fine.

At the bottom, I show the code for the view-only details partial view.

The view-only details partial view is rendered in a Bootstrap modal whereby I send it the properties in a view model.

For the edit mode:

Here is a screen shot depicting the view model just before it is sent to the partial view.

Here's the partial view - _EditGbngUpdate.cshtml:

@model GbngWebClient.Models.GbngUpdateDetailForMaintVM
@{
Layout = null;
}
@Scripts.Render("~/bundles/jqueryval")
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@Styles.Render("~/Content/css")
"modalView" class="modal-dialog">
class="modal-content">
class="modal-header">
"button" id="xClose" class="close" aria-hidden="true">×button>
class="modal-title">Edit Gbng Updatestrong>h4>

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

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

                    class="form-group">
                        @Html.LabelFor(model => model.GbngUpdateTitle, htmlAttributes: new { @class = "control-label col-md-2 manadatory" })
                        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>

                    class="form-group">
                        @Html.LabelFor(model => model.GbngUpdateContent, htmlAttributes: new { @class = "control-label col-md-2 manadatory" })
                        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>

                    class="form-group">
                        @Html.LabelFor(model => model.PublishedSwitch, htmlAttributes: new { @class = "control-label col-md-2 manadatory" })
                        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" })

                        @Html.ValidationMessageFor(model => model.PublishedSwitch, "", new { @class = "text-danger" })


                    @if (Model.PublishedSwitch == false)
                    {



                            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>

                    }



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




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



"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' });


Here's it's view 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; }
    }
}

Here is a screen shot depicting the view where the PublishSwith (as a radio button) will NOT show.



For the details view-only mode:

In this view-only details view the boolean - PublishedSwitch (as a radio button) - shows just fine.

It's a view-only details partial view presented in a Bootstrap modal whereby I send it the properties in a view model.

Here is a screen shot depicting the view model just before it is sent to the partial view.

Here's the partial view - _DetailsGbngUpdate.cshtml:
@model GbngWebClient.Models.GbngUpdateDetailVM

@{
    Layout = null;
}

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

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

            class="modal-title">Gbng Update's Detailsstrong>h4>



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

                    class="form-group">
                        @Html.LabelFor(model => model.GbngUpdateTitle, htmlAttributes: new { @class = "col-md-2" })
                        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" } })



                    class="form-group">
                        @Html.LabelFor(model => model.GbngUpdateContent, htmlAttributes: new { @class = "col-md-2" })
                        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" })



                    class="form-group">
                        @Html.LabelFor(model => model.PublishedSwitch, htmlAttributes: new { @class = "col-md-2" })
                        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" })



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



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



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



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



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



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





            class="modal-footer">
                class="form-group">
                    class="col-md-offset-2 col-md-10">
                        "button" class="btn btn-default" data-dismiss="modal">Closebutton>



        }



Here's the view 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; }
    }
}

Here is a screen shot depicting the view where the PublishSwith (as a radio button) is shown just fine.

7 Replies
Know the answer? Post it — somebody with the same question will find it here.
Sign in to answer this question
It is the same account you read, post and publish with — and you will come straight back to this page.
Sign in Create an account
First Last5y ago
To all, the problem is the model binding is getting confused because I named my action parameter (in the action method that was sending the partial view) the same as my model property - publishedSwitch.
public async Task EditGbngUpdate(int gbngUpdateId, bool publishedSwitch, bool alertSentSwitch).
I changed the name of the action parameter - publishedSwitch. Now it works fine. Weird I know!

A tough one to figure out, but after more research, I discovered the solution in a stackoverflow similar situation. So I give credit to AJ in https://stackoverflow.com/questions/10629671/using-html-radiobuttonfor-with-a-boolean-isnt-writing-checked-checked
+1
First Last5y ago
Also, there is no checked attribute when there should be.

+1
First Last5y ago
Sachin, I'm trying your suggestion in spite of the fact the way I have it setup works fine in my display view. So don't understand why it would work there, but not in my edit view.

I have per your code.
<div>
    <input type="radio" id="IsPublished" name="PublishedSwitch" value="true" @(model.PublishedSwitch == true ? checked: "")>
div>

I get

"the name 'model' does not exist in the current context".

The model has the red squilly line under it as well as the :.
+1
First Last5y ago
Sachin, I have a similar (almost identical) blog maintenance function with edit, details and delete partial views. For that one, I have the same radio button setup for the PublishSwitch. It works fine there for the edit, delete and details. When the view models contains a PublishSwitch value of true, the radio button is selected - shows as true in all views. I compared the 2 sets of code and they are the same. So I don't get why it does not show properly in this case.
+1
First Last5y ago
Kiran, the point here is that the value comes in as 'true' for both the edit and details view respective view models but the radio button does not show as true (a selected button) like the way it does on in the details view.
+1
Sachin Singh5y ago
In Edit Mode
under Modal popup, use simple radiobutton with ternary operator , it is lot easier.
"radio" id="IsPublished" name="PublishedSwitch"
value="true" @(model.PublishedSwitch==true?checked:"")>
Now your radiobutton will be checked or unchecked as per model value.
+1
Kiran Mohanty5y ago
<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>
Hi,
As per my understanding, you are using a single property for both radio buttons and the same property is set for validation. So for "un-publish" state radio button value is false. as soon as you click on any option, "PublishedSwitch" is set to true and hence no validation error.
+1