Pass the Selected Values ​​of the ListBox to Controller in ASP.NET Core

-
Pass the Selected Values ​​of the ListBox to Controller in ASP.NET Core

This blog explains how to send selected values of ListBox to ASP.NET Core Controller. Let's look at this with an example.

The following is the SampleViewModel class. It has two properties, Movies, and SelectedMovies. The property called Movies will bind the list of movies in the ListBox and the selected movie property will send the selected value from the view to the controller.

SampleViewModel.cs
using Microsoft.AspNetCore.Mvc.Rendering;
public class SampleViewModel
{
   public List<SelectListItem> Movies { get; set; }
   public string[] SelectedMovies { get; set; }
}

The following is a controller code. Microsoft.AspNetCore.Mvc.Rendering namespace is included to use SelectListItem.

The list of movies is assigned to the MoviesList variable. That MoviesList is assigned to the Movies property in the SampleViewModel. Finally, SampleViewModel is sent to view.

In the Result action method, the selected list is retrieved from the view and sent to the Result view to display the selected values on the page.

HomeController.cs
using Microsoft.AspNetCore.Mvc.Rendering;      
public IActionResult Index()
{
    List<SelectListItem> MoviesList = new List<SelectListItem>
    {
        new SelectListItem { Value = "1", Text = "Zootopia" },
        new SelectListItem { Value = "2", Text = "Moana" },
        new SelectListItem { Value = "3", Text = "Aladdin"  },
        new SelectListItem { Value = "4", Text = "The Lion King"  },
        new SelectListItem { Value = "5", Text = "Frozen"  }                
    };

    SampleViewModel model = new SampleViewModel()
    {
        Movies = MoviesList
    };
    return View(model);
}

[HttpPost]
public IActionResult Result(SampleViewModel selectedList)
{
    return View(selectedList.SelectedMovies);
}

Below is a view code. Here in the select tag helper size value is assigned as 5. Thus the list box will show 5 results. If the list box has a value of more than 5, a vertical scroll bar will appear and the user can view the values by moving the scroll bar.

Due to the 'multiple' attribute set, this allows multiple values to be selected. So on the webpage, it will provide a Listbox instead of a drop-down list.

Model.Movies property is assigned to the asp-items attribute, that will bind the list of movies to the list box. The SelectedMovies is assigned to asp-for, so it provides the controller with an array of movie IDs when submitting the form.

Index.cshtml
@{
    ViewData["Title"] = "Listbox Tag Helper";
    Layout = null;
}

@model SampleViewModel
<form asp-controller="Home" asp-action="Result" method="post">
    <div>
        <h4>Listbox Tag Helper</h4>
        <select size="5" multiple asp-items="Model.Movies" asp-for="SelectedMovies"></select>
    </div>
    <br />
    <input type="submit" value="submit" />
</form>

The final one is the result view. The selected movie names are received by the integer array and displayed using the for-loop.

Result.cshtml
@{
    ViewData["Title"] = "Listbox Tag Helper";
    Layout = null;
}

@model string[]
    <h4>Listbox Tag Helper</h4>
@{
    if (Model.Length > 0)
    {
        <div>Selected Movies Value</div>

        for (int i = 0; i < Model.Length; i++)
        {
            <div>@Model[i]</div>
        }
    }
}

The image below is the output of the code above.


I hope this article will be helpful to you. Keep coding

Related Article

Pass the Selected Values ​​of the ListBox from View to Controller in ASP.NET Core Using jQuery Ajax

Comments

Post a Comment

Popular posts from this blog

Entity Framework Core (EF) with SQL Server LocalDB

-
Image
This blog is going to illustrate how to implement Entity Framework (EF) Core with SQL Server LocalDB. The Entity Framework Core enables access to data from the database. This allows developers to avoid having to write most of the data access code. And the SQL Server LocalDB works similarly to the SQL SERVER with few features. You can get the LocalDB when you install visual studio or visual studio express. You can find the .mdf and _log.ldf files in the C:/Users/{user} directory. Let see how to create a SQL Server LocalDB and implement Entity Framework Core Step 1: The first step is to add a connection. In the menu -> click Tools and select Connect to Database It will display the Add Connection window. Enter (localdb)\mssqllocaldb in the server name textbox. Then in the Select or enter a database, select master and click ok Now in the server explorer, you can find the master DB containing Tables, Views, Stored
Read more

SignalR with JavaScript in ASP.NET Core MVC

-
Image
This blog is going to explain what is SignalR and how to implement it in ASP.NET Core. SignalR is a real time application framework for ASP.NET Core. Using SignalR you can provide updated information without refreshing the page, for example poll results, game score, chat etc. Let's see how to achieve it in ASP.NET Core MVC. Step 1: First step I added the SignalR client library. To add a SignalR client library, Right click on the project in Solution Explorer and Add -> Client-Side Library. Select the provider as unpkg as shown in the image below. Enter the latest version of SignalR into the library. And selected signalr.js and signalr.min.js files. Finally clicked the install button to install the client library. Step 2: At this step I have created a VoteHub.cs class inside the Hubs folder(create a new folder called Hubs). This class inherits from the Hub class which is a base class of SignalR hub. The SendMessage method will be called by the connected client.
Read more

Localization in ASP.NET Core MVC with Example

-
Image
Using Query Strings for Request Culture and Simplifying Localization with IStringLocalizer Interface Let’s see how to implement Localization in ASP.NET Core MVC. In the first example, I am going to use the IStringLocalizer Interface in the controller to implement Localization. Additionally, when the user passes the desired language through the query string, it will display content in that language. First, let’s configure the settings in the program.cs file. builder.Services.AddLocalization(options => options.ResourcesPath = "Resources");  The AddLocalization method adds the localization service to the service container. I have added the supported cultures here. I have added two cultures: en for English and nl for Dutch. In the RequestCultureProviders , I have included QueryStringRequestCultureProvider() . This allows the system to determine the culture information from the query string. UseRequestLocalization initializes a RequestLocalizationOptions objec
Read more