ASP.NET MVC/JavaScript Add form element with JS & link element to model

Question

I'm trying to make a page where you'd press a button, 'Add Option', and it'd add another <input asp-for> to the form during runtime, which would then append the newly added <input asp-for>'s value to the Model's IEnumerable<PollOption>.

What's the best way to do it with JavaScript, if it's possible?

Here's what I have:

index.cshtml

<form method="post">
    <div id="optionsContainer" class="col-8 pt-4">
        <div class="form-group row">
            <div class="col-6 text-center text-light">
                Poll Title
            </div>
            <div class="col-6">
                <input asp-for="PollTitle" class="form-control" />
            </div>
        </div>
        <br />
        <div class="form-group row">
            <button id="addNewOptionBtn" class="btn btn-primary">Add New Option</button>
            <div class="col-6 text-center text-light">
                Options:
            </div>
        </div>
    </div>
    <button type="submit" class="btn btn-success form-control">Create Poll</button>
</form>

PollModel

[BsonId]
public ObjectId Id { get; set; }
public int PollId { get; set; }
public string? PollTitle { get; set; }
public IEnumerable<PollOptionModel>? PollOptions { get; set; }
public DateTime? CreatedAt { get; set; }
public bool IsActive { get; set; }

PollOptionModel

[BsonId]
public ObjectId Id { get; set; }
public int OptionId { get; set; }
public string? Option { get; set; }

Any help is appreciated.

Jerdine Sabio · Accepted Answer · 2022-02-20 08:39:05Z

2

Add a div with class name option-container.

<form method="post">
    ...
    <div class="form-group row">
       <button id="addNewOptionBtn" class="btn btn-primary">Add New Option</button>
       <div class="col-6 text-center text-light">
          Options:
          <div class="option-container">
          </div>
       </div>
    </div>
    ...
</form>

Then add this script (jquery is included by default in .net mvc), this will add a click event to your button which will add input fields.

@section scripts {
   <script>
      $(document).ready(function(){

         // click event
         $("#addNewOptionBtn").click(function(e){
            e.preventDefault();

            // this will be used as the index of the Ienumerable
            var count = $(".options").length;

            // new input fields to be inserted
            var newOption = "<input name='PollOptions["+count+"].OptionId' placeholder='Option ID' value='"+count+"' /><input name='PollOptions["+count+"].Option' placeholder='Option' /><br/><br/>";

            // insert the new input fields
            $(newOption).appendTo(".option-container");
         })
      });
   </script>
}

Hit submit in your form, add a break point on your code and check to see if the new poll options are bound to the model.

edited Feb 20, 2022 at 8:39

answered Feb 20, 2022 at 8:03

Jerdine Sabio

6,0052 gold badges14 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

agisa eafafas Over a year ago

Yes, it does bind it to PollOptionsModel in the Model. Thank you for this. Is there way that I can have the OptionId automatically be put in? Like: "...value='PollOptions["+count+"].OptionId'..."

Jerdine Sabio Over a year ago

yes, you can add a value attribute. <input ... value='"+count+"'>. I updated the answer. You can mark this as the correct answer if it helped. Thanks!

agisa eafafas Over a year ago

i've ran into an issue. it doesn't seem to add other options in the DB, only the first one. is there also a way to define the id? i think its because the _id in the DB is the same when i insert.

Jerdine Sabio Over a year ago

@agisaeafafas will you make a new question and include a screenshot while debugging on how many items are in the ienumerable polloptions

agisa eafafas Over a year ago

stackoverflow.com/questions/71193523/…

Collectives™ on Stack Overflow

ASP.NET MVC/JavaScript Add form element with JS & link element to model

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related