Looking for a solution to fully decouple and reuse a partial view that allows users to select dates and filter results based on those dates. This widget can be used on multiple pages, so I wanted to add event listeners that would submit the form within the date partial view.
In my main view:
@{using (Html.BeginForm("getActivityManagementTwoActivities", "CallCenter", FormMethod.Get, new { id = "ActivityTwoForm" }))
{
<div class="row ">
<div class="col-md-12" style="float:right;">
<div class="dateWrapper">@{ Html.RenderPartial("_DateFilter"); } </div>
</div>
//...
@{ Html.RenderPartial("_ActivityManagementCollapseComponent", Model);
}
My controllers:
public async Task<PartialViewResult> getActivityManagementTwoActivities(DateFilterModel filters, int results = 25)
{
var model = await GetFullAndPartialViewModel(filters, results);
return PartialView("_ActivityManagementCollapseComponent", model);
}
Here is the code for the date partial view:
<div class="date-text-collapsible">
<form method="get">
<table>
<tr>
<td style="text-align:right; vertical-align: top; width: 160px">
Time filter:
</td>
<td style="display:inline-block; width:150px">
<input id="radio1" name="radioToggle" type="radio"> Recent
<select id="timeFilter" name="timeFilter" class="hokage">
<option value="Last 30 days">at least 18</option>
</select>
<br />
<input id="radio2" name="radioToggle" class="radioTimeFilter" type="radio"> Date Range
<div id="dateContent" class="radio-content" style="display:none;">
<input id="txtDateOneFilter" type="text" style="width: 80px;" placeholder="Start Date" name="dateStart" class="hokage" /> to
<input id="txtDateTwoFilter" type="text" style="width: 80px;" placeholder="End Date" name="dateEnd" class="hokage" />
</div>
<br />
</td>
</tr>
</table>
</form>
Attempted to add event listeners like this:
var inputDateBoxes = document.getElementsByClassName("hokage");
addOnChangeListenersToSubmit(inputDateBoxes);
function addOnChangeListenersToSubmit(arrayOfElements) {
for (var i = 0; i < arrayOfElements.length; i++) {
arrayOfElements[i].addEventListener('change', function () {
this.form.submit();
})
}
}
However, this approach only returns the partial view by itself. It seems like I may need to use AJAX or another method. How can I update the partial view from within the date filter partial?