Develop Reference

Add object to model list from a form ASP.NET Core Razor View

I hope some can help me with this.
I have a list within a model and I want to add objects to that list using a form in a razor view before I save it to a database
This is the model that I have:
public class ActivityForm
{
public string Name { get; set; }
public string Description { get; set; }
public DateTime StartDate { get; set; }
public DateTime EndDate { get; set; }
public int Points { get; set; }
public List<Award> Awards { get; set; }
}
This is the code for my view:
#model ActivityForm
#{
ViewData["Title"] = "Activity Details";
}
<section class="my-sm-5">
<div class="container">
<div class="section-header d-flex mb-5">
<h1 class="h-02 flex-grow-1">Activity Details</h1>
</div>
<div class="row">
<div class="col-md-7">
<div class="section-header d-flex mb-5">
<h1 class="h-04 flex-grow-1">Form</h1>
</div>
<form id="form" class="row g-3 w-90" asp-action="Create">
<div class="col-md-12">
<label asp-for="Name" class="form-label">#Html.DisplayNameFor(model => model.Name)</label>
<input asp-for="Name" type="text" class="form-control" id="inputEmail4"
placeholder="#Html.DisplayNameFor(model => model.Name)">
<span asp-validation-for="Name" class="invalid-feedback"></span>
</div>
<div class="col-12">
<label asp-for="Description" class="form-label">#Html.DisplayNameFor(model =>
model.Description)</label>
<textarea asp-for="Description" class="form-control" id="exampleFormControlTextarea1" rows="5"
placeholder="#Html.DisplayNameFor(model => model.Description)"></textarea>
<span asp-validation-for="Description" class="invalid-feedback"></span>
</div>
<div class="col-md-4">
<label asp-for="StartDate" class="form-label">#Html.DisplayNameFor(model =>
model.StartDate)</label>
<input asp-for="StartDate" type="date" class="form-control"
placeholder="#Html.DisplayNameFor(model => model.StartDate)">
<span asp-validation-for="StartDate" class="invalid-feedback"></span>
</div>
<div class="col-md-4">
<label asp-for="EndDate" class="form-label">#Html.DisplayNameFor(model => model.EndDate)</label>
<input asp-for="EndDate" type="date" class="form-control"
placeholder="#Html.DisplayNameFor(model => model.EndDate)">
<span asp-validation-for="EndDate" class="invalid-feedback"></span>
</div>
<div class="col-md-4 mb-6">
<label asp-for="Points" class="form-label">#Html.DisplayNameFor(model => model.Points)</label>
<input asp-for="Points" type="number" class="form-control"
placeholder="#Html.DisplayNameFor(model => model.Points)">
<span asp-validation-for="Points" class="invalid-feedback"></span>
</div>
<div class="col-8 d-grid gap-2">
<a class="btn btn-primary mb-2" data-bs-toggle="modal" data-bs-target="#add-award">Add award</a>
<div class="row">
<div class="col-md-6">
<a class="btn btn-outline-primary w-100" data-bs-toggle="modal"
data-bs-target="#cancel-activity">Cancel</a>
</div>
<div class="col-md-6">
<a class="btn btn-outline-primary w-100" data-bs-toggle="modal"
data-bs-target="#post-activity">Post Activity</a>
</div>
</div>
</div>
</form>
</div>
<div class="col-md-5">
<div class="section-header d-flex mb-5">
<h1 class="h-04 flex-grow-1">Awards</h1>
</div>
<table class="table">
<thead>
<tr>
<th scope="col">Award name</th>
<th scope="col">Description</th>
<th scope="col"></th>
</tr>
</thead>
<tbody>
#for (int i = 0; i < 1; i++)
{
<tr>
<td>Award Name</td>
<td>Award Description</td>
<td>
<a class="btn btn-outline-primary btn-sm">Edit</a>
<a class="btn btn-outline-primary btn-sm">Remove</a>
</td>
</tr>
}
</tbody>
</table>
</div>
</div>
</div>
</section>
<div class="modal" id="add-award" tabindex="-1">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content br-20 pd-20">
<div class="modal-header justify-content-center">
<h5 class="modal-title h-04 text-prim-color">Award details</h5>
</div>
<form class="row g-3">
<div class="modal-body">
<div class="row g-3">
<div class="col-md-12">
<label asp-for="Award.Name" class="form-label">Name</label>
<input asp-for="Award.Name" type="text" class="form-control" id="inputEmail4">
</div>
<div class="col-12">
<label asp-for="Award.Description" for="inputAddress" class="form-label">Description</label>
<textarea asp-for="Award.Description" class="form-control" id="exampleFormControlTextarea1" rows="5"></textarea>
</div>
</div>
</div>
<div class="modal-footer justify-content-center">
<button type="button" class="btn btn-outline-primary w-100" data-bs-dismiss="modal">Close</button>
<input class="btn btn-primary w-100" type="submit" value="Confirm"></input>
</div>
</form>
</div>
</div>
</div>
My form is within a modal and when I click the submit button I want to create an Award object with the values from the form. After the object is created I want to add it to the Awards List and have the changes reflect on the view.
This is what the View looks like:
View with modal
And this is how it will look like after the object has been added:
View after object is added

