0

我正在浪费时间(或者我应该说几天?)试图把它放在一起,所以,任何帮助都会非常感激。

问题:我正在构建一个 MVC3 视图和控制器来为代表客户端的类输入数据,该类具有 0 或 N 个电话号码(由 ClientPhone 类表示)。我的问题在于该模型的用户界面(视图)。到目前为止,基于网上的一些研究,我已经为 Client 创建了一个强类型视图。然后,我遍历模型的 Phones 属性,为 Phones 呈现 HTML 表。我正在尝试将该表的 DataTables 表示用于电话数据的所有操作,并且在提交操作(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>();
    }
}
}

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

在视图中,我得到了(到目前为止):

(...)
    $(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 使用场景(例如添加和删除 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”示例。 .

4

1 回答 1

0

试试这个控制器

  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>  
于 2014-08-28T02:22:54.687 回答