MVC Loading a list within a model

Question

I have a situation that I cannot find an answer for.

I have a model, say for a tour guide, that contains the name, address and other details about the guide.

With that model, there is a list of visitors that will accompany the guide.
The user completes the guide datafields then I display a page with the fields for adding the visitors.

At this point I have not posted anything yet, the data is still in the DIV for the guide.
How do I dynamically populate this list within the model, then post the entire model to the controller?

I've looked at the jQuery 'load' and 'post' and 'get' stuff, as well as the partial view methods and I'm still lost as to how to do this simple thing.

I have the page or Guide.cshtml like this, for example:

 @model TourModel
 <div id="guide">
    <table>
    <tr>
    <td>Full Name</td>
    <td>@html.TextBoxFor(m => m.FullName)</td>
       // address for guide
 <input type="button" id="Next" value="Next" onclick="AddVisitors()"        
 </div>
 <div id="visitors" style="display:none">
    <table>
    <tr>
    <td>Full Name</td>
    <td>@html.TextBoxFor(m => m.visitors.FullName)</td>
         //details for each visitor
    </table>
    <table>
    @if (model.visitors.count > 0)
    {
    foreach (var vis in model.visitors)
    {
    <tr>
    <td>@vis.FullName</td>
        //etc for each visitor2
    }
    }

 <script type="javascript">
  function AddVisitors() {
   $("#guide").hide();
   $("#visitors").show();
  }
 </script>

What should the jQuery do, if I should use jQuery, to add the visitor to the List to the model?

Here are my models:

 public class TourModel
 {
  public string guidename;
  public string guideaddress;
  public List<Visitor> visitors;
 }

 public class Visitor
 {
  public string visitorname;
  public string visitoraddress;
 }

Hello Dean. This is a coding project, so, please, you need to provide some code. You need to do some work before asking for vague help. When you do that, then someone will tell you how to post an array, in regards to your code. — Ruby Racer
– Ruby Racer, Commented Sep 4, 2014 at 12:51
@RubyRacer - I've added some code to the view, anything else you need? Or are you just commenting on my lack of code? — Dean.DePue
– Dean.DePue, Commented Sep 4, 2014 at 13:36
@Dean.DePue : "How do I dynamically populate this list within the model, then post the entire model to the controller?" where you want to populate the list? visitors are already filled i guess.can you show something you tried so that i can have the idea of the problem — Shivang MIttal
– Shivang MIttal, Commented Sep 4, 2014 at 14:04
@Shiv - well that's the problem, I haven't tried anything as I don't have any idea how to add items in a list part of a model without posting to the server. As I said, I am not posting anything until the visitor list is done, not even the guide info. Should I use just regular text boxes to add data for the visitors and then fill a javascript array? Then when I post, somehow fill the model with the JS data, which I do not know how to do either? — Dean.DePue
– Dean.DePue, Commented Sep 4, 2014 at 14:16
Since there is no code, all one can tell is the following: Add a form, where the fields to be posted will reside (inputs). Then, have a master fieldset (or a row, depending on your implementation) and create clones of it each time you want to add a new one (jQuery clone() function for instance). And I am not commenting on your luck of code, I'm asking feedback for people to be able to assist. If I am around, I could be the one assisting. But I am not around 24/7, there is a lot of people to assist. — Ruby Racer
– Ruby Racer, Commented Sep 4, 2014 at 14:19

Shivang MIttal · Accepted Answer · 2014-09-05 07:22:30Z

1

Add the text boxes in the table with the same name for each field. suppose you have phone number and company name in details so add the textboxes like this

  <tr><td>
     <input type="text" name="VisiterId" id = "V_1">
    <input type="text" name="PhNumber" id = "ph_1">
    <input type="text" name="CompanyName" id="c_1" >
    </td></tr>
    <tr><td>
      <input type="text" name="VisiterId" id = "V_2">
    <input type="text" name="PhNumber" id = "ph_2">
    <input type="text" name="CompanyName" id="c_1" >
    </td></tr>

In your ajax call serialize the visiter div to send it to ajax with $("#visiter :input").serialize(). If you want to send the whole page then put it inside a div of form. lets say

$.ajax({
        url: "@Url.Action("Save")",
        type: 'POST',
        data: $("#form1 :input").serialize(),
        success : function(){}
       )};

Now to get it in controller, use FormCollection. VisiterId will help you to match the details with the visiters, to whom the value belongs in string array.

public ActionResult Save( FormCollection form, TourModel restOfmodel)
{
  string[] VisiterIds = formColl.GetValues("VisiterId");
  string[] PhoneNumbers = formColl.GetValues("PhNumber");
  string[] CompanyNames = formColl.GetValues("CompanyName");
}

FormCollection will help you to collect the visiters detail and another parameter "restOfmodel" will be binded itself by MVC as per values in page.

edited Sep 5, 2014 at 7:22

answered Sep 5, 2014 at 7:09

Shivang MIttal

1,0011 gold badge17 silver badges38 bronze badges

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

3 Comments

Dean.DePue Over a year ago

thank you, this helps somewhat. However, I do not want to POST as yet after each visitor is added. I want to create a list of visitors in the page without POSTing each one, then when done with adding all the visitors I want, POST the entire model. How do I load the List model in javascript? Or create a new instance of the List with Javascript?

Shivang MIttal Over a year ago

@Dean.DePue : you can serialize the whole page and send it to save action. for the textboxes you have the FormCollection. for the model add another parameter in action. put your page inside a form or a div. say "form1" . i am editing my answer for that. If the answer helps, please dont forget to upvote.

Shivang MIttal Over a year ago

@Dean.DePue : you are not posting it for a singel row. add the ajax call to the finally save button. it will post all of your content to action

Dean.DePue · Accepted Answer · 2014-09-06 17:12:46Z

0

After looking around at many different situations for MVC, I was able to get this thing to work with jQuery. Simply put, I recreated each model in the cshtml file:

  function TourGuideModel ()  {
    var self = this;
    ...all the attributes of the model
   }

Oncw this model was loaded through the elements on the page, it posted to the controller as normal:

  $.ajax ({
    data: { TourGuideModel }
    ....
  });

 public ActionResult AddVisitor( TourGuideModel model) 
 {
    //model comes in as expected
  }

answered Sep 6, 2014 at 17:12

Dean.DePue

1,0131 gold badge21 silver badges47 bronze badges

Collectives™ on Stack Overflow

MVC Loading a list within a model

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related