You should first fix some issues:
Right now your form does not have a binding for the ActivityForm.Awards property. You should change:
<tbody>
#for (int i = 0; i < 1; i++)
{
<tr>
<td>Award Name</td>
<td>Award Description</td>
<td>
<a class="btn btn-outline-primary btn-sm">Edit</a>
<a class="btn btn-outline-primary btn-sm">Remove</a>
</td>
</tr>
}
</tbody>
To:
<tbody>
#for (var i = 0; i < Model.Awards.Count; i++)
{
<input type="hidden" asp-for="#Model.Awards[i].Name" />
<input type="hidden" asp-for="#Model.Awards[i].Description" />
<tr>
<td>#Model.Awards[i].Name</td>
<td>#Model.Awards[i].Description</td>
<td>
<a class="btn btn-outline-primary btn-sm">Edit</a>
<a class="btn btn-outline-primary btn-sm">Remove</a>
</td>
</tr>
}
</tbody>
Documentation for binding model to a collection: https://learn.microsoft.com/en-us/aspnet/core/mvc/models/model-binding?view=aspnetcore-6.0#collections-1
Your form should wrap around both Form and Awards sections:
<form id="form" class="row g-3 w-90" asp-action="Create">
<div class="col-md-7">
<div class="section-header d-flex mb-5">
<h1 class="h-04 flex-grow-1">Form</h1>
</div>
...
</div>
<div class="col-md-5">
<div class="section-header d-flex mb-5">
<h1 class="h-04 flex-grow-1">Awards</h1>
</div>
...
</div>
</form>
You should also change:
<a class="btn btn-outline-primary w-100" data-bs-toggle="modal" data-bs-target="#post-activity">Post Activity</a>
to an actual submit button:
<button type="submit" class="btn btn-outline-primary w-100">Post Activity</button>
Now if you manually add some awards to the Awards list from your Controller,
return View(new ActivityForm
{
Awards = new List<Award>
{
new Award { Name = "Name", Description = "Descr" },
new Award { Name = "Award 2", Description = "Descr 2" }
}
});
the awards will be displayed properly and also when you submit the form the ActivityForm.Awards list will be populated with the awards you added manually.
These issues need to be fixed before you go on and implement the add award form inside the modal.

pass id in foreach to modal

i am trying to pass #item.PhanHoi.ID to modal but it #item.PhanHoi.ID only stops at first number of loop, is there any way to pass id to modal? Thanks
<tbody>
#foreach (var item in ViewBag.DsPhanHoi)
{
<tr class="sacss">
<td></td>
<td>#item.PhanHoi.Ten</td>
<td>#item.PhanHoi.NoiDung</td>
<td>#item.PhanHoi.TGphanhoi</td>
<td>#item.PhanHoi.SDT</td>
<td>#item.PhanHoi.Email</td>
<td>#item.PhanHoi.DiaChi</td>
<td class="datatable-ct">
<div class="button-ap-list responsive-btn">
<div class="btn-group btn-custom-groups" style="margin-left:26%">
<a class="btn btn-primary" href="#Url.Action("XemPH", new { id = item.PhanHoi.ID })"><i style="font-size:15px" class="fa fa-info-circle" aria-hidden="true"></i></a>
<a class="btn btn-danger" data-toggle="modal" data-target="#DangerModalalert" data-item="#item.PhanHoi.ID"><i style="font-size:15px" class="fa fa-trash" aria-hidden="true"></i></a>
<div id="DangerModalalert" class="modal modal-edu-general FullColor-popup-DangerModal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-close-area modal-close-df">
<a class="close" data-dismiss="modal" href="#"><i class="fa fa-close"></i></a>
</div>
<div class="modal-body">
<span class="educate-icon educate-danger modal-check-pro information-icon-pro"></span>
<h2>Cẩn thận!</h2>
<p>Việc này sẽ xóa phản hồi này vĩnh viễn!!!</p>
</div>
<div class="modal-footer danger-md">
<a data-dismiss="modal" href="#">Hủy bỏ</a>
<a style="background-color:red" href="#Url.Action("XacNhanXoaPH", new {id = #item.PhanHoi.ID })">Xóa!!</a>
</div>
</div>
</div>
</div>
</div>
</div>
</td>
</tr>
}
</tbody>

