Question

我在浪费时间（或者我应该说几天？）试图将它们放在一起，所以，任何帮助都会非常难以理解。

问题：我正在构建一个MVC3视图和控制器来输入代表客户端的类的数据，该客户端有0或N个电话号码（用类ClientPhone表示）。我的问题在于该模型的用户界面（View）。到目前为止，基于网上的几个reaserches，我为Client创建了一个强类型视图。然后，我遍历模型的Phones属性，为手机呈现HTML表格。我正在尝试使用该表的DataTables表示来处理Phones数据上的所有操作，并且在提交操作（javascript）中，我通过JSon为控制器发送此表（与客户端的数据本身一起）。到目前为止我的问题是在JS中实现每个用户电话数据操作的内容（如输入新手机，删除持久电话，删除新添加的 - 但不是持久的 - 手机，更新持久电话，... 。）是这样的劳动！必须有一个更简单的方法。

有人能指出我在父类的视图中维护某个类的列表的方法吗？

好的，这是代码（或者至少是重要的部分）：

对于类似客户的课程，我得到了这个：

using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.ComponentModel.DataAnnotations.Schema;
using System.Linq;
using System.Web;
using Olimpique.DAL;
using System.Data.Entity;

namespace Olimpique.Entities
{
[Table("OLIM_PROPRIETARIO")]
public class Proprietario
{
    public int? fIDProprietario;
    //---=== ATRIBUTOS ===---
    [Key]
    [Column("PROP_ID_PROPRIETARIO")]
    public int? IDProprietario { get { return this.fIDProprietario; } set { this.fIDProprietario = value; this.LoadLists(); } }

    [ForeignKey("EstadoCivil")]
    [Column("ESCI_ID_ESTADO_CIVIL")]
    public int? IDEstadoCivil { get; set; }
    public virtual EstadoCivil EstadoCivil { get; set; }

    [Column("PROP_TX_NOME")]
    public string Nome { get; set; }

    [Column("PROP_TX_CPF")]
    public string CPF { get; set; }

    [Column("PROP_TX_IDENTIDADE")]
    public string Identidade { get; set; }

    [Column("PROP_TX_ORGAO_IDENT")]
    public string OrgaoIdentidade { get; set; }

    [Column("PROP_DT_EMISSAO_IDENT")]
    public DateTime? EmissaoIdentidade { get; set; }

    [Column("PROP_TX_NACIONALIDADE")]
    public string Nacionalidade { get; set; }

    [Column("PROP_TX_PROFISSAO")]
    public string Profissao { get; set; }

    [Column("PROP_TX_OBS")]
    public string Obs { get; set; }

    public List<EnderecoProprietario> Enderecos { get; set; } 

    public List<TelefoneProprietario> Telefones { get; set; }

    //---=== METODOS ===---
    public void LoadLists()
    {
        OlimpiqueDBContext myDbContext = new OlimpiqueDBContext();

        var ends = (from end in myDbContext.EnderecosProprietarios
                      where end.IDProprietario == this.IDProprietario
                      select end);

        var tels = (from tel in myDbContext.TelefonesProprietarios
                      where tel.IDProprietario == this.IDProprietario
                      select tel);

        this.Enderecos = ends.ToList<EnderecoProprietario>();
        this.Telefones = tels.ToList<TelefoneProprietario>();
    }
}
}

这两个属性是列表，是代表电话和地址的......

在View中，我得到了（到目前为止）：

(...)
    $(document).ready(function () {
        // here i have used datatables.js (jQuery Data Table)
        $('#tblTelefones').dataTable({
            "sDom": 'T<"clear">lfrtip',
            "oTableTools": {
                "aButtons": [],
                "sRowSelect": "single"
            },
            "bLengthChange": false,
            "bFilter": false,
            "bSort": false,
            "bInfo": false,
            "oLanguage": {
                "sZeroRecords": " - - - ",
                "sEmptyTable": "< nenhum telefone armazenado >"
            },
            "aoColumns": [
                    /*ID*/         { "bVisible": false },
                    /*Número*/     null,
                    /*Falar com */ null,
                    /*Obs*/        null,
                    /*Actions*/    null,
                    /*DataStatus*/ { "bVisible": false, "sType": "html" }
            ]
        });
        var oTable = $('#tblTelefones').dataTable();

    });
(...)

这是为包含“TelefoneProprietario”实例的数据的表的DataTable表示的呈现。

以下是一些JS使用cenarios（如添加和删除TelefoneProprietario数据）：

    function AddTel() {
        if ($('#Telefone').val().trim() == '')
        {
            alert('É necessário indicar ao menos o número do telefone a incluir');
            return;
        }
        $('#tblTelefones').dataTable().fnAddData(['', $('#Telefone').val(), $('#FalarCom').val(), $('#ObsTel').val(), '<span onclick="DeleteTel(this.parentNode.parentNode);">X</span>', 'I']);
        $('#Telefone').val("");
        $('#FalarCom').val("");
        $('#ObsTel').val("");
    }

    function DeleteTel(nTr) {
        var oTT = $('#tblTelefones').dataTable();
        var sRow = oTT.fnGetData(nTr);
        if (confirm('Tem certeza que deseja remover o telefone ' + sRow[1] + '?')) {
            if (sRow[0] == '') {
                oTT.fnDeleteRow(nTr);
            } else {
                oTT.fnUpdate('D', nTr, 5);
            }
        }
    }

