question

BloomingDeveloper-9086 avatar image
0 Votes"
BloomingDeveloper-9086 asked BloomingDeveloper-9086 commented

Dynamic Generation of form fields in Razor Pages

Hi

I want to generate dynamic input fields as shown below using razor pages.
when i click on the plus button its should add another set of fields with delete button. How to acheive this?
How to design Model class for this?
Any help would be appreciated. Thanks.

142465-image.png


dotnet-aspnet-core-razor
image.png (4.1 KiB)
· 1
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

Hi,

Someone could give an idea?

0 Votes 0 ·
RenaNi-MSFT avatar image
0 Votes"
RenaNi-MSFT answered BloomingDeveloper-9086 commented

Hi @BloomingDeveloper-9086 ,

Here is a simple demo you can follow:

Model:

 public class TestModel
 {
     public string Name { get; set; }
     public int Age { get; set; }
 }

View:

 @page
 @model IndexModel
 <button id="addRow" type="button" class="btn btn-info">Add</button>
 <form method="post">
     <div id="newRow">
         <input type="hidden" id="total" value="0" />
     </div>
     <input type="submit" class="btn btn-primary"  value="Post" />
 </form>
    
 @section Scripts
 {
     <script>
     $("#addRow").click(function ()
     {
         var rowCount = parseInt($("#total").val());
         rowCount++;
         $("#total").val(rowCount);
         var html = '';
         html += '<div id="inputRow">';
         html += '<input type="text" name="[' + (rowCount - 1) + '].Name"  />';
         html += '<input type="number" name="[' + (rowCount - 1) + '].Age"  />';
         //add more inputs here...
         html += '<button id="removeRow" type="button" class="btn btn-danger">Remove</button>';
         html += '</div>';
    
         $('#newRow').append(html);
     });
     $(document).on('click', '#removeRow', function ()
     {
         var rowCount = parseInt($("#total").val());
         rowCount--;
         $("#total").val(rowCount);
         $(this).closest('#inputRow').remove();
     });
     </script>
 }

Backend code:

 public class IndexModel : PageModel
 {

     public IActionResult OnGet()
     {            
         return Page();
     }

     public void OnPost(List<TestModel> model)
     {
         //do your stuff...
     }
 }

Result:
142770-sss.gif




If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Best Regards,
Rena



sss.gif (336.0 KiB)
· 1
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

Hi Rena,

Thanks for the quick response.
I have made two changes in your code like

1)added 'event.preventDefault();' in the #addRow clickfunction,since its submitting the entire form.

2)Instead of '$('#newRow').append(html);' i changed it to '$('#newRow').after(html);', since it was breaking my design.

i havent integrated the backend logic.

1 Vote 1 ·
BloomingDeveloper-9086 avatar image
0 Votes"
BloomingDeveloper-9086 answered BloomingDeveloper-9086 commented

Hi @RenaNi-MSFT ,

i have field which is of type selectlist (dropdownlist). The items are not showing in my dynamically generated selectlist.
how can i render the selectlist item there in dynamically generated field?

Thanks,
Teena

· 1
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

Hi @RenaNi-MSFT ,

I could not use the asp-items in javascript code to populate the values to a select list.
Should i use ajax for this?Any help would be appreciated.

Thanks,
Teena

0 Votes 0 ·