The id of modal is not unique,you can try to make it unique,so that it will not always call the first modal.You can use the following code:
<tbody>
#{ var count = 0;}
#foreach (var item in ViewBag.DsPhanHoi)
{
<tr class="sacss">
<td></td>
<td>#item.PhanHoi.Ten</td>
<td>#item.PhanHoi.NoiDung</td>
<td>#item.PhanHoi.TGphanhoi</td>
<td>#item.PhanHoi.SDT</td>
<td>#item.PhanHoi.Email</td>
<td>#item.PhanHoi.DiaChi</td>
<td class="datatable-ct">
<div class="button-ap-list responsive-btn">
<div class="btn-group btn-custom-groups" style="margin-left:26%">
<a class="btn btn-primary" href="#Url.Action("XemPH", new { id = item.PhanHoi.ID })"><i style="font-size:15px" class="fa fa-info-circle" aria-hidden="true"></i></a>
<a class="btn btn-danger" data-toggle="modal" data-target="#DangerModalalert_#count" data-item="#item.PhanHoi.ID"><i style="font-size:15px" class="fa fa-trash" aria-hidden="true"></i></a>
<div id="DangerModalalert_#count" class="modal modal-edu-general FullColor-popup-DangerModal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-close-area modal-close-df">
<a class="close" data-dismiss="modal" href="#"><i class="fa fa-close"></i></a>
</div>
<div class="modal-body">
<span class="educate-icon educate-danger modal-check-pro information-icon-pro"></span>
<h2>Cẩn thận!</h2>
<p>Việc này sẽ xóa phản hồi này vĩnh viễn!!!</p>
</div>
<div class="modal-footer danger-md">
<a data-dismiss="modal" href="#">Hủy bỏ</a>
<a style="background-color:red" href="#Url.Action("XacNhanXoaPH", new {id = #item.PhanHoi.ID })">Xóa!!</a>
</div>
</div>
</div>
</div>
</div>
</div>
</td>
</tr>
count++;
}
</tbody>

Pass an id value from the model into a modal form using data-url="#Url.Action"

I have a form that displays a persons title and name.It shows a lot more than that, but this is the bit I am asking about.
I have a person table.
If the user wants to change the person details, is it possible to open up a pop up modal form that lists all the persons in the person table, so that the user can either select an existing person, or insert a new person and when the user closes the pop up, the main form is populated with the selected/new persons details?
I am using ASP.NET Core MVC 5 and EF Core 5.
Any help or pointing to a tutorial would be a great help, thanks.
UPDATE -
I have tried the following -
I have created a modal partial view -
#model Person
<div class="modal fade" id="personModal" >
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="personModalLabel">Persons</h4>
<button type="button" class="close" data-dismiss="modal">
<span>x</span>
</button>
</div>
<div class="modal-body">
<form action="Create">
<table class="table table-bordered table-striped table-hover">
<tbody>
#foreach (var pers in ViewBag.PersonList)
{
<tr>
<td style="display:none">#pers.Id</td>
<td class="text-left">
<a asp-action="details" asp-controller="admin" asp-route-id="#pers.Id" title="Click to select vaccination centre">#pers.Title.Description</a><br />
</td>
<td class="text-left ">
#pers.Forename
</td>
<td class="text-left ">
#pers.Surname
</td>
</tr>
}
</tbody>
</table>
<br />
<div class="form-row">
<label asp-for="TitleId" class="control-label col-md-2">Title</label>
<div class="col-md-4 mb-2">
<select asp-for="TitleId" asp-items="#(new SelectList(ViewBag.TitleList, "Id", "Description"))" style=" width: 363px; height: 37px"></select>
<span asp-validation-for="TitleId" class="text-danger"></span>
</div>
</div>
<div class="form-row">
<label asp-for="Forename" class="control-label col-md-2">Forename</label>
<div class="col-md-4 mb-2">
<input asp-for="Forename" class="form-control" maxlength="100" />
<span asp-validation-for="Forename" class="text-danger"></span>
</div>
</div>
<div class="form-row">
<label asp-for="Surname" class="control-label col-md-2">Surname</label>
<div class="col-md-4 mb-2">
<input asp-for="Surname" class="form-control" maxlength="100" />
<span asp-validation-for="Forename" class="text-danger"></span>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" data-save="modal">Save</button>
</div>
</div>
</div>
</div>
I have added the following script to site.js -
$(function () {
var placeHolderElement = $('#PlaceHolderHere');
$('button[data-toggle="ajax-modal"]').click(function (event) {
var url = $(this).data('url');
$.get(url).done(function(data) {
placeHolderElement.html(data);
placeHolderElement.find('.modal').modal('show');
})
})
placeHolderElement.on('Click', '[data-save="modal"]', function (event) {
var form = $(this).parents('.modal').find('form');
var actionUrl = form.attr('action');
var sendData = form.serialize();
$.post(actionUrl, sendData).done(function (data) {
placeHolderElement.find('.modal').modal('hide');
})
})
})
And the controller -
[HttpGet]
public IActionResult Create()
{
List<Person> personList = _personRepository.Persons.ToList();
ViewBag.PersonList = personList;
List<Title> titleList = _titleRepository.Titles.ToList();
ViewBag.TitleList = titleList;
Person pers = new Person();
return PartialView("_PersonModalPartial", pers);
}
[HttpPost]
public IActionResult Create(Person pers)
{
_personRepository.CreatePerson(pers);
List<Person> personList = _personRepository.Persons.ToList();
ViewBag.PersonList = personList;
List<Title> titleList = _titleRepository.Titles.ToList();
ViewBag.TitleList = titleList;
return PartialView("_PersonModalPartial", pers);
}
I call the modal with the the following in my main form -
<button type="button" class="btn btn-primary" data-toggle="ajax-modal" data-target="#personModal"
data-url="#Url.Action("Create")" >Insert</button>
The above code shows the modal and populates the table.
However nothing happens when you press save!?
UPDATE 2 -
I changed the button in the modal for to
input type="submit" value="Submit" name="Submit" class="btn btn-success float-right" id="SubmitForm" />
And then changed the form tag in my modal form to -
<form method="post" asp-controller="Admin" asp-action="Create">
That worked.
Now I am wondering how you can pass the id value of the model into the Modal form using the data-url part of the calling button?
<button type="button" class="btn btn-primary" data-toggle="ajax-modal" data-target="#personModal"
data-url="#Url.Action("Create")" >Insert</button>

You can use #Url.Action("Create",new { id=xxx}),here is a demo:
Html(I use "sss" as a sample data of id):
<button type="button" class="btn btn-primary" data-toggle="ajax-modal" data-target="#personModal"
data-url="#Url.Action("Create1",new { id="sss"})">
Insert
</button>
js:
$('button[data-toggle="ajax-modal"]').click(function (event) {
var url = $(this).data('url');
$.get(url).done(function (data) {
placeHolderElement.html(data);
placeHolderElement.find('.modal').modal('show');
})
})
Controller:
public IActionResult Create1(string id) {
return Ok();
}
result:
Update:
If you want to use #Model.Id:
<button type="button" class="btn btn-primary" data-toggle="ajax-modal" data-target="#personModal"
data-url="#Url.Action("Create1",new { id=Model.Id})">
Insert
</button>

Singular ID request returning an array of all Id's in .netcore MVC

In my loop I'm creating a table from the model with a loop but when I use my delete function it returns back an array of all ID's instead of the singular clicked.
<tbody id="itemTable">
#foreach (var item in Model.tableItems)
{
<tr>
<td id="idRow">#item.ID</td>
<td>#item.MemberName</td>
<td>#item.Details</td>
<td>#item.StatusDesc</td>
<td class="justify-content-center">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#notesModal-#item.ID">
<i class="fas fa-plus fa-2x"></i>
</button>
<button type="button" class="btn btn-danger" id="showDeleteModalBtn" data-toggle="modal" data-target="#deleteModal-#item.ID" data-show="true">
<i class="fas fa-trash-alt fa-2x "></i>
</button>
<!---------------------- DELETE MODAL------------------------------------------>
<div class="modal fade" id="deleteModal-#item.ID" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title" id="titleLabel">Are you Sure?</h3>
<button type="button" class="close" data-dismiss="modal">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div>#item.ID</div>
where I am assigning the ID
<input type="hidden" name="ID" id="itemID-#item.ID" value="#item.ID" asp-for="ID" />
<label class="form-text text-muted">Delete for #item.MemberName ?</label>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-light" data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-danger">Delete<i class="fas fa-trash-alt ml-2"></i></button>
</div>
</div>
</div>
</div>
}
And here is what its returning.

Maybe because your modal is inside the for loop?

Answer: My Form was submitting all I had to re arrange the form to submit only the model in the loop instead of capturing all.
<tbody id="dissatTable">
#foreach (DissatisfactionTableModel item in Model.tableItems)
{
<tr>
<td>#item.ID</td>
<td>#item.MemberName</td>
<td>#item.Details</td>
<td>#item.StatusDesc</td>
<td class="justify-content-center">
<form action="/Dissatisfactions/DeleteDissat" method="post">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#notesModal">
<i class="fas fa-plus fa-2x"></i>
</button>
<button type="button" class="btn btn-danger" id="showDeleteModalBtn" data-toggle="modal" data-target="#deleteModal-#item.ID" data-show="true">
<i class="fas fa-trash-alt fa-2x "></i>
</button>
<!---------------------- DELETE MODAL------------------------------------------>
<div class="modal fade" id="deleteModal-#item.ID" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title" id="titleLabel">Are you Sure?</h3>
<button type="button" class="close" data-dismiss="modal">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<input id="dissatID" type="text" name="ID" value="#item.ID" asp-for="ID" />
<label class="form-text text-muted">Delete Dissat for #item.MemberName ?</label>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-light" data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-danger" onclick="">Delete<i class="fas fa-trash-alt ml-2"></i></button>
</div>
</div>
</div>
</div>
</form>
</td>
</tr>
}
</tbody>

Bootstrap Modal Pop Up bind controls - Dropdownlist

I have an HTML table which loads data from the database. When I click on a row a modal pop fetches more content from the database with an option to edit a change on the selected row.
My predicament is how do I populate a drop-down list and select a value saved in the database?
It is easy to bind other controls i.e. Textarea, input boxes etc. My issue is with dropdown lists.
FYI I'm using ASP.NET Web Forms with C# and I fetch the data from the database using jQuery AJAX and a WebService.
Thanx in advance.
I have mixed the presentation with the logic.
I have updated the question here is the js:
$("body").delegate("a.view-link", "click", function (e) {
e.preventDefault();
var requestID = $(this).data("reqid");
$.ajax({
type: "POST",
url: "../helpdeskservice.asmx/GetModalContent",
data: "{'requestID':'" + requestID + "'}",
contentType: "application/json;
charset=utf-8",
dataType: "json",
success: function (response) {
$('#modalEditCall').html(response.d); //Bind
$('#requestConfirmed').modal('toggle') } });
$('#modalEditCall').modal('toggle')
});
The WebService Method
[WebMethod]
public string GetModalContent(string requestID)
{
try
{
return ViewExtensions.GetCallModal(requestID);
}
catch (Exception ex)
{
throw ex;
}
}
The C# Class I use to build the html
public static string GetCallModal(string requestID)
{
var usrRequestObject = new DBHelpDesk();
var categories = usrRequestObject.GetCategories();
var modalddlCategories = new StringBuilder(String.Empty);
modalddlCategories.Append(#"<select class='custom-select w-100' id='modalddlCategory' required>");
foreach (var category in categories)
{
modalddlCategories.AppendFormat(#"<option value='{0}'>{1}</option>",category.CategoryID,category.Description);
}
modalddlCategories.Append("</select>");
var sb = new StringBuilder(String.Empty);
var userRequest = DBHelpDesk.GetCallByID(requestID);
sb.AppendFormat(#"
<div class='modal-dialog' role='document'>
<div class='modal-content'>
<div class='modal-header'>
<h5 class='modal-title'>{0}</h5>
<button type='button' class='close' data-dismiss='modal' aria-label='Close'>
<span aria-hidden='true'>×</span>
</button>
</div>
<div class='modal-body'>
<div class='row'>
<div class='col-md-6 mb-3'>
<label for='txtDescription'>Description</label>
<input type='text' class='form-control' id='txtmodalDescription' placeholder='' value='' required>
<div class='invalid-feedback'>
Valid first name is required.
</div>
</div>
</div>
<div class='row'>
<div class='col-md-6 mb-3'>
<label for='state'>Category</label>
{1}
<div class='invalid-feedback'>
Please provide a valid state.
</div>
</div>
<div class='col-md-6 mb-3'>
<label for='state'>Sub-Category</label>
<select class='custom-select w-100' id='modalddlSubCategory' required>
</select>
<div class='invalid-feedback'>
Please provide a valid state.
</div>
</div>
</div>
<div class='row'>
<div class='col-md-6 mb-3'>
<label for='state'>Status</label>
<select class='custom-select w-100' id='modalddlStatus' required>
<option value='0'>Open</option>
<option value='1'>In-Progress</option>
<option value='2'>Awaiting Reply</option>
<option value='3'>Closed</option>
</select>
<div class='invalid-feedback'>
Please provide a valid state.
</div>
</div>
<div class='col-md-6 mb-3'>
<label for='state'>Request Mode</label>
<select class='custom-select w-100' id='modalddlRequest' required>
<option value='0'>Low</option>
<option value='1'>Medium</option>
<option value='2'>High</option>
<option value='3'>Critical</option>
</select>
<div class='invalid-feedback'>
Please provide a valid state.
</div>
</div>
</div>
<div class='row'>
<div class='col-md-12 mb-3'>
<label for='cc-name'>Comments</label>
<textarea id='txtmodalEditor' class='form-control'>{3}</textarea>
</div>
</div>
</div>
<div class='modal-footer'>
<button type='button' class='btn btn-primary'>Update Call</button>
<button type='button' class='btn btn-secondary' data-dismiss='modal'>Close</button>
</div>
</div>
</div>
", DBHelpDesk.GetUserFullName(userRequest.UserID)
, modalddlCategories
, userRequest.Description
, userRequest.Comments);
return sb.ToString();
}
<div>
<div class="row">
<nav class="col-md-2 d-none d-md-block bg-light sidebar">
<div class="sidebar-sticky">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link active" href="#">
<span data-feather="home"></span>
Dashboard <span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="../new/request.aspx">
<span data-feather="file"></span>
New Request
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="shopping-cart"></span>
Products
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="users"></span>
Customers
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="bar-chart-2"></span>
Reports
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="layers"></span>
Integrations
</a>
</li>
</ul>
<h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted">
<span>Reports</span>
<a class="d-flex align-items-center text-muted" href="#">
<span data-feather="plus-circle"></span>
</a>
</h6>
<ul class="nav flex-column mb-2">
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="file-text"></span>
Current month
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="file-text"></span>
Last quarter
</a>
</li>
</ul>
</div>
</nav>
<main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pb-2 mb-3 border-bottom">
<h1 class="h2">Dashboard</h1>
<div class="btn-toolbar mb-2 mb-md-0">
<div class="btn-group mr-2">
<button class="btn btn-sm btn-outline-secondary">Share</button>
<button class="btn btn-sm btn-outline-secondary">Export</button>
</div>
<button class="btn btn-sm btn-outline-secondary dropdown-toggle">
<span data-feather="calendar"></span>
This week
</button>
</div>
</div>
<canvas class="my-4" id="myChart" width="900" height="380"></canvas>
<div class="row">
<div class="col-md-9 mb-3">
<h2>CALL LOG SHEET</h2>
</div>
<div class="col-md-3 mb-3">
<select class="form-control float-right">
<option>Open</option>
<option>Closed</option>
<option>All</option>
</select>
</div>
</div>
<asp:Literal ID="lblContent" runat="server"></asp:Literal>
</main>
</div>
</div>
<div id="modalEditCall" class="modal" tabindex="-1" role="dialog">
<asp:Literal ID="lblModalContent" runat="server"></asp:Literal>
</div>
Here is the dropdown list
enter image description here