Question

我正在使用asp.net mvc剃刀，并且正在创建一个创建父对象的视图，但是在创建父对象时，我需要创建'n'个子对象。我该怎么做呢？

我要强调的是，我不希望显示对象，我需要一次创建它们，之所以这样说，是因为我在研究中看到了太多误解。

让我确切说明我需要做什么：

我有一个名为'Car'的模型，该模型有一个子元素： ICollection ，当用户插入新的'Car时'他可能有能力在将“汽车”插入数据库之前，先插入“额外”的东西。而且“额外”元素可能包含 N 个元素，因此它不是固定的。

我的模型为例

    [Table("Car")]
    public partial class Car
    {
        [Key]
        public int IdCar { get; set; }

        [Required]
        [StringLength(10)]
        [Display(Name = "Car")]
        public string DsCar { get; set; }

        [System.Diagnostics.CodeAnalysis.SuppressMessage("Microsoft.Usage", "CA2227:CollectionPropertiesShouldBeReadOnly")]
        public virtual ICollection<Extra> Extra{ get; set; }
}

这是我想做的事的示例视图，可能会有所帮助： Insert Page

如果可能的话，我也希望避免页面刷新效果。

Answer 1

经过研究，我发现没有适合我的情况的东西，所以我自己结束了编写一些代码。（我无法进行太多搜索，我相信某个地方必须有更好的答案）

我想让它们可重复使用，所以我在局部视图中创建了它们。

    @Component({
      selector: 'deudas-list',
      templateUrl: '../views/deudas-list.html',
      providers: [ DeudaService ]
    })
    export class DeudasListComponent{
      public titulo: string;
      public  deudas: Deuda[];
      public textFilter:string = ""
      public  userFilter: any = { mes: '' , Annio : '' };

      constructor(
          private _route: ActivatedRoute,
          private _router: Router,
          private _productoService: DeudaService
      ) {
        this.titulo = 'Listado de Pagos:';
      }

       applyNGXFilter(){
           this.userFilter = {
               $or : [ 
                   { 'mes' : this.textFilter} 
               ] , 
               [ 
                   { 'Annio' : this.textFilter } 
               ]
           }
      }

      ngOnInit() {
        this._productoService.getDeudas().subscribe(
          result =>{
              console.log(result['Cuotas'].Cuota);
              this.deudas = result['Cuotas'].Cuota;
          },
          error => {
            console.log(<any>error);
          }
        );
      }
    }

<div class="form-group has-feedback">
  <label for="term" class="sr-only">Search</label>
  <input type="text" name="term" [(ngModel)]="textFilter" (change)="applyNGXFilter()" class="form-control" id="term" placeholder="Buscar por mes...">
  <span class="glyphicon glyphicon-search form-control-feedback"></span>
</div>
<div *ngIf="deudas" class="table-responsive col-lg-12 tablilla">
  <table class="table table-bordered table-striped table-responsive">
    <tbody>
      <tr *ngFor="let deuda of deudas | filterBy: userFilter | paginate: {itemsPerPage:10,currentPage: p}">
        <td>{{deuda.nombre_edificio}}</td>
        <td>{{deuda.numero_dpto}}</td>
        <td>{{deuda.Annio}}</td>
        <td>{{deuda.mes}}</td>
        <td>{{deuda.nombre_tipo_cuota}}</td>
        <td>{{deuda.monto_cuota}}</td>
        <td>{{deuda.nombre_estado_cuota}}</td>
        <td>{{deuda.fecha_pago}}</td>
      </tr>
    </tbody>
  </table>
  <pagination-controls (pageChange)="p = $event" class="paginador"></pagination-controls>
</div>

在我的局部视图中，我创建了一个 AjaxForms ：

<div class="form-group">
    @{
        TempData["ParentToken"] = ViewBag.Token;
        Html.RenderAction("EstoqueOpcional", "Estoques");
    }
</div>

我在每个页面中都有一个页面令牌，因此我可以使用它们创建TempData，而无需用户打开同一视图的多个选项卡。（由于无法将任何内容发送回页面，因此无法使用ViewBag。）

这些是我创建的用于控制显示和内容的脚本。（由于我仍未完善代码，因此大多数类型仍为强类型）

@using (Ajax.BeginForm("EstoqueOpcionalCreate", new AjaxOptions() { OnSuccess = "RegistroAdicionadoOpcional()", OnFailure = "ConectionFailed()", HttpMethod = "Post" })){
    @Html.Hidden("PageToken", (object)TempData["ParentToken"])
<!-- MY FIELDS -->
<input type="submit" value="Atualizar" class="btn btn-save" />
...

在我的控制器中，我创建了那些方法来控制TempData中的值：

<script>
function RegistroAdicionadoOpcional() {
    var newData = $("#dsopcional").val();

    var pass = true;
    $("#tableEstoqueOpcional .CheckData").each(function () {
        if ($(this).html() == newData)
            pass = false;
    });

    if (pass) {
        $("#tableEstoqueOpcional").append("<tr><td class=\"CheckData\">" + newData + "</td>" +
            "<td class=\"grid-cell temp-cell\" style=\"padding: 0px !important;\">" + "<a href=\"#\" onclick=\"return RemoveDataOpcional('" + newData + "');\">Remover</a>" + "</td></tr>");
        $("#dsopcional").val("");
        $("#dsopcional").focus();
    }
    else {
        Message("Error", "Esse valor já foi inserido.");
        $("#dsopcional").focus();
    }
}

function RemoveDataOpcional(value) {

    $.ajax({
        url: "/Estoques/RemoverOpcional",
        data: { opcional: value, PageToken: $("#PageToken").val() },
        cache: false,
        type: "POST",
        timeout: 5000,
        success: function (data) {
            if (data == "True") {
                $("#tableEstoqueOpcional .CheckData").each(function () {
                    if ($(this).html() == value)
                        $(this).parent('tr').remove();
                });
            }
            else
                Message("Error", "Não foi possível remover o valor escolhido, tente atualizar a página.");
        },
        error: function (reponse) {
            Message("Error", "Não foi possível remover o valor selecionado, se o erro persistir tente recarregar a página.");
        }
    });

}

@{
    var regs = "";
    if (TempData["EstoqueOpcional"] != null)
    {
        foreach (var item in (List<Models.EstoqueOpcional>)TempData["EstoqueOpcional"])
        {
            regs += "<tr><td class=\\\"CheckData\\\">" + item.DsOpcional + "</td>" +
                "<td class=\\\"grid-cell temp-cell\\\" style=\\\"padding: 0px !important;\\\">" + "<a href=\\\"#\\\" onclick=\\\"return RemoveDataOpcional('" + item.DsOpcional + "');\\\">Remover</a>" + "</td></tr>";
        }
    }
    TempData["DisplayEstoque"] = regs;
}

$(document).ready(function () {
    var text = "@Html.Raw(HttpUtility.HtmlDecode(TempData["DisplayEstoque"].ToString()))";
    $("#tableEstoqueOpcional").append(text);
});

在我的主模型的更新按钮按钮中，我这样做是

    public ActionResult EstoqueOpcional()
    {
        return PartialView(new EstoqueOpcional());
    }

    [HttpPost]
    public bool EstoqueOpcionalCreate(EstoqueOpcional estoqueOpcional, string PageToken)
    {
        List<EstoqueOpcional> estoqueOpcionals = new List<EstoqueOpcional>();

        if (TempData["EstoqueOpcional" + PageToken] != null)
            estoqueOpcionals.AddRange((List<EstoqueOpcional>)TempData["EstoqueOpcional" + PageToken]);

        if (estoqueOpcionals.Where(x => x.DsOpcional == estoqueOpcional.DsOpcional).Count() == 0)
            estoqueOpcionals.Add(estoqueOpcional);

        TempData["EstoqueOpcional" + PageToken] = estoqueOpcionals;

        return true;
    }

    public bool RemoverOpcional(string opcional, string PageToken)
    {
        try
        {
            if (TempData["EstoqueOpcional" + PageToken] != null)
            {
                List<EstoqueOpcional> estoqueOpcionals = (List<EstoqueOpcional>)TempData["EstoqueOpcional" + PageToken];
                estoqueOpcionals.RemoveAll(x => x.DsOpcional == opcional);
                TempData["EstoqueOpcional" + PageToken] = estoqueOpcionals;
            }

            return true;
        }
        catch
        {
            return false;
        }
    }

它非常熟悉update的create方法。我仍然认为必须有一种更简单的方法来执行此操作，但这对我来说很合适。

Image Result

欢迎任何建议。谢谢。

如何在同一视图上创建n个子对象和父对象？

1 个答案: