Wie kann ich ein Modell veröffentlichen, das eine Sammlung enthält?

Question

Lassen Sie ein Modell eine leere Liste enthalten. Ich möchte Elemente zur Liste hinzufügen und alles auf einmal veröffentlichen.

Haupt Modell

[Required] 
public string WillAttend { get; set; } 

/// <summary> 
/// Guests to accompany the RSVPer 
/// </summary> 
public List<Guest> Guests { get; set; } 

Gast Modell

[Required] 
[Display(Name = "First Name")] 
public string FirstName { get; set; } 

[Required] 
[Display(Name = "Last Name")] 
public string LastName { get; set; } 

Im Innern der Form:

<div class="form-group"> 
    <div> 
     Yes @Html.RadioButtonFor(m => m.WillAttend, "yes", new { @class = "" }) 
     No @Html.RadioButtonFor(m => m.WillAttend, "no", new { @class = "" }) 
    </div> 
</div> 
<div class="form-group"> 
    <div> 
     <span>Will you bringing any children or guests?</span> 
     <input id="InputAddGuest" type="button" class="form-control" value="Add Guest or Child" />        
     <ul id="ListGuest"> 

     </ul> 
    </div> 
</div> 

<div class="form-group"> 
    <div> 
     <button type="submit" class="btn btn-block">Finish</button> 
    </div> 
</div> 

Es gibt ein Formular auf der Seite für das Hauptmodell oben einreichen, und ich Verwenden von jquery zum Generieren von HTML:

<script type="text/javascript"> 

    $(document).ready(function() { 
     $('#InputAddGuest').click(function() { 
      $('#ListGuest').append('<li>HELLO WORLD</li>'); 
     }); 
    }); 

</script> 

aber was geht hier rein, so dass wenn ich mein Modell posten tatsächliche Gäste?

Answer 1

Sie müssen das HTML-Markup im Grunde mit Eingabefeldnamen erstellen, die Ihrer Modellhierarchie für Ansichtsmodelle entsprechen.

Da Ihr Hauptansicht Modell eine Gäste-Eigenschaft hat, die eine Sammlung ist, Ihr Name des Eingabefeldes wie Guests[0].FirstNam e sein sollte, Guests[0].LastName, Guests[1].FirstName usw.

sollte

$(document).ready(function() { 
    $('#InputAddGuest').click(function() { 
     var index = $(".guestRow").length; 
     var row = "<div class='guestRow'>"; 
     row += "<input type='text' name='Guests[" + index + "].FirstName' />"; 
     row += "<input type='text' name='Guests[" + index + "].LastName' />"; 
     row += "</div>"; 
     $('#ListGuest').append(row); 
    }); 
}); 

Angenommen, Ihre Diese Arbeit Httppost Aktionsmethode Parameter ist vom Typ MainModel

[HttpPost] 
public ActionResult Register(MainModel model) 
{ 
    //check model.WillAttend 
    // iterate through model.Guests 
    // to do : return something 
} 

Answer 2

Ich habe ähnlichen Fall, bei Feature.

Was ich tue, ist: Ich Sitzung am Controller machen, so dass, wenn

$('#InputAddGuest').click(function() { 

     }); 

Ich nenne .ajax $ wie folgt aus:

var valDdlTeamProject = $('#TeamProjectCollection').val(); 
     var valDdlProject = $('#Project').val(); 
$.ajax({ 
       type: 'POST', 
       dataType: 'json', 
       url: '@Url.Action("AddTfsFeature", "Request")', 
       data: { 
        requestNo: '@Model.RequestNo', 
        teamProjectCollection: valDdlTeamProject, 
        project: valDdlProject 
       }, 
       success: function (response) { 
        if (response.Result == 'Success') { 
         var additionalHtml = ""; 
         var additionalHtml = '<a class="label label-info" href="#">'; 
         additionalHtml += response.TempObject.TeamProjectCollection + ' - ' + response.TempObject.Project; 
         additionalHtml += '<span class="glyphicon glyphicon-remove remove-feature" data-ID="' + response.TempObject.ID + '" onclick="removeFeature(\'' + response.TempObject.ID + '\', this)"></span>'; 
         additionalHtml += '</a>'; 
         $('.body-add-feature').append(additionalHtml); 
         clearTfsFeatureForm(); 
         iCounterFeature = response.TempObjectCount; 
         if (response.TempObjectCount > 0) 
          $('#DialogCreateFeature').modal('hide'); 
        } 
        if (response.Result == 'Failed') { 
         alert(response.Message); 
        } 
       }, 
       error: function (response) { } 
      }) 

An Code hinter:

[HttpPost] 
     public JsonResult AddTfsFeature(string requestNo, string teamProjectCollection, string project) 
     { 
      ResultMessageViewModel result = new ResultMessageViewModel 
      { 
       Result = "Failed", 
       Message = "No data" 
      }; 

      TfsFeature feature = new TfsFeature 
      { 
       ID = sessTempIndexTfsFeature, 
       RequestNo = requestNo, 
       TeamProjectCollection = teamProjectCollection, 
       Project = project, 
       CreatedBy = UserID 
      }; 
      for (int i = 0; i < sessListTfsFeature.Count; i++) 
      { 
       if (sessListTfsFeature.ElementAt(i).TeamProjectCollection == teamProjectCollection && 
        sessListTfsFeature.ElementAt(i).Project == project) 
       { 
        result.Result = "Failed"; 
        result.Message = "Existing feature data has already exist."; 
        return Json(result, JsonRequestBehavior.AllowGet); 
       } 
      } 
      sessListTfsFeature.Add(feature); 

     result.Result = "Success"; 
     result.Message = "Add Success"; 
     result.TempObject = feature; 
     result.TempObjectCount = sessListTfsFeature.Count; 
     return Json(result, JsonRequestBehavior.AllowGet); 

sessListTfsFeature ist List<TfsFeature>

und wenn es eine Schaltfläche gibt, um Gast zu löschen, brauchen Sie einen neuen Ajax und einen neuen Controller, um das Objekt Guest bei der Sitzung zu löschen.