Send date values to controller from cshtml page - razor

Question

I'm using .NetCore and Entity Framework to design a site.
On the site, I have a cshtml page that displays a table of data like this:
#foreach (var item in Model) {
<tr>
<td>
#Html.DisplayFor(modelItem => item.CharacterId)
</td>
<td>
#Html.DisplayFor(modelItem => item.CharacterDisplayName)
</td>
<td>
#Html.DisplayFor(modelItem => item.TimePathYear)
</td>
<td>
<a asp-action="Edit" asp-route-id="#item.CharacterId">Edit</a> |
</td>
</tr>
}
Where, when the user clicks on the "Edit" link, it will send them to this controller:
public async Task<IActionResult> Edit(int? id) { }
However, I now want to pass in a user-selectable date range so that the controller would look like this:
public async Task<IActionResult> Edit(int? id, DateTime? start, DateTime? end) { }
So I added these two date controls to the cshtml page:
<div class="datePickers">
<div class="startDate">
Start Date
<input id="inputStartDate" type="date" asp-format="{0:yyyy-MM-dd}"/>
</div>
<div class="endDate">
End Date
<input id="inputEndDate" type="date" asp-format="{0:yyyy-MM-dd}"/>
<button formaction="/Characters/Index/">Go</button>
</div>
</div>
But how would I add the date values they select to the asp-action?
Thanks!

Answer 1

Not sure where you put the startDate and startDate , i assume you put the two date select input on top of your table :
<div class="datePickers">
<div class="startDate">
Start Date
<input id="inputStartDate" type="date" asp-format="{0:yyyy-MM-dd}"/>
</div>
<div class="endDate">
End Date
<input id="inputEndDate" type="date" asp-format="{0:yyyy-MM-dd}"/>
<button formaction="/Characters/Index/">Go</button>
</div>
</div>
#foreach (var item in Model) {
<tr>
<td>
#Html.DisplayFor(modelItem => item.CharacterId)
</td>
<td>
#Html.DisplayFor(modelItem => item.CharacterDisplayName)
</td>
<td>
#Html.DisplayFor(modelItem => item.TimePathYear)
</td>
<td>
<a asp-action="Edit" asp-route-id="#item.CharacterId">Edit</a> |
</td>
</tr>
}
Then you can use Jquery to dynamically append the query string by :
#section Scripts{
<script>
$(function () {
$('#inputStartDate').on('change', function () {
var querystring = 'inputStartDate=' + $("#inputStartDate").val() + '&inputEndDate=' + $("#inputEndDate").val();
$("a").each(function () {
var href = $(this).attr('href').split('?')[0];
if (href) {
href += (href.match(/\?/) ? '&' : '?') + querystring;
$(this).attr('href', href);
}
});
});
})
And when user click the edit link , you could get parameters from server side :
public async Task<IActionResult> Edit(int? id, DateTime? inputStartDate, DateTime? inputEndDate)
{
}