How to insert dropdown list items into database table using ASP.Net Core 3.1

Question

Please I need you to help me to solve one kind of problem. I have tried to insert selected dropdown list items into SQL database table but did not work correctly the data are saving but saved only Id instead to save CountryName, StateName, and CityName. I have four tables Country table, State Table, City table, and Stafftbl table. I am using ASP.Net Core with entity framework core.

Country table

CountryId	CountryName
1	America
2	India

State table

StateId	StateName	CountryId
1	California	1

City table

CityId	CityName	StateId
1	Alameda	1

I want insert CountryName, StateName and CityName from selected dropdown list items into Stafftbl table, as shown in the example here. My dropdown lists are working fine.

Stafftbl table

StaffId	StaffName	Phone	Email	CountryName	StateName	CityName
1	Dauda Muhd	+12309	em@gmail.com	America	California	Alameda

Model: CascadingModel

public class CascadingModel
{
    public CascadingModel()
    {
        this.Countries = new List<SelectListItem>();
        this.States = new List<SelectListItem>();
        this.Cities = new List<SelectListItem>();
    }

    public List<SelectListItem> Countries { get; set; }
    public List<SelectListItem> States { get; set; }
    public List<SelectListItem> Cities { get; set; }

    public int CountryId { get; set; }
    public int StateId { get; set; }
    public int CityId { get; set; }

    public int StaffId { get; set; }
    public string StaffName { get; set; }
    public string Phone { get; set; }
    public string Email { get; set; }
    public string CountryName { get; set; }
    public string StateName { get; set; }
    public string CityName { get; set; }
}

Controller: DropdownController

public IActionResult Index()
{
        CascadingModel model = new CascadingModel();

        model.Countries = (from c in this.Context.Countries
                           select new SelectListItem
                           {
                               Value = c.CountryId.ToString(),
                               Text = c.CountryName
                           }).ToList();
        return View(model);
    }

    [HttpPost]
    public JsonResult AjaxMethod(string type, int value)
    {
        CascadingModel model = new CascadingModel();

        switch (type)
        {
            case "ddlCountries":
                model.States = (from customer in _context.States
                                where customer.CountryId == value
                                select new SelectListItem
                                {
                                    Value = customer.StateId.ToString(),
                                    Text = customer.StateName
                                }).ToList();
                break;

            case "ddlStates":
                model.Cities = (from customer in _context.Cities
                                where customer.StateId == value
                                select new SelectListItem
                                {
                                    Value = customer.CityId.ToString(),
                                    Text = customer.CityName
                                }).ToList();
                break;
        }

        return Json(model);
    }

    [HttpPost]
    [ActionName("Index")]
    [ValidateAntiForgeryToken]
    public async Task<IActionResult> Index(CascadingModel cascadingModel)
    {
        var model = new StaffDetailVM()
        {
            StaffId = cascadingModel.StaffId,
            StaffName = cascadingModel.StaffName,
            PhoneNumber = cascadingModel.PhoneNumber,
            Email = cascadingModel.Email,
            CountryName = cascadingModel.CountryName,
            StateName = cascadingModel.StateName,
            CityName = cascadingModel.CityName,
        };

        if (model != null)
        {
            await _context.Stafftbl.AddAsync(model);
            await _context.SaveChangesAsync();
        }

        return View(cascadingModel);
    }

View Index.cshtml:

<form method="post" asp-controller="Dropdown" asp-action="Index" >
<div class="row">
<div class="col-md-4">
        <div asp-validation-summary="ModelOnly" class="text-danger"></div>
        <div class="form-group">
            <label asp-for="StaffId" class="control-label"></label>
            <input asp-for="StaffId" class="form-control" />
            <span asp-validation-for="StaffId" class="text-danger"></span>
        </div>
        <div class="form-group">
            <label asp-for="StaffName" class="control-label"></label>
            <input asp-for="StaffName" class="form-control" />
            <span asp-validation-for="StaffName" class="text-danger"></span>
        </div>
        <div class="form-group">
            <label asp-for="PhoneNumber" class="control-label"></label>
            <input asp-for="PhoneNumber" class="form-control" />
            <span asp-validation-for="PhoneNumber" class="text-danger"></span>
        </div>
        <div class="form-group">
            <label asp-for="Email" class="control-label"></label>
            <input asp-for="Email" class="form-control" />
            <span asp-validation-for="Email" class="text-danger"></span>
        </div>
        <div class="form-group">
            <label asp-for="CountryId" class="control-label"></label>
            <select id="ddlCountries" name="CountryName" asp-for="CountryId" asp-items="Model.Countries" class="form-control">
               <option value="">--Please select--</option>
            </select>
            <span asp-validation-for="CountryId" class="text-danger"></span>
        </div>
         <div class="form-group">
            <label asp-for="StateId" class="control-label"></label>
            <select id="ddlStates" name="StateName" asp-for="StateId" asp-items="Model.States" class="form-control">
               <option value="">--Please select--</option>
             </select>
            <span asp-validation-for="StateId" class="text-danger"></span>
        </div>
        <div class="form-group">
            <label asp-for="CityId" class="control-label"></label>
             <select id="ddlCities" name="CityName" asp-for="CityId" asp-items="Model.Cities" class="form-control">
                  <option value="">--Please select--</option>
              </select>
            <span asp-validation-for="CityId" class="text-danger"></span>
        </div>
        <div class="form-group">
            <button type="submit" asp-action="SaveStaff" formnovalidate class="btn btn-primary">Create</button>
        </div>
        <div class="form-group">
            <button type="submit" asp-action="SaveUpdate" formnovalidate class="btn btn-primary">Update</button>
        </div>
        <div class="form-group">
            <input type="submit" value="Insert" class="btn btn-primary" />
        </div>
 </div>
</div>
</form>

Answer 1

I have tried to insert selected dropdown list items into SQL database table but did not work correctly the data are saving but saved only Id instead to save CountryName, StateName, and CityName.

That is because your dropdownlist's option value is set with XXXId instead of XXXName.

Change your code below:

Countries = (from c in this.Context.Countries
                select new SelectListItem
                {
                    Value = c.CountryName,
                    Text = c.CountryName
                }).ToList(),
model.States = (from customer in _context.States
                        where customer.CountryId == value
                        select new SelectListItem
                        {
                            Value = customer.StateName,
                            Text = customer.StateName
                }).ToList();

model.Cities = (from customer in _context.Cities
                            where customer.StateId == value
                            select new SelectListItem
                        {
                            Value = customer.CityName,
                            Text = customer.CityName
                }).ToList();