PDA

View Full Version : [CLOSED] Load window content from a controller method



registrator
Jan 09, 2015, 11:47 AM
I would like to have a generic window opening on different component clicks but the content of this window should come from a controller method passing back a view to it. I would pass in some params to the controller method, the method constructs the view model and passes in to the view and then this view get's loaded as a content of the window.

Why I want to do this?
I am using your http://mvc2.ext.net/ solution as a reference. The content in the tabs created on the right has elements that should create a window the same way as you Source Code window. On top of all elements and not contained in the "tab space" like you have in your solution on Window examples http://mvc2.ext.net/#/Window_Basic/Hello_World/

Please let me know if I need to clarify this question further.

Thank you.

Dimitris
Jan 09, 2015, 4:24 PM
Hello,

Excuse me if I have misunderstood your question but is this what are you trying to do?

http://examples2.ext.net/#/Window/Basic/Load_External_Website/

If not, posting an example of your code would be much appreciated in order to provide the right solution.

registrator
Jan 09, 2015, 5:02 PM
No, not really.
What I would like is to open a window like the one that open when you click on the Source Code button but the content of that window to be loaded from the controller method. And this controller method returns a view. It's all MVC we are talking about.

Thank you

Dimitris
Jan 09, 2015, 6:29 PM
Understood.

Of course, there is the corresponding mvc window example (sorry for posting the webform link) but it is based on the Loader, too. On the other hand, in mvc, the url passed to the loader will result in a call to the corresponding controller... Should the controller method do something other than return the view?

registrator
Jan 09, 2015, 8:55 PM
I think the problem is that I am working on the actual http://mvc2.ext.net/ solution. Downloaded.
Even in the http://mvc2.ext.net/#/Window_Basic/Load_External_Website/ sample you see that the window is opened inside the tab where the button that opened it resides.
The only thing I would like to do is to have this window being "outside the tab".

I have managed to open a window with JavaScript and then use this sample http://mvc2.ext.net/#/Dynamic_Partial_Rendering/ASPX_Engine/ to load a view into a particular container. But it is still inside the tab.

Do you have an idea how can I get outside the tab?

Thank you

Daniil
Jan 10, 2015, 12:39 PM
It might be helpful to read these threads.
http://forums.ext.net/showthread.php?13855
http://forums.ext.net/showthread.php?12801

registrator
Jan 10, 2015, 2:27 PM
These threads definitely describe the same problem I have. I'll look at the solutions provided.

Thank you.

registrator
Jan 10, 2015, 2:47 PM
It is a bit different in my situation. Perhaps you can suggest a solution...?

I have a controller method returning



return this.PartialExtView(
viewName: "Edit",
model: viewModel
);
return this.Direct();


And the view returned is:



<html>
<head>
<meta name="viewport" content="width=device-width" />
<title></title>
</head>
<body>
<div>
@( X.Window().ID("Edit")
.Title(Model.NAME)
.Icon(Icon.ApplicationViewDetail)
.Width(800)
.Height(550)
.Layout(LayoutType.Fit)
.Border(true)

etc...


Can any of the suggested methods in those two posts be applied in my case? Maybe a different approach?

Thank you.

Daniil
Jan 13, 2015, 6:26 AM
The main point here is the fact that the only solution is to open a Window from the parent page.

Say, you have the parent page and its child page inside.

If you open/create the Window inside the child page, it will be inside that child page. There is no way to get the Window belongs to the parent page unless you create that Window on the parent page.

Can you have the Button (that creates a Window) inside the parent page, not inside the child page?

registrator
Jan 13, 2015, 8:03 AM
I can't really create a window on the parent page because it is a double click on a grid row and a grid is in the child page.
I tried a trick where I am calling a window create, and this window create code is in the parent page, so the dbl click triggers that code and loads a view inside that window. It is still the same problem.

What I referred to in my previous question is the possibility of having something from examples you have mentioned

renderTo : parent.Ext.getBody() or

parent.renderWindow(windowConfig);

in my scenario?

Thank you.

Daniil
Jan 13, 2015, 9:55 AM
Please clarify where is the Window defined? Inside the parent page or the child one?

registrator
Jan 13, 2015, 10:23 AM
Well the double click on a grid row calls the action method that returns a partial view

return this.PartialExtView(
viewName: "Edit",
model: viewModel
);
return this.Direct();

and the view is


<html>
<head>
<meta name="viewport" content="width=device-width" />
<title></title>
</head>
<body>
<div>
@( X.Window().ID("Edit")
.Title(Model.NAME)
.Icon(Icon.ApplicationViewDetail)
.Width(800)
.Height(550)
.Layout(LayoutType.Fit)
.Border(true)

Can I make this render parent, render in parent or whatever the syntax is...?

Daniil
Jan 13, 2015, 11:15 AM
calls the action method that returns a partial view

You should call the action from the parent page.

registrator
Jan 13, 2015, 11:23 AM
Do you have an example how to hack/trick this?

Thnx

Daniil
Jan 13, 2015, 11:31 AM
Ok, how do you call the controller action currently?

registrator
Jan 13, 2015, 11:45 AM
From the grid panel:


.DirectEvents(de =>
{
de.ItemDblClick.Url = "List/DblClick";
de.ItemDblClick.CleanRequest = true;
de.ItemDblClick.EventMask.ShowMask = true;
de.ItemDblClick.Method = HttpMethod.GET;
de.ItemDblClick.ExtraParams.Add(new Parameter("id", "record.get('REF')", ParameterMode.Raw));
})

Daniil
Jan 13, 2015, 7:09 PM
Ok, there might a few approaches.

For example, this one.

Index.cshtml

@{
var X = Html.X();
}

<!DOCTYPE html>
<html>
<head>
<title>Ext.Net.MVC v2 Example</title>

<script>
var openWindow = function(recordId) {
App.Window1.removeAll();
App.Window1.show();
App.Window1.load({
params: {
recordId: recordId
}
});
};
</script>
</head>
<body>
@X.ResourceManager()

@(X.Window()
.ID("Window1")
.Title("Window")
.Hidden(true)
.Height(100)
.Loader(X.ComponentLoader()
.AutoLoad(false)
.Mode(LoadMode.Html)
.Scripts(true)
.Url(Url.Action("WindowContent"))
.Params(new
{
containerId = "Window1"
})
)
)

@(X.Panel()
.Loader(X.ComponentLoader()
.Mode(LoadMode.Frame)
.Url(Url.Action("Child"))
)
)
</body>
</html>


Child.cshtml

@{
var X = Html.X();
}

<!DOCTYPE html>
<html>
<head>
<title>Ext.Net.MVC v2 Example</title>
</head>
<body>
@X.ResourceManager()

@(X.GridPanel()
.Store(X.Store()
.Model(X.Model()
.Fields("id", "text")
)
.DataSource(new object[]
{
new
{
id = 1,
text = "Some Text 1"
},
new
{
id = 2,
text = "Some Text 2"
}
})
)
.ColumnModel(
X.Column().Text("id").DataIndex("id"),
X.Column().Text("text").DataIndex("text")
)
.Listeners(events =>
events.ItemDblClick.Handler = "parent.openWindow(record.getId());"
)
)
</body>
</html>


WindowContent.cshtml

@model string

@(Html.X().Label()
.Text("The Window has been opened for the record with id - " + Model)
)


Controller

public ActionResult Index()
{
return View();
}

public ActionResult Child()
{
return View();
}

public ActionResult WindowContent(string containerId, string recordId)
{
return new PartialViewResult
{
ContainerId = containerId,
RenderMode = RenderMode.AddTo,
Model = recordId
};
}

registrator
Jan 15, 2015, 12:26 PM
With a little bit of tweaking around, this solution did work. Thank you!

registrator
Jan 20, 2015, 11:52 AM
Would it be possible to pass in parameters for the Url to this function:

var openWindow = function(recordId)

as to have a generic window for opening all the record edit windows for any grid in the application?

Basically, to move


.Url(Url.Action("WindowContent"))

to the openWinow javascript function with controller action path passed in as parameters?

In my case I have Url.Action("DblClick", "List", new { area = "Sales" })

Daniil
Jan 21, 2015, 8:13 AM
It looks I don't quite understand the requirement. You can pass to server any parameters in a similar way as I did with the "recordId" parameter in my example, but, probably, it is not what you are looking for. It looks you want to change something in the design, but I am not sure what exactly. Please elaborate on that.

registrator
Jan 21, 2015, 10:28 AM
Instead of having the URL defined in the Window like:

@(X.Window()
.ID("Window1")
.Title("Window")
.Hidden(true)
.Height(100)
.Loader(X.ComponentLoader()
.AutoLoad(false)
.Mode(LoadMode.Html)
.Scripts(true)
.Url(Url.Action("WindowContent"))
.Params(new
{
containerId = "Window1"
})
)
)


I would like to pass in the URL parameter to the:

<script>
var openWindow = function(recordId) {
App.Window1.removeAll();
App.Window1.show();
App.Window1.load({
params: {
recordId: recordId
}
});
};
</script>

How do I set the URL for the App.Window1 please?

Thank you

Daniil
Jan 22, 2015, 11:29 AM
It is possible to pass an URL to the load method.

App.Window1.load({
url: "some URL",
params: {
recordId: recordId
}
});