以下是表格的渲染：

        <div style="width:75%; margin-left:auto; margin-right:auto;">
            <fieldset style="width:100%;">
                <legend>Novo Telefone</legend>
                <table style="width:100%;">
                    <tr>
                        <td style="width:10%;">
                            <span class="editor-label">
                                <label>Telefone:</label>
                            </span>
                        </td>
                        <td style="width:23%;">
                            <span class="editor-field">
                                @Html.TextBox("Telefone")
                            </span>
                        </td>
                        <td style="width:10%;">
                            <span class="editor-label">
                                <label>Falar com:</label>
                            </span>
                        </td>
                        <td style="width:23%;">
                            <span class="editor-field">
                                @Html.TextBox("FalarCom")
                            </span>
                        </td>
                        <td style="width:10%;">
                            <span class="editor-label">
                                <label>Obs:</label>
                            </span>
                        </td>
                        <td style="width:23%;">
                            <span class="editor-field">
                                @Html.TextBox("ObsTel")
                            </span>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="6" style="text-align:center;">
                            <input type="button" value="Adicionar telefone" onclick="AddTel()" />
                        </td>
                    </tr>
                </table>
            </fieldset>
            <table id="tblTelefones" class="TabelaDados" style="width:100%">
                <thead>
                <tr>
                    <th>ID</th>
                    <th>Número</th>
                    <th>Falar com </th>
                    <th>Obs</th>
                    <th>&nbsp;</th>
                    <th>DataStatus(N = None / U - Updated / D - Deleted / I = Inserted)</th>
                </tr>
                </thead>
                <tbody>
                @{
                    foreach (var tel in Model.Telefones)
                    {
                        <tr>
                            <td>@Html.DisplayFor(t => tel.IDTelefoneProprietario)</td>
                            <td>@Html.DisplayFor(t => tel.Numero)</td>
                            <td>@Html.DisplayFor(t => tel.FalarCom)</td>
                            <td>@Html.DisplayFor(t => tel.Obs)</td>
                            <td><span onclick="DeleteTel(this.parentNode.parentNode);">X</span></td>
                            <td>N</td>
                        </tr>
                    }
                }
                </tbody>
            </table>
        </div>

请注意，这不是完全有效（仅供普通用途使用），但仍然没有实现很多情况......

将此表发送回控制器的方法完全基于作者称为“Master Detail CRUD操作”的“http://code.msdn.microsoft.com/Detail-CRUD-Operations-fbe935ef”示例“......

Answer 1

试试这个控制器

  public ActionResult ObtenerDatosGrid(string sidx, string sord, int page, int rows)
        {
            Func<Amigo, IComparable> funcOrden =
                sidx == "Apellidos" ? a => a.Apellidos :
                sidx == "FechaDeNacimiento" ? a => a.FechaDeNacimiento :
                sidx == "Email" ? a => a.Email :
                (Func<Amigo, IComparable>)(a => a.Id);

            // Establecemos si se trata de orden ascendente o descendente, en
            // función del parámetro "sord", que puede valer "asc" o "desc"
            Ordenacion ordenacion = sord == "asc" ? Ordenacion.Ascendente : Ordenacion.Descendente;

            // Usamos el modelo para obtener los datos
            var datos = gestorDeAmigos.ObtenerAmigos(page, rows, funcOrden, ordenacion);
            int totalRegistros = gestorDeAmigos.ContarAmigos();

            int totalPages = (int)Math.Ceiling((decimal)totalRegistros / (decimal)rows);

            // Creamos la estructura
            var data = new
            {
                total = totalPages,
                page = page,
                records = totalRegistros,
                rows = from a in datos
                       select new {
                           id= a.Id,
                           cell= new string[] {
                               a.Apellidos,
                               a.Nombre,
                               a.FechaDeNacimiento.ToShortDateString(),
                               a.Email
                           }
                       }
            };
           // return Json(data);
            return Json(data, JsonRequestBehavior.AllowGet);
        }




<link href="../../Content/Runnable.css" rel="stylesheet" type="text/css" /> 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>   

<script type="text/javascript">
    jQuery(document).ready(function () {



        jQuery("#list").jqGrid({
            url: '<%= Url.Action("ObtenerDatosGrid") %>',
            datatype: 'json',
            mtype: 'GET',
            colNames: ['Apellidos', 'Nombre', 'Fecha Nac.', 'Email'],
            colModel: [
                      { index: 'Apellidos', width: 150, align: 'left' },
                      { index: 'Nombre', width: 150, align: 'left', sortable: false },
                      { index: 'FechaDeNacimiento', width: 80, align: 'center' },
                      { index: "Email", width: 120, align: 'left'}],
            pager: jQuery('#pager'),
            rowNum: 20,
            rowList: [20, 50, 100],
            sortname: 'Apellidos',
            sortorder: 'asc',
            viewrecords: true,
            imgpath: '/content/cupertino/images',
            caption: 'Agenda personal',
            height: 400,
            width: 900,
            onSelectRow: function (id) {
                alert("Pulsado Id: " + id);
            }
        });

    });
</script>

1-N实体创建/编辑视图

1 个答案: