Dynamische Tabellenzeile mit Standardzeile Wenn Modell Null

Question

Ich versuche, eine Tabelle zu erstellen, die dynamischen Zeilen füllen kann, auch

Modell-Eigenschaften Ich versuche, einzelnen Standard roh zu füllen, wenn Modell

null ist

public class UsrViewModel 
{ 
    public IEnumerable<User> SysUser { get; set; } 
} 

Public class User 
{    
    public int ID {get; set:} 
    public string user {get; set:} 
    .. 
} 

Controller-Methoden

[HttpGet] 
    public ActionResult Users() 
    { 
     try 
     { 

      IList<Users> listofusers = .. 

      var model = new UsrViewModel 
      { 
       SysUser = listofsensors 
      }; 

      return View(model); 
     } 
     catch (Exception ex) 
     { 
      throw ex; 
     } 
    } 

    [HttpPost] 
    [ValidateAntiForgeryToken] 
    public ActionResult Users(IEnumerable<UsrViewModel> model) 
    { 
     try 
     { 
      ... 

      return View(); 
     } 
     catch (Exception ex) 
     { 
      throw ex; 
     } 
    } 

Seite anzeigen

@model ProjectName.ViewModels.UsrViewModel 
    @{ 
    } 
    <div class="content-page"> 

     <div class="content"> 
      <div class="container"> 
       <div class="row"> 
        <div class="col-xs-12"> 
         @using (Html.BeginCollectionItem("Users", "Sample", FormMethod.Post)) 
         { 
            <table class="table table-striped table-bordered" id="SysUser "> 
             <tr> 
              ... 
             </tr> 

             @if (Model != null) 
             { 
             for (int i = 0; i < Model.SysUser.Count; i++) 
              { 
              <tr> 
               <td> 
                [i] 
               </td> 
               <td> 
               @Html.TextBoxFor(m => m.UsrViewModel[i].user , new { @type = "text", @class = "", @placeholder = "user Name", @required = "" }) 
               @Html.ValidationMessageFor(m => m.UsrViewModel[i].user, "", new { @class = "text-danger" }) 
               </td> 
               .... 

              </tr> 
              } 
             } 

            </table> 

           </div> 
           <div class="col-sm-offset-1 col-sm-11"> 
            <button type="submit" class="btn btn-purple waves-effect waves-light btn-wd-130">Save</button> 
            <button type="submit" class="btn btn-default waves-effect waves-light btn-wd-130">Clear</button> 
           </div>     
         } 
        </div> 
        <!-- end row --> 

       </div> 
      </div> 

     </div> 
    </div> 

Dies füllt jedoch keine einzelne Standardzeile, wenn das Modell null ist, und kann keine neuen Zeilen dynamisch hinzufügen. Was soll ich hier ändern?

Answer 1

Sie verwenden die BeginCollectionItem() Methode falsch. Es muss auf ein einzelnes Objekt angewendet werden. Sein Zweck besteht darin, den HTML-Code so zu ändern, dass Collection-Indexer hinzugefügt werden (basierend auf Guid) und eine versteckte Eingabe für den Indexer hinzuzufügen, mit der Sie den HTML-Code für Objekte in einer Sammlung generieren und dynamisch Elemente hinzufügen und entfernen können die Sammlung.

zunächst eine Teilansicht zu schaffen (sagen wir) _User.cshtml, die für einen Benutzer

@model User 
<tr> 
    @using (Html.BeginCollectionItem("SysUser")) // the parameter is the name of your collection property 
    { 
     <td> 
      @Html.HiddenFor(m => m.ID) 
      @Html.TextBoxFor(m => m.user) 
      @Html.ValidationMessageFor(m => m.user) 
     <td> 
     <td> 
      .... // form controls for other properties of user 
     </td> 
    } 
</tr> 

dann in der Hauptansicht eine Tabellenzeile erzeugt, verwenden Partial() den HTML-Code für jede User in der Sammlung zu erzeugen

@model UsrViewModel 
@using (Html.BeginForm()) 
{ 
    <table> 
     <thead>....</thead> 
     <tbody id="users"> 
      @foreach (var user in Model.SysUser) 
      { 
       @Html.Partial("_User", user) 
      } 
     </tbody> 
    </table> 
    <input type="submit" value="save" /> 
} 

Der einzige Grund für die Verwendung der BeginCollectionItem() ist in der Lage zu sein, Elemente dynamisch aus der Sammlung in der Ansicht hinzuzufügen und/oder zu entfernen. Wenn Sie also eine Schaltfläche "Hinzufügen" haben, würden Sie i ts .click() Ereignis eine Server-Methode aufzurufen, die eine Teilansicht für eine neue User zurückgibt und es auf den Tisch anhängen, zum Beispiel

<button id="add" type="button">Add New User</button> 

var url = '@Url.Action("NewUser")'; 
var users = $('#users'); 
$('#add').click(function() { 
    $.get(url, function (html) { 
     users.append(html); 
    }); 
}); 

, wenn der Controller-Methode

public PartialViewResult NewUser() 
{ 
    return PartialView("_User, new User()); 
} 

ist könnten Sie auch ein umfassen Klicken Sie in jeder Zeile auf die Schaltfläche "Löschen", damit Sie mit ihrem Klickereignis eine Servermethode aufrufen können, die den Benutzer aus der Datenbank löscht, und entfernen Sie die Zeile in der Ajax-Erfolgsrückfrage aus der Tabelle.