How to Create Form with a Dynamic Repeating Partial View in .Net Core

Question

I'm building a .Net Core application. The user interacts with a form that contains some general information. On the form there is a partialview that is dynamic. This section is populated based on the press of a button, and displays the same partial view depending upon how many times the user presses the button. Think of it like this since I can't describe my actual use case. A user is enrolled in school. The form contains general information on the student. There is a button on the form for adding courses. The user clicks the button and the partial view is populated with the ability to add a single course. The user clicks the button and now the partial view has sections for 2 courses, etc. I tried what I saw at this link Dynamically Append View With MVC Partial View. The issue I am having is that I can't prevent the main form's POST action from firing.

Here is my code:

<div class="row">
    <form asp-action="Edit" class="page-content">
        ...FORM CODE HERE...
        
        <button id="Btn_AddEngagement" type="submit" style="height: 36px; width: 36px;">Add Engagement</button>
        <div class="EngagementClass">
           @{
               await Html.RenderPartialAsync("_Engagements.cshtml");
            }

        </div>
    </form>
</div>  

<script>
    $(function() {
        $(document).on('click', '#Btn_AddEngagement', function(e) {
            e.preventDefault;
            $.ajax({
                url: '/Issue/DisplayNewEngagement',
                success: function(partialView) {
                    $('.EngagementClass').append(partialView);

                }
            });
        })
    });
</script>

And in the controller:

public ActionResult DisplayNewEngagement()
{
    return PartialView("_Engagements");
}

When I press the Add Engagement button, the partial view gets appended, BUT then the main form's SUBMIT action gets fired. I tried using e.preventdefault, but that didn't work. How can I add/append partial views and prevent the main form's submit from firing?

How to Create Form with a Dynamic Repeating Partial View in .Net Core

0 Answers0