How to create a list in WEB API and consume it as a dropdownlist in MVC?

Viewed 40

I have a form that will take and get data from a WEB API. I want to be able to make a create form page that will include a dropdownlist of countries and store the selected value in my db. Here is what I was able to make so far. My Web API model:

public class Applicant
{
    [Key]
    public int Id { get; set; }
    public string Name { get; set; }
    public string Country { get; set; }
    public string ImageUrl { get; set; }

    [NotMapped]
    public IFormFile Image { get; set; }
    [NotMapped]
    public IList<SelectListItem> Countries { get; set; }
}

My Web API model for my Countries:

public class CountryList
{
    [Key]
    public int Id { get; set; }
    public string CountryName { get; set; }
}

My API controller: (I have another method UploadImage() that uploads the image directly to Azure Storage)

[HttpGet]
    public async Task<ActionResult<IEnumerable<Applicant>>> GetApplicant()
    {
        return await _context.Applicant.ToListAsync();
    }

[HttpGet("{id}")]
    public async Task<ActionResult<Applicant>> GetApplicant(int id)
    {
        var applicant = await _context.Applicant.FindAsync(id);

        if (applicant == null)
        {
            return NotFound();
        }

        return applicant;
    }


[HttpPost]
    public async Task<IActionResult> Create([FromForm] Applicant applicant)
    {
        var imageUrl = await UploadImage(applicant.Image);
        applicant.ImageUrl = imageUrl;

        _context.Applicant.Add(applicant);
        await _context.SaveChangesAsync();

        return Ok();
    }

Consuming the API in the MVC:

public class ApplicantsController : Controller
{
    private readonly IConfiguration _config;
    private readonly string _apiUrl;
    public static HttpClient Client = null;

    public ApplicantsController(IConfiguration config)
    {
        _config = config;
        _apiUrl = _config.GetValue<string>("WebApiUrl");

        if (Client == null)
        {
            Client = new HttpClient();
            Client.Timeout = TimeSpan.FromSeconds(_config.GetValue<int>("WebApiTimeOut"));
            Client.BaseAddress = new Uri(_apiUrl);
        }
    }
    public IActionResult Index()
    {
        IList<Applicant> applicantList = null;

        try
        {
            var responseTask = Client.GetAsync("api/Applicants");
            responseTask.Wait();
            var result = responseTask.Result;
            if (result.IsSuccessStatusCode)
            {
                var readTask = result.Content.ReadAsAsync<IList<Applicant>>();
                readTask.Wait();
                applicantList = readTask.Result;
            }
        }
        catch (Exception)
        {

            return BadRequest("Application Error");
        }

        return View(applicantList);
    }

    // GET: Applicant/Create
    public IActionResult Create()
    {
        return View();
    }

    // POST: Applicant/Create
    // To protect from overposting attacks, enable the specific properties you want to bind to, for 
    // more details, see http://go.microsoft.com/fwlink/?LinkId=317598.
    [HttpPost]
    [ValidateAntiForgeryToken]
    public async Task<IActionResult> Create([FromForm] Applicant applicant) 
    {
        var content = new MultipartFormDataContent();

        content.Add(new StringContent(applicant.Name), "Name");
        content.Add(new StringContent(applicant.Country), "Country");
        content.Add(new StreamContent(applicant.Image.OpenReadStream()), "Image", Path.GetFileName(applicant.Image.FileName));
        var responseTask = Client.PostAsync("api/Applicants", content);
        responseTask.Wait();
        var result = responseTask.Result;
        if (result.IsSuccessStatusCode)
        {
            return RedirectToAction(nameof(Index));
        }

        return View();
    }

}

I have this line of code for my dropdown list:

@Html.DropDownListFor(model => model.Country, Model.Countries, "Select country", new { @class = "form-control" });
0 Answers
Related