Create checkboxlist out of data model and store it back in ASP.NET Core MVC

public class Project
{
    public int Id { get; set; }
    public string Name { get; set; }
    public string Description { get; set; }
}

public class Step
{
    public int Id { get; set; }
    public string Name { get; set; }
}

public class StepDate
{
    public int StepId { get; set; }
    public int ProjectId { get; set; }
    public bool Selected { get; set; }
    public DateTime StartDate { get; set; }
    public DateTime EndDate { get; set; }
}

public class CreateProjectVM
{
    public string Name { get; set; }
    public string Description { get; set; }
    public List<Steps> Steps { get; set; }
    public List<StepDate> StepDates { get; set; }
}

I have the given data model. First, I want to create a page with a checkboxlist for each Step with additional input fields for StartDate and EndDate. Second, on post I want to store the Steps and according Dates that are checked. CRUD-functions for data models are already implemented. I only need the way to communicate between cshtml and cs.

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

Here is a demo with ajax:

Controller:

[HttpGet]
        public IActionResult TestCreateProjectVM()
        {
            //Step[i] is related to StepData[i]
            CreateProjectVM c = new CreateProjectVM { Description = "d", Name = "c" };
            List<StepDate> StepDates = new List<StepDate> { new StepDate { ProjectId = 1, Selected = false, StepId = 11, StartDate = new DateTime(2012, 1, 1), EndDate = new DateTime(2012, 1, 2) }, new StepDate { ProjectId = 1, Selected = false, StepId = 12, StartDate = new DateTime(2012, 2, 1), EndDate = new DateTime(2012, 2, 2) } };
            List<Step> Steps = new List<Step> { new Step { Id = 11, Name = "step1" }, new Step { Id = 12, Name = "step2" } };
            c.StepDates = StepDates;
            c.Steps = Steps;
            return View(c);
        }
        [HttpPost]
        public IActionResult TestCreateProjectVM(CreateProjectVM createProjectVM)
        {
            return Ok();
        }

View:
  Name:<input asp-for="Name" />
    Description:<input asp-for="Description" />
    @for (var i = 0; i < Model.StepDates.Count(); i++)
    {
<div id="@i">
    <div class="checkbox">
        <label asp-for="@Model.StepDates[i].Selected">
            <input asp-for="@Model.StepDates[i].Selected" />
        </label>
    </div>


    <label asp-for="@Model.Steps[i].Name"></label>
    <input asp-for="@Model.StepDates[i].StartDate" />
    <input asp-for="@Model.StepDates[i].EndDate" />
    <input asp-for="@Model.Steps[i].Id" hidden />
    <input asp-for="@Model.Steps[i].Name" hidden />
    <input asp-for="@Model.StepDates[i].StepId" hidden />
    <input asp-for="@Model.StepDates[i].ProjectId" hidden />

</div>
    }
    <button  onclick="submit()">submit</button>

@section scripts{
    <script>
    function submit() {
        var model = {};
        model.Name = $("#Name").val();
        model.Description = $("#Description").val();
        var StepDates = new Array();
        var Steps = new Array();
        $('input[type=checkbox]:checked').each(function () {
            var stepDate = {};
            stepDate.Selected = true;
            stepDate.StartDate = $('#' + $(this).attr("id").replace("Selected", "StartDate")).val();
            stepDate.EndDate = $('#' + $(this).attr("id").replace("Selected", "EndDate")).val();
            stepDate.StepId = $('#' + $(this).attr("id").replace("Selected", "StepId")).val();
            stepDate.ProjectId = $('#' + $(this).attr("id").replace("Selected", "ProjectId")).val();
            StepDates.push(stepDate);
            var step = {};
            step.Name = $('#' + $(this).attr("id").replace("Selected", "Name").replace("StepDates", "Steps")).val();
            step.Id = $('#' + $(this).attr("id").replace("Selected", "Id").replace("StepDates", "Steps")).val();
            Steps.push(step);
        })
        model.StepDates = StepDates;
        model.Steps = Steps;
        $.ajax({
                type: "POST",
            url: '@Url.Action("TestCreateProjectVM", "Test1")',
            data: model
             }).done(function (data) {

    });
    }
    </script>
    
}

result:
Create checkboxlist out of data model and store it back in ASP.NET Core MVC


All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes
Article Rating
Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x