23

I am new in ASP.NET Core and would like to ask about displaying a field in w a view. I have a

class Person { 
    public string Name {get; set;} 
    public string Nickname {get; set;} 
}

Typically, in the EditPerson View, I do

<input asp-for="Name" class="form-control" />
<input asp-for="Nickname" class="form-control" />

to display the fields.

But in my EditPerson View I need to display Name as readonly, and Nickname as editable field.

The Name should not be in a textbox(even readonly), but rather in a label or div...

Is there a standard approach to display such fields?

I don't want that the field to be updated back to the model or DB, I need only reading the field.

1

8 Answers 8

35

Try this.

<input asp-for="Name" class="form-control" readonly="@(true)">
<input asp-for="Name" class="form-control" readonly="@(false)">

This render:

<input class="form-control" type="text" id="Name" name="Name" value="Tom" readonly="readonly">
<input class="form-control" type="text" id="Name" name="Name" value="Tom">

I realized it from here: https://github.com/aspnet/Mvc/issues/7333#issuecomment-363504164

1
  • good point, but read the OP The Name should not be in a textbox(even readonly)
    – serge
    Commented Mar 7, 2018 at 10:33
10

Output it as HTML with Razor syntax

https://learn.microsoft.com/en-us/aspnet/core/mvc/views/razor

@Model.Name
<input asp-for="Nickname" class="form-control" />

Note - this will need styling appropriately, or wrapping in <span> tag etc...

2
  • 1
    I am afraid the label will display the DisplayName of the field, not the field value, isn't it?
    – serge
    Commented Aug 23, 2017 at 9:09
  • 1
    That should be @Model.Name
    – user3559349
    Commented Aug 23, 2017 at 9:56
6

This worked for me

<input asp-for="Name" class="form-control" ReadOnly="true"/>
<input asp-for="Nickname" class="form-control" />
6
  • 2
    This will display the value in a textbox. The OP states The Name should not be in a textbox
    – Alex
    Commented Aug 23, 2017 at 9:04
  • also I don't want the field be updated back to the model
    – serge
    Commented Aug 23, 2017 at 9:08
  • The field will not be updated,it would just make the textbox readonly
    – Musab
    Commented Aug 23, 2017 at 9:10
  • 1
    The second one won't generate the value of the property but a label for it (property name or DisplayName if specified). P.S: Regarding the first one - in addition if you manually forge the value of the input (and eventually remove the readonly attribute) the model will be updated so it's kinda not safe if you haven't validated it specifically on the server-side. Commented Aug 23, 2017 at 9:17
  • @SamuilPetrov more than that, label is readonly by default :)
    – serge
    Commented Aug 23, 2017 at 9:20
3
[ReadOnly(true)]
public string Name {get; set;} 

Add a ReadOnly attribute. Remember to include using System.Component; at the top of your class.

2
  • 9
    This has absolutely nothing to do with how the markup is rendered.
    – Alex
    Commented Aug 23, 2017 at 9:06
  • This isn't what the OP is asking for.
    – jason
    Commented Oct 13, 2022 at 18:21
2

If you want to display the model property Name and don't want it to be an input element, just do this:

<p>@Model.Name</p>

Important: if you have used the DisplayFormat attribute on Name in your model (e.g. to apply number/date formatting or to control how blanks/nulls are displayed), you must do this instead:

<p>@Html.DisplayFor(m => m.Name)</p>

Of course, it doesn't need to be a p. Use a div, span, etc.

Give it a class and style it with CSS as desired.

1

You can try this:

<input asp-for="Name" readonly="@(!string.IsNullOrEmpty(Model.Name))" />
<input asp-for="Nickname" />

Using any custom condition here, just make it return true or false. readonly="@(!string.IsNullOrEmpty(Model.Name))"

0

Try this:

<label class="form-control">@Model.Name</label>
0

This worked for me:

<input asp-for="Name" class="form-control" readonly="readonly" />

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.