jeastham1993 jeastham1993 - 3 months ago 30
ASP.NET (C#) Question

Dynamically Add Views ASP.NET MVC

I've had a look over a couple of the other questions on the site and cant find anything that exactly answers what I'm looking to do. To help I'll give a bit of background.

I've recently started experimenting with ASP.NET and MVC4. As my first real attempt at building something useful I am building a web application that will allow me to record and track my workouts in the gym. I have got the basis of all my models/controllers/views etc. The part I am having trouble with is the actual layout of the page to record workouts. Each Workout is made up of a list of Sets (The sets contain information like Exercise, Weight, No of Repetitions etc.... Now the way I want this to work on the WebApp is for a user to be able to hit a button for adding a set. This will then load a a section below without a page re-load that allows them to enter information about that set. They can hit the same button again to record a second set so on and so forth....

They will then hit a save button and I need to loop through each "Set" that has been added and save the information to a database.

I think it should be possible, just not exactly sure how to achieve it. The way I would do it in a standard Windows Application is using UserControls, I am thinking maybe Partial Views in ASP.NET and MVC?

Any ideas guys?

Any more questions let me know.

Tau Tau
Answer

We did something similar with MVC5, maybe you can figure something out from here.

We used AJAX and PartialViews, at first the page loads we load a table with some initial content, and an Add Option button. When the user hits the button, we increment the current count and add another row to the table via an action which returns a partial view.

<script>
  var currentCount = 1;
  $(document).ready(function () {
    $("#AddOptionButton").click(function () {
      var CountryOptions = {};
      CountryOptions.url = "AddOption";
      CountryOptions.type = "POST";
      CountryOptions.datatype = "text/html";
      CountryOptions.data = JSON.stringify({count: currentCount });
      CountryOptions.contentType = "application/json";
      CountryOptions.success = function (html) {
        $("#attributesList tr:last").after(html);
        currentCount = currentCount + 1;
      };
      $.ajax(CountryOptions);
    });
  });
</script>

<table id="attributesList">
  <tr>
    <th>#</th>
    <th>Name</th>
  </tr>
  <tr>
    <td>1.</td>
    <td><input type="text" name="optionInput[0]" value="Option 1" /></td>                    
  </tr>
</table>

<input type="button" name="AddOptionButton" id="AddOptionButton" value="Add 1 More" />
<input type="submit" value="Submit Form" />

Our partial view will get the current count as input and returns something like below

<tr id="NewRow1">
  <td>2.</td>
  <td><input type="text" name="optionInput[1]" value="New Option Value"/></td>
</tr>

Note that we are getting an array of optionInput when the form is submitted. We can easily save the data by looping through the inputs.