Dynamically Add Views ASP.NET MVC

Question

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 aa 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.

Answer 1

You said "without a page re-load". You can do that by using AJAX. It sounds like you have to do much fundamental education to reach your goals. I want to suggest you to work into JavaScript and understand the difference between client-side and server-side in the world of web development. In addition it is important to know the behaviour of HTTP (requests, responses, etc..).

After that, you are able to load content from the server asynchronously using and ajax request. You can do that easily using jQuery. Example here:

$.ajax({
  type: 'post',
  url: '/Controller/Action',
  data: {CustomerName: 'James', AdditionalData: ... },
  dataType: 'JSON',
         success: function() {

           // do anything after request success

         }

});

With JavaScript you are able to create an communication between server and client and manipulate the DOM of the client.

Answer 2

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.