Créer un nouveau parent et un enfant sur la même page

De mon application MVC classique a un parent-enfant (maître-détail) les relations.

Je veux avoir une seule page à la fois créer les nouveaux parents et les enfants sur la même page. J'ai ajouté une action renvoie une vue partielle qui et ajoute de l'enfant HTML pour la mère, mais je ne sais pas comment faire pour associer l'enfant nouvellement créé dans l'action pour le parent d'origine (en d'autres mots, comment puis-je ajouter de la nouvelle entité enfant à la collecte de ces entités dans l'entité mère).

Je suppose que quand je soumettre le formulaire de l'action doit obtenir l'entité mère et le nouvellement créé enfants dans sa collection.

Donc à faire les choses à court, ce qui devrait être le code de l'action qui crée de l'enfant de l'entité et la façon dont l'enfant est ajouté à sa collection parent?

J'ai lu beaucoup de posts ici (et sur d'autres sites) et ne pouvait pas trouver un exemple.

L'application utilise MVC 4 et Entity Framework 5.

Exemple de Code (j'ai enlevé une partie du code de la keep it simple).
Le modèle est de la Forme (parent) et FormField (enfant) les entités.

public partial class Form
{ 
    public int ID { get; set; }
    public string Name { get; set; }

    public virtual ICollection<FormField> FormFields { get; set; }
}

public partial class FormField
{
    public int ID { get; set; }
    public string Name { get; set; }
    public int FormID { get; set; }
}

Suivantes vue partielle (_CreateFormField.cshtml) crée de nouvelles FormField (enfant).

@model FormField

@using (Html.BeginForm()) {
@Html.ValidationSummary(true)

<fieldset>
    <legend>FormField</legend>

    <div class="editor-label">
        @Html.LabelFor(model => model.Name)
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.Name)
        @Html.ValidationMessageFor(model => model.Name)
    </div>

    <div class="editor-label">
        @Html.LabelFor(model => model.FormID)
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.FormID)
        @Html.ValidationMessageFor(model => model.FormID)
    </div>


</fieldset>
}

Et la vue suivante (Créer.cshtml) est celui qui le crée la Forme.

@model Form

@using (Html.BeginForm()) {
@Html.ValidationSummary(true)

<fieldset>
    <legend>Form</legend>

    <div class="editor-label">
        @Html.LabelFor(model => model.Name)
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.Name)
        @Html.ValidationMessageFor(model => model.Name)
    </div>

<div>
        @Html.ActionLink(
                "Add Field",
                "CreateFormField", 
                new { id = -1},
                new { @class = "form-field" })
    </div>
    <p>
        <input type="submit" value="Create" />
    </p>
</fieldset>
}

<div>
    @Html.ActionLink("Back to List", "Index")
</div>

<div id="CreateFormField"></div>

@section Scripts {
<script>
    $(function () {
        $('.form-field').on('click', function (e) {

            $.get($(this).prop('href'), function (response) {
                $('#CreateFormField').append(response)
            });

            e.preventDefault();
        });
    });
</script>

@Scripts.Render("~/bundles/jqueryval")

}

Les actions suivantes se charge de la création dans la FormController.

[HttpPost]
public ActionResult Create(Form form)
{
    if (ModelState.IsValid)
    {
        db.Forms.Add(form);
        db.SaveChanges();
        return RedirectToAction("Index");
    }

    return View(form);
}

public ActionResult CreateFormField(string id = null)
{
    //I guess something is missing here.

    return PartialView("_CreateFormField", new FormField());
}

Merci d'avance,

Sharon.

source d'informationauteur Sharon Eden

Je pense que le mieux et de la manière la plus simple pour vous est que vous avez une vue de la création d' Form et au fond de lui mettre un fieldset à attribuer FormFields.

Pour le fieldset, vous devriez avoir deux vues partielles: l'Un pour créer et un autre pour le modifier. La vue partielle de la création doit être quelque chose comme ceci:

@model myPrj.Models.Form_FormFieldInfo

@{ 
    var index = Guid.NewGuid().ToString(); 
    string ln = (string)ViewBag.ListName;
    string hn = ln + ".Index";
}

<tr>
    <td>        
        <input type="hidden" name="@hn" value="@index" />
        @Html.LabelFor(model => model.FormFieldID)
    </td>
    <td>
        @Html.DropDownList(ln + "[" + index + "].FormFieldID", 
            new SelectList(new myPrj.Models.DbContext().FormFields, "ID", "FieldName"))
    </td>        
    <td>
        <input type="button" onclick="$(this).parent().parent().remove();" 
            value="Remove" />
    </td>
</tr>

Par l'appel de cette vue partielle dans la création de lieu vue ajaxly, vous pouvez rendre certains éléments pour chaque balise. Chaque ligne d'éléments contient une étiquette, un DropDownList contenant des balises, et un bouton "supprimer" pour supprimer simplement la création des éléments.

Dans la création de lieu vue, vous avez une table nue, qui contiendra les éléments que vous créez grâce à la vue partielle:

<fieldset>
     <legend>Form and FormFields</legend>
     @Html.ValidationMessageFor(model => model.FormFields)</label>
     <table id="tblFields"></table>                                        
     <input type="button" id="btnAddTag" value="Add new Field"/>
     <img id="imgSpinnerl" src="~/Images/indicator-blue.gif" style="display:none;" />
</fieldset>

et vous avez le script suivant pour créer une gamme d'éléments pour chaque balise:

$(document).ready(function () {
    $("#btnAddField").click(function () {
        $.ajax({
            url: "/Controller/GetFormFieldRow/FormFields",
            type: 'GET', dataType: 'json',
            success: function (data, textStatus, jqXHR) {
                $("#tblFields").append(jqXHR.responseText);
            },
            error: function (jqXHR, textStatus, errorThrown) {
                $("#tblFields").append(jqXHR.responseText);
            },
            beforeSend: function () { $("#imgSpinnerl").show(); },
            complete: function () { $("#imgSpinnerl").hide(); }
        });
    });
});

De la méthode d'action GetFormFieldRow est comme suit:

public PartialViewResult GetFormFieldRow(string id = "")
    {            
        ViewBag.ListName = id;
        return PartialView("_FormFieldPartial");
    }

et votre fait pour le créer... l'ensemble de La solution pour votre question a de nombreux codes pour les vues, les vues partielles, les contrôleurs, les appels ajax et le modèle de liaison. J'ai essayé de vous montrer le chemin car je ne peux vraiment pas à poster tous, dans cette réponse.

Ici est le plein d'infos et de conseils.

Espère que cette réponse sera utile et d'ouvrir la voie pour vous.

1

Vous pouvez utiliser @Html.RenderPartial(_CreateFormField.cshtml) htlper méthode à l'intérieur de votre parent cshtml page.

Pour le mode info, http://msdn.microsoft.com/en-us/library/dd492962(v=vs. 118).aspx

Je suis en fournissant une pseudo-code de l'exemple,
```
@Foreach(childModel in model.FormFields)
{
    @Html.RenderPartial("childView.cshtml","Name", childModel)
}
```
S'il vous plaît essayer, dans un c# syntaxique et vous obtiendrez votre vue partielle sur le rendu de chaque élément de la collection.
0

Le problème, c'est que votre vue partielle doit utiliser:
```
@model Form //Instead of FormField
```
et puis à l'intérieur de la vue partielle, vous devez utiliser le modèle => le modèle.FormField.x
```
<div class="editor-label">
    @Html.LabelFor(model => model.FormField.Name)
</div>
<div class="editor-field">
    @Html.EditorFor(model => model.FormField.Name)
    @Html.ValidationMessageFor(model => model.FormField.Name)
</div>
```
Cela ne fonctionne que pour un-à-un les relations (ou alors j'ai lu dans ce fil: Ici). Il également n'a pas d'importance si vous avez @Html.Se former à l'intérieur de la vue partielle.

Après avoir fait ces modifications, j'ai eu aucun problème à obtenir toutes les données publiées vers le contrôleur.

EDIT: j'ai couru dans des problèmes avec ce que quelqu'un serait bientôt comprendre.

La meilleure façon de le faire (que j'ai vu) c'est la place, utilisez une EditorTemplate. De cette façon, l'éditeur reste indépendant de la Mère, et vous pouvez ajouter un Forme sur n'importe quelle page, et pas seulement une page où vous êtes également l'ajout d'un FormField.

Vous suffira alors de remplacer
```
@Html.Partial("view")
```
avec
```
@Html.EditorFor()
```
En gros, j'ai trouvé qu'il est de loin préférable d'utiliser un @Html.EditorFor au lieu d'une vue partielle lors de l'édition (Il est appelé une vue, pas un éditeur).
0

Si vous souhaitez utiliser la grille de mise en page, vous pouvez essayer de Kendo UI grille

Utilisation jQueryto ajouter FormField sur clic de bouton.

Similaire, je l'ai utilisé comme suit

 <div class="accomp-multi-field-wrapper">
 <table class="table">
    <thead>
        <tr>
            <th>Name</th>
            <th>FormId</th>
            <th>Remove</th>
           </tr>
     </thead>
<tbody class="accomp-multi-fields">
 <tr class="multi-field">
        <td> <input name="FormFields[0].Name" type="text" value=""></td>
        <td> <input name="FormFields[0].FormId" type="text" value=""></td>
        <td> <button type="button" class="remove-field">X</button></td>
     </tr> 

</tbody>
<tr>
    <th><button type="button" class="add-field btn btn-xs btn-primary addclr"><i class="fa fa-plus"></i> Add field</button> </th>
</tr>
</table>
</div>

et jQuery est comme suit pour l'ajout et la suppression de

 <script>
 $('.accomp-multi-field-wrapper').each(function () {
          var $wrapper = $('.accomp-multi-fields', this);
          $(".add-field", $(this)).click(function (e) {
          var $len = $('.multi-field', $wrapper).length;
          $('.multi-field:first-child', $wrapper).clone(false, true).appendTo($wrapper).find('select,input,span').val('').each(function () {
          $(this).attr('name', $(this).attr('name').replace('\[0\]', '\[' + $len + '\]'));
    });

$(document).on("click",'.multi-field .remove-field', function () {
            if ($('.multi-field', $wrapper).length > 1) {
                $(this).closest('tr').remove();
                //
                $('.multi-field', $wrapper).each(function (indx) {
                    $(this).find('input,select,span').each(function () {
                      $(this).attr('name', $(this).attr('name').replace(/\d+/g, indx));

                    })
                })
            }
        });
    </script>

Espère que cela va vous aider.

Vous devez vous connecter pour publier un commentaire.