Oct 07, 2009, 10:21 AM
Passing values from modal Window to parent
Hi all,
In a ASP.NET MVC (!) application I open a modal Window from a TriggerField. In this dialog I want the user to select a record and return it to the triggerfield. The latter is the question: how do I pass the value from the Window to the ViewPage?
Two scenarios would be acceptable:
- either the entire row is returned from Window to parent (and on parent filter on the column);
- or the field Id is returned to parent;
Considering the sample below, any best practice ideas on how I could achieve this? It's quite trivial using WebForms, but can't really put the finger on it with MVC.
Sample 1/3: TabPanel (ViewPage) that opens a generic dialog through the TriggerField:
In a ASP.NET MVC (!) application I open a modal Window from a TriggerField. In this dialog I want the user to select a record and return it to the triggerfield. The latter is the question: how do I pass the value from the Window to the ViewPage?
Two scenarios would be acceptable:
- either the entire row is returned from Window to parent (and on parent filter on the column);
- or the field Id is returned to parent;
Considering the sample below, any best practice ideas on how I could achieve this? It's quite trivial using WebForms, but can't really put the finger on it with MVC.
Sample 1/3: TabPanel (ViewPage) that opens a generic dialog through the TriggerField:
<asp:Content ID="indexContent" ContentPlaceHolderID="MainContent" runat="server">
<h2><%= Html.Encode(ViewData["Message"]) %></h2>
<ext:ScriptManager ID="ScriptManager1" runat="server">
</ext:ScriptManager>
<ext:TriggerField ID="textWarrior" runat="server">
<Triggers>
<ext:FieldTrigger Icon="Ellipsis" />
</Triggers>
<Listeners>
<TriggerClick Handler="showDialog('/Dialog/WarriorDialog', {title: 'Select a warrior', height: 350, width: 525});" />
</Listeners>
</ext:TriggerField>
</asp:Content>
Sample 2/3: simple dummy data from the DataController to populate the store: public class DataController : Controller
{
public AjaxStoreResult ReturnWarriors()
{
var warriors = new[]
{
new {Id = 1, Description = "Ninja", IsNinja = true},
new {Id = 2, Description = "Wolverine", IsNinja = false},
new {Id = 3, Description = "Hiro Nakamura", IsNinja = true},
new {Id = 4, Description = "John Lock", IsNinja = false}
};
return new AjaxStoreResult(warriors);
}
}
Sample 3/3: The actual dialog (also ViewPage) with the question
<ext:ScriptManager ID="ScriptManager1" runat="server">
</ext:ScriptManager>
<ext:Store ID="warriorStore" runat="server" AutoLoad="true">
<Proxy>
<ext:HttpProxy Url="/Data/ReturnWarriors" />
</Proxy>
<Reader>
<ext:JsonReader Root="data">
<Fields>
<ext:RecordField Name="Id" Type="Int" Mapping="Id" />
<ext:RecordField Name="Description" Type="String" Mapping="Description" />
<ext:RecordField Name="IsNinja" Type="Boolean" Mapping="IsNinja" />
</Fields>
</ext:JsonReader>
</Reader>
</ext:Store>
<ext:GridPanel
ID="warriorGrid"
runat="server"
AutoHeight="true"
AutoWidth="true"
StoreID="warriorStore"
Title="List of some warriors">
<ColumnModel>
<Columns>
<ext:Column ColumnID="Id" Header="ID" Width="50" Sortable="true" DataIndex="Id" />
<ext:Column ColumnID="Description" Header="Descricacption" Width="200" Sortable="true" DataIndex="Description" />
<ext:Column ColumnID="Ninja" Header="Is this a Ninja?" Width="50" Sortable="true" DataIndex="Ninja" />
</Columns>
</ColumnModel>
<SelectionModel>
<ext:RowSelectionModel ID="RowSelectionModel1" runat="server">
<Listeners>
<%-- OnSelection: show the 'OK' button --%>
<RowSelect Handler="if (#{btnOk}.hidden){#{btnOk}.show();}" />
</Listeners>
</ext:RowSelectionModel>
</SelectionModel>
<Buttons>
<ext:Button ID="btnOk" runat="server" Text="OK" Icon="Accept" Hidden="true">
<%-- QUESTION: How to return the selected row (or 'Id' value) to the parent? --%>
</ext:Button>
</Buttons>
</ext:GridPanel>