hi
The fields name should be:
ProjectWorkLogDetailViewModel[0].Id ProjectWorkLogDetailViewModel[0].ProjectWorkLogId ProjectWorkLogDetailViewModel[1].Id ProjectWorkLogDetailViewModel[1].ProjectWorkLogId
Hello Sir Thank you for Valueable response Above Answer Is Static Logic Not Dynamic i need Dynamicaly rows created using Jquery on click and Submit
Can you share the details? You can set the correct name property for these fields.
public class ProjectWorkLogViewModel
{
public ProjectWorkLogViewModel()
{
ProjectWorkLogDetailViewModel = new List<ProjectWorkLogDetailViewModel>();
}
[Required]
public Guid ProjectId { get; set; }
public string ProjectName { get; set; }
public List<ProjectWorkLogDetailViewModel> ProjectWorkLogDetailViewModel { get; set; }
}
public class ProjectWorkLogDetailViewModel
{
public Guid Id { get; set; }
public Guid ProjectWorkLogId { get; set; }
[Required]
public Guid EmployeeId { get; set; }
public LogType LogType { get; set; }
[Required]
public string IssueNo { get; set; }
[TextArea]
public string IssueSummary { get; set; }
[TextArea]
public string LogSummary { get; set; }
[Required]
public float HoursLogs t; set; }
[Required]
[DataType(DataType.Date)]
public DateTime LogDateTime { get; set; }
}
Create .cshml
@page
@using Training.Localization
@using Training.Web.Pages.Projects
@using Microsoft.Extensions.Localization
@using Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Modal
@model Training.Web.Pages.ProjectWorkLogs.CreateModalModel
@using Training.ProjectWorkLogDetails
@inject IStringLocalizer<TrainingResource> L
@{
Layout = null;
}
<form asp-page="/ProjectWorkLogs/CreateModal">
<abp-modal>
<abp-modal-header title="@L["NewProjectWorkLog"].Value"></abp-modal-header>
<abp-modal-body>
<div class="form-group">
<label asp-for="Input.ProjectId">Project</label>
<select asp-for="Input.ProjectId" class="form-control">
@if (Model.Projects != null)
{
@foreach (var project in Model.Projects)
{
<option value="@project.Id">@project.ProjectName</option>
}
}
</select>
<span asp-validation-for="Input.ProjectId"></span>
</div>
<div class="row">
<abp-button id="AddProjectWorkLogDetails"
text="@L["AddProjectWorkLogDetails"].Value"
icon="plus"
button-type="Primary" />
</div>
<br />
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr>
<th class="text-center">Sr No</th>
<th class="text-center">Assign</th>
<th>Issue No</th>
<th>IssueSummary</th>
<th>Log Type</th>
<th>Log Summary</th>
<th>Spent Time</th>
<th>Log DateTime</th>
<th class="text-center">Action</th>
</tr>
</thead>
<tbody id="tbody">
</tbody>
</table>
</div>
</abp-modal-body>
<abp-modal-footer buttons="@(AbpModalButtons.Cancel | AbpModalButtons.Save)"></abp-modal-footer>
</abp-modal>
</form>
<script>
$(document).ready(function () {
// Denotes total number of rows
var rowIdx = 0;
// jQuery button click event to add a row
$('#AddProjectWorkLogDetails').on('click', function () {
// Adding a row inside the tbody.
$('#tbody').append(
`<tr id="R${++rowIdx}">
<td style="display:none">
<input type="hidden" id="Id"/>
</td>
<td class="row-index text-center">
<p>${rowIdx}</p>
</td>
<td>
<select asp-for="EmployeeId">
@if (Model.Projects != null)
{
@foreach (var project in Model.Projects)
{
<option value="@project.Id">@project.ProjectName</option>
}
}
</select>
</td>
<td>
<input type="text" id="IssueNo" style="width: 150px;" />
</td>
<td>
<input type="text" id="IssueSummary" style="width: 150px;" />
</td>
<td>
<abp-select asp-for="LogType" style="width: 150px;" />
</td>
<td>
<input type="text" id="LogSummary" style="width: 150px;" />
</td>
<td>
<input type="text" id="HoursLogs" style="width: 150px;" />
</td>
<td>
<input type="date" id="LogDateTime" style="width: 150px;" />
</td>
<td class="text-center">
<button class="btn btn-danger remove"
type="button">Remove</button>
</td>
</tr>`);
});
// jQuery button click event to remove a row.
$('#tbody').on('click', '.remove', function () {
// Getting all the rows next to the row
// containing the clicked button
var child = $(this).closest('tr').nextAll();
// Iterating across all the rows
// obtained to change the index
child.each(function () {
// Getting <tr> id.
var id = $(this).attr('id');
// Getting the <p> inside the .row-index class.
var idx = $(this).children('.row-index').children('p');
// Gets the row number from <tr> id.
var dig = parseInt(id.substring(1));
// Modifying row index.
idx.html(`Row ${dig - 1}`);
// Modifying row id.
$(this).attr('id', `R${dig - 1}`);
});
// Removing the current row.
$(this).closest('tr').remove();
// Decreasing total number of rows by 1.
rowIdx--;
});
});
</script>
I want to use API created or existing abp module's api in the web.public project. Please guide how I can achieve to consume the Web project API into Web.Public project.
Check the docs before asking a question: https://docs.abp.io/en/commercial/latest/ Check the samples, to see the basic tasks: https://docs.abp.io/en/commercial/latest/samples/index The exact solution to your question may have been answered before, please use the search on the homepage.
If you're creating a bug/problem report, please include followings: