How to set radio button to be checked by default

Question

I'm implementing asp.net core 3.1. I have three radio buttons in my razor view and with the following code, I want to send the selected radio button value to Index action in controller in order to show its related data. My problem is, I can't set one of those radio buttons to be checked by default.

@model CSD.ChartObjects
 <form method="post">
        @foreach (var year in Model.Years)
        {
            <input type="radio" asp-for="Year" value="@year" />@year<br />
        }
        <input type="submit" asp-action="Index" />
    </form>

Here is my model object that is read in razor

public class ChartObjects
    {
        public List<ChartModel> Percent { get; set; }
        public List<ChartModel> Time { get; set; }
        public List<ChartModel> Avg { get; set; }
        public List<ChartModel> Total { get; set; }


        public string Year { get; set; }
        public string[] Years = new[] { "1398", "1399", "1400" };
    
}

And here is the body of my HomeController:

[HttpGet]
        public IActionResult Index()
        {
            return (BuildIndexModel("1399"));
        }

        [HttpPost]
        public IActionResult Index([FromForm] string currentYear)
        {
            return (BuildIndexModel(currentYear));
        }



        public IActionResult BuildIndexModel(string currentYear)
        {
...
}

Does this answer your question? [Assign an initial value to radio button as checked](https://stackoverflow.com/questions/4711036/assign-an-initial-value-to-radio-button-as-checked) — Progman, Sep 19 '20 at 08:48
Thank you for your reply. I have tried it. When I check any other radio button than the default one, again the former default one is checked by mistake if I use this solution. — MinaMRM, Sep 19 '20 at 08:53
Please [edit] your question to include the generated HTML code you see in your browser (check the developer tools of your browser to see the HTML source code). — Progman, Sep 20 '20 at 09:19

score 2 · Answer 1 · answered Sep 30 '20 at 17:29

2

I think this will work:

@foreach (var year in Model.Years)
{
    var fi = (year == Model.Years[0]) ? true : false ;
    <input type="radio" asp-for="Year" value="@year" checked="@fi" />@year<br />
}

answered Sep 30 '20 at 17:29

Omar AbuRok

157
1
4

Fei Han · Answer 2 · 2020-09-21T05:58:55.170

1

My problem is, I can't set one of those radio buttons to be checked by default.

To set a default checked radio button, you can try following code snippet.

<form method="post">
    @foreach (var year in Model.Years)
    {
        <input type="radio" asp-for="Year" value="@year" checked="@(year == Model.Years.FirstOrDefault() ? "checked" : null)"/>@year<br />
    }
    <input type="submit" asp-action="Index" />
</form>

Update:

my data by default is for 1399

You can pass default year through ViewData, like below.

In controller action

ViewData["defaultyear"] = "1399";

In view page

<input type="radio" asp-for="Year" value="@year" checked="@(year == ViewData["defaultyear"].ToString() ? "checked" : null)"/>@year<br />

edited Sep 21 '20 at 05:58

answered Sep 21 '20 at 02:52

Fei Han

26,415
1
30
41

Thank you for your reply. My data is 1398 then 1399 and then 1400. And by default after running the project, Home view displays the data for 1399. If I use your suggestion, by default the radio button is set on 1398 mean while my data by default is for 1399. Also the order of 1398 then 1399 and then 1400 is important for me. So how can I fix that? – MinaMRM Sep 21 '20 at 05:43
Thank you for your reply. The code you mentioned has an error: NullReferenceException: Object reference not set to an instance of an object. in the line "@year" – MinaMRM Sep 21 '20 at 08:52
Have you set value for ViewData["defaultyear"] in corresponding controller action first? – Fei Han Sep 21 '20 at 09:00

Bryan Enid · Answer 3 · 2020-09-19T08:52:51.620

I don't know how to use asp.net, but In JS, I just simply have to access the attributes of the HTML Input tag so you can then assign the attribute "checked" to true.

I guess is something like this:

HtmlElement Input1 = webBrowser1.Document.GetElementById("ID"); // consider adding an ID
Input1.Attributes.Add("checked", "true");

Check this two links:

How to set radio button to be checked by default

3 Answers3