ASP.NET MVC DropDownList via stored procedure without Entity Framework

Question

I am trying to return a dropdownlist to a partial view (modal button for creating a new document record, need to choose a the document type via dropdown) using a stored procedure.

I have tried every way I can find and nothing is working. I tried pulling the stored procedure, then putting the results into a SelectListItem and using Html.DropDownListFor, but that caused all kinds of errors.

Now I am just pulling it into a regular list but getting a null value error on the view. I confirmed that the stored procedure is returning the data - I can get it to populate in a blank view, but once I try to return it in the exact same way to my partial view it breaks.

Here is my model:

public class OrgDocs
{
    public int OrgId { get; set; }
    public int DocId { get; set; }
    public string? DocTypeName { get; set; }
    public string? DocName { get; set; }
    public string? DocPath { get; set; }
    public DateTime CreatedOn { get; set; }

    public IFormFile UploadFile { get; set; }

    public List<OrgDocs> OrgDocList { get; set; }

    public int DocTypeId { get; set; }
}

public class DocTypes
{
    public int DocTypeId { get; set; }
    public string DocTypeName { get; set; }
}

public class DocViews
{
    public OrgDocs OrgDoc { get; set; }
    public DocTypes DocType { get; set; }

    public List<DocTypes> DocTypesList { get; set; }
    public int OrgId { get; set; }
}

Here is my controller:

[HttpGet]
// GET: OrgsViewModels/_AddDoc/5
public IActionResult _AddDoc(DocViews docViews)
{
    List<DocTypes> docTypes = PopulateDocTypes();
    docViews.DocTypesList = docTypes;

    return PartialView(docViews);
}
 
[NonAction]
public List<DocTypes> PopulateDocTypes()
{
    using (SqlConnection sqlConnection = new SqlConnection(_configuration.GetConnectionString("SlingshotContext")))
    {
        DataTable dtbl = new DataTable("DocTypes");
        sqlConnection.Open();

        SqlDataAdapter sqlDa = new SqlDataAdapter("DocTypes", sqlConnection);
        sqlDa.SelectCommand.CommandType = System.Data.CommandType.StoredProcedure;
        sqlDa.Fill(dtbl);

        List<DocTypes> docTypes = new List<DocTypes>();
        docTypes = (from DataRow dr in dtbl.Rows
                    select new DocTypes()
                               {
                                   DocTypeId = Convert.ToInt32(dr["DocTypeId"]),
                                   DocTypeName = dr["DocTypeName"].ToString(),
                               }).ToList();

         return docTypes;
    }
}

And here is my view:

@model Slingshot.Models.DocViews
@{
    ViewData["Title"] = "Add Organization Document";
}

<div class="modal-header">
            <h4 class="modal-title" id="addDocLabel">Add Document</h4>
            <button type="button" class="btn-close" data-bs-dismiss="modal"  aria-label="Close"> </button>
              
        </div>
                     
        <div class="modal-body">
              
  <form enctype="multipart/form-data" asp-action="_AddDoc">
   
        <input type="hidden" asp-for="OrgDoc.OrgId" />
        <div class="form-group">
            <label asp-for="OrgDoc.DocName" class="control-label"></label>
            <input asp-for="OrgDoc.DocName" class="form-control" />
             </div>
     <div class="form-group">
            <select>
            @foreach (var item in Model.DocTypesList)
            {
                <option>
                    @Html.DisplayFor(modelItem => item.DocTypeName)
                </option>
            }

      </select>
 
            
        </div>
         <div class="form-group">
             <input asp-for="OrgDoc.UploadFile" class="custom-file-input" id = "OrgDoc">Choose File</input>
             <label class="custom-file-label" for="OrgDoc" class="form-control"</label>
        </div>
        
        <div class="modal-footer">
            <button type="button" class="btn btn-primary" data-bs-dismiss="modal">Close</button>
            <button type="Submit" value="Submit" class="btn btn-primary">Save</button>

        </div>
        </form>
    </div>

Answer 1

Try using selectlist and dropdownlistfor

Step 1 => Create selectlist object in DocView Class

public class DocViews
{
    public OrgDocs OrgDoc { get; set; }
    public DocTypes DocType { get; set; }

    public SelectList DocTypesList { get; set; }
    public int OrgId { get; set; }
}

Step 2 => Inside your _AddDoc controller action method change list to selectlist

[HttpGet]
// GET: OrgsViewModels/_AddDoc/5
public IActionResult _AddDoc(DocViews docViews)
{
    List<DocTypes> docTypes = PopulateDocTypes();
    docViews.DocTypesList = new SelectList(docTypes, "DocTypeId", "DocTypeName");

    return PartialView(docViews);
}

Step 3 => Inside view use dropdownlistfor

<div class="form-group">
    @Html.DropDownListFor(m => m.DocTypesList, Model.DocTypesList as SelectList, new { @class= "form-control", })       
</div>