Apr 12, 2013, 12:19 PM
Auto-Generated Panels confuse their bodies
So i give some Model to my View in a simple MVC architecture.
as i am dynamically generating panels in response to the data from the model the Panels start confusing the different bodies when displaying
for explanation:
Model.data.customers is a generic list of custom-class with multiple strings dynamically fetched from the database. there can be 0-3 items in customers
data itself also is a customclass filled with other stuff from a db
in the column there should be a minimum of one and a maximum of 5 panels (3 customers, 1 always, 1 privateData)
but this is the actual output:
as i am dynamically generating panels in response to the data from the model the Panels start confusing the different bodies when displaying
for explanation:
Model.data.customers is a generic list of custom-class with multiple strings dynamically fetched from the database. there can be 0-3 items in customers
data itself also is a customclass filled with other stuff from a db
<script runat="server">
public void Page_Load(object sender, EventArgs e)
{
internalData.Title = Model.data.firstname + " " + Model.data.lastname;
for (int i = 0; i < Model.data.customers.Count; i++)
{
addCustomerPanel(i, Model.data.customers[i]);
}
if (Model.data.privateData != null)
{
addPrivateDataPanel();
}
}
private void addCustomerPanel(int number, Intranet_MVC_Prototype.Models.empcustomer item)
{
Ext.Net.Panel add;
//Creating inner html
//add Customers address
string htmlstring = "<table><tbody><tr><td class=\"icon\"><img src=\"\" alt=\"icon\"/></td><td class=\"label\">address:</td><td class=\"value\">";
htmlstring += item.address + "<br>" + item.street + "<br>" + item.postcode + " " + item.city + "</td></tr>";
//adding phone
htmlstring += "<tr><td clasS=\"icon\"><img src=\"\" alt=\"icon\"/></td><td class=\"label\">phone:</td><td class=\"value\">";
htmlstring += item.phone + "</td></tr>";
//adding e-mail
htmlstring += "<tr><td class=\"icon\"><img src=\"\" alt=\"icon\"/></td><td class=\"label\">e-mail:</td><td class=\"value\">";
htmlstring += item.mail + "</td></tr>";
add = @X.Builder.Panel(new Ext.Net.Panel.Config()
{
Title = "Beim Kunden " + item.name,
Html = htmlstring,
});
add.ID = "CustomerPanel" + number;
add.StyleSpec = "width: 70%";
InnerView.Items.Add(add);
InnerView.DoLayout();
}
private void addPrivateDataPanel()
{
Ext.Net.Panel priv;
//create inner html with privateData item, given the case it is not null (as set by model if showPrivate is false)
//add private address
string htmlstring = "<table><tbody><tr><td class=\"icon\"><img src=\"\" alt=\"icon\"/></td><td class=\"label\">address:</td><td class=\"value\">";
htmlstring += Model.data.privateData.street + "<br>" + Model.data.privateData.postcode + " " + Model.data.privateData.city + "</td></tr>";
//add private e-mail
htmlstring += "<tr><td class=\"icon\"><img src=\"\" alt=\"icon\"/></td><td class=\"label\">e-mail:</td><td class=\"value\">";
htmlstring += Model.data.privateData.mail + "</td></tr>";
//add private mobile phone number
htmlstring += "<tr><td clasS=\"icon\"><img src=\"\" alt=\"icon\"/></td><td class=\"label\">mobile:</td><td class=\"value\">";
htmlstring += Model.data.privateData.mobile + "</td></tr>";
//add private home phone
htmlstring += "<tr><td clasS=\"icon\"><img src=\"\" alt=\"icon\"/></td><td class=\"label\">phone:</td><td class=\"value\">";
htmlstring += Model.data.privateData.phone + "</td></tr>";
//add private fax
htmlstring += "<tr><td clasS=\"icon\"><img src=\"\" alt=\"icon\"/></td><td class=\"label\">mobile:</td><td class=\"value\">";
htmlstring += Model.data.privateData.fax + "</td></tr>";
//add skype
htmlstring += "<tr><td clasS=\"icon\"><img src=\"\" alt=\"icon\"/></td><td class=\"label\">mobile:</td><td class=\"value\">";
//htmlstring += Model.data.privateData.skype + "</td></tr></tbody></table>";
htmlstring += "skypeaccount</td></tr></tbody></table>";
priv = @X.Builder.Panel(new Ext.Net.Panel.Config()
{
Title = "private Data - do not pass this on!",
Html = htmlstring,
});
priv.ID = "privateDataPanel";
priv.StyleSpec = "width: 70%;";
InnerView.Items.Add(priv);
InnerView.DoLayout();
}
</script><ext:ResourceManager ID="RM" runat="server" />
<ext:Viewport runat="server" ID="InnerView">
<Items>
<ext:Panel runat="server" ID="sidebar" StyleSpec="width: 30%; float: right;" Height="450"
Header="false">
<Content>
<ext:Panel ID="Panel1" runat="server" Header="false" Height="250">
<Content>
<img src="" alt="Benutzerbild" />
</Content>
</ext:Panel>
<ext:Panel ID="Panel2" runat="server" Header="false" Height="200">
<Content>
<ext:Button ID="Button1" DirectClickAction="VCard" runat="server" Text="download vCard without title" />
<ext:Button ID="Button2" DirectClickAction="VCardWith" runat="server" Text="download vCard with title" />
<ext:Button ID="Button3" runat="server" Text="copy contact data to clipboard" />
<ext:Button ID="Button4" runat="server" DirectClickAction="Calendar" Text="calendar" />
<ext:Button ID="Button5" runat="server" Text="back">
<Listeners>
<Click Handler="history.back();" />
</Listeners>
</ext:Button>
</Content>
</ext:Panel>
</Content>
</ext:Panel>
<ext:Panel runat="server" ID="internalData" StyleSpec="width: 70%;">
<Content>
<h1>NovaTec Internal</h1>
<table>
<tbody>
<tr>
<td class="icon">
<img alt="ico" src="" runat="server" />
</td>
<td class="label">
position:
</td>
<td class="value">
<%: Model.data.position %>
</td>
</tr>
<tr>
<td class="icon">
<img id="Img1" alt="ico" src="" runat="server" />
</td>
<td class="label">
department:
</td>
<td class="value">
<%: Model.data.department %>
</td>
</tr>
</table>
</Content>
</ext:Panel>
</Items>
</ext:Viewport>in the column there should be a minimum of one and a maximum of 5 panels (3 customers, 1 always, 1 privateData)
but this is the actual output:
