我使用.NetCore和Entity Framework设计一个网站。
在网站上,我有一个显示这样的数据表CSHTML页:
@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>
}
其中,当用户点击“编辑”链接,将它们发送到该控制器:
public async Task<IActionResult> Edit(int? id) { }
不过,我现在想在用户可选择的日期范围内通过,使得该控制器是这样的:
public async Task<IActionResult> Edit(int? id, DateTime? start, DateTime? end) { }
所以我加了这两个日期控件的页面CSHTML:
<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>
但是,我怎么会增加他们选择了ASP-行动的日期值?
谢谢!
不知道你把起始日期且StartDate,我假设你把两个日期选择输入你的桌子上:
<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>
}
然后你可以使用jQuery通过动态追加查询字符串:
@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);
}
});
});
})
而当用户点击编辑链接,你可以得到从服务器端的参数:
public async Task<IActionResult> Edit(int? id, DateTime? inputStartDate, DateTime? inputEndDate)
{
}