PDA

View Full Version : [CLOSED] PartialViewResult component rendering questions



bogc
May 03, 2013, 8:59 PM
I have the code below. Store.cshtml is a partial view that gets invoked when you click on Test button.

Is it possible to control the way a component is generated in a partial view? I will give you an example.

If I comment out the line with @ViewBag.Component in Store.cshtml, the partial view is generated as follows:


{
script: "Ext.onReady(function(){window.App.myStore=Ext.crea te(\"Ext.data.Store\",{model:Ext.define(Ext.id(), {extend: \"Ext.data.Model\", fields:[{name:\"field1\",type:\"string\"}] }),storeId:\"myStore\",autoLoad:true,proxy:{type:'memory'}});});"
}

Note that the script includes the statement: window.App.myStore= Ext.create... and so on. I like this, and I would like to do the same for UI controls, i.e. if I want to create a ComboBox on the fly I would like to have it assigned to a member instead of being rendered to an element, something like this: window.App.myComboBox = Ext.create('... etc. I have a scenario where I have to create some dynamic gridpanel cell editors. The combobox configuration depends on some server data and it would be much easier to build the component using server code than pure JavaScript code. However, the partial view results always seem to render form fields to some container element instead of simply creating the component via an Ext.create call, and then assign the component to a variable that I can later manipulate in any way I want.

I guess I could always have a hidden element that I can use to render my component and take it from there.

Thanks

.Net MVC Controller

TestStoreController.cs:


using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Ext.Net;

namespace Ext.Net.MVC.Examples.Areas.Dynamic_Partial_Renderi ng.Controllers
{
public class Data
{
public ComboBox.Builder Combo { get; set; }
}

public class TestStoreController : Controller
{
//
// GET: /Dynamic_Partial_Rendering/TestStore/

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

public PartialViewResult GetStore()
{
PartialViewResult result = new PartialViewResult {
ViewName = "Store",

};

Store.Builder storeBuilder = new Store {
ID = "myStore",
Model = {
new Model {
Fields = {
new ModelField("field1", ModelFieldType.String)
}
}
}
}.ToBuilder();



IList<Data> list = new List<Data>
{
new Data
{
Combo = new ComboBox().ToBuilder().ID("MyCombo")
}
};

// storeBuilder.ToComponent().LoadRawData(list);
//
result.ViewBag.Store = storeBuilder;


IList<ComboBox.Builder> components = new List<ComboBox.Builder>
{
new ComboBox().ToBuilder().ID("MyCombo")
};


result.ViewBag.Components = components;
result.ViewBag.Component = new ComboBox().ToBuilder()
.ID("MyCombo");
// result.RenderMode = RenderMode.Auto;
// result.ControlId = "test";
return result;
}
}
}



Index.cshtml:



@using ScriptMode = Ext.Net.ScriptMode
@{
Layout = null;
}

<!DOCTYPE html>

<html>
<head>
<title>Index</title>
<script type="text/javascript">

function onSuccess(response, result, control, eventType, action, extraParams, o)
{
debugger;
}

function executeRetrieval()
{
Ext.net.directRequest({
url: '/Dynamic_Partial_Rendering/TestStore/GetStore',
eventMask: {
showMask: true,
customTarget: App.mainPanel,
msg: 'Processing...'
},
cleanRequest: true,
extraParams: {

},

success: onSuccess
});
}
</script>
</head>
<body>
@Html.X().ResourceManager(ViewBag.ManagerConfig as MvcResourceManagerConfig).ScriptMode(ScriptMode.De bug)
<div>
@(
Html.X().Panel()
.ID("mainPanel")
.Title("Items")
.Width(400)
.Height(300)
.Closable(false)
.Resizable(false)
.Layout(LayoutType.Border)
.Buttons(
new Button
{
Text="Test",
Listeners = {
Click =
{
Handler = "executeRetrieval();"
}
}
}
)

)
</div>
</body>
</html>


Store.cshtml



@* Html.X().Store().ID("myStore")
ViewBag.Component
*@

@ViewBag.Store
@ViewBag.Component

Baidaly
May 04, 2013, 2:28 AM
Hello!

We are investigating.

Thank you!

Baidaly
May 04, 2013, 5:07 PM
It seems that in your case it's better to create hidden controls because Ext.NET by default always renders controls except Stores, Proxies, etc. So I would recommend to use hidden element.

However, I'll ask my colleagues.

Daniil
May 06, 2013, 5:38 AM
Yes, a PartialViewResult always renders the things.

But, seems, Vladimir foresaw your requirement:)

Just last week he implemented a new feature - TemplateWidget. The examples are here:

trunk\Ext.Net.Examples\Examples\Miscellaneous\Temp late_Widget

Briefly, a control with TemplateWidget="true" renders a JavaScript function which creates a control's client side instance, but doesn't instantiate and render that control. So, you can use it further to create it and render. To define a JavaScript function's name, you can use the TemplateWidgetFnName property.

I have tried it in the context of MVC and partial views and it appears to be working fine.

Main View

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

@Html.X().Button().Text("Get a field").DirectClickAction("GetField")

@Html.X().Button().Text("Render a field").Handler("App.getTextField().render(Ext.getBody());")
</body>
</html>


Partial View

@(Html.X().TextField()
.Text("Hello!")
.TemplateWidget(true)
.TemplateWidgetFnName("getTextField")
)

Controller Actions

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

public ActionResult GetField()
{
Ext.Net.MVC.PartialViewResult r = new Ext.Net.MVC.PartialViewResult();
r.ViewName = "TextField";
return r;
}

To get this part working, please update from SVN.

.TemplateWidget(true)
.TemplateWidgetFnName("getTextField")

The GetField action returns the following script.

Ext.onReady(function () {
App.getTextField = Ext.net.widgetFactory("Ext.form.field.Text", true, function () {
return {
xtype: "textfield",
value: "Hello!"
};
});
});

bogc
May 06, 2013, 5:40 PM
This is exactly what I was looking for!

Are you going to push these changes to the 2.1 branch by any chance? We haven't planned yet an upgrade to 2.2.

Thanks!

Vladimir
May 06, 2013, 5:42 PM
No, it is new functionality therefore previous version will not contain it, only version from trunk currently has it

bogc
May 06, 2013, 6:07 PM
ok, no problem. We will have to upgrade to 2.2 at one point, anyway.

I just wanted to add that this feature is very powerful, and it needs advertising :-)

Daniil
May 07, 2013, 3:40 AM
I just wanted to add that this feature is very powerful, and it needs advertising :-)

Thank you for the feedback! Well, the TemplateWidget examples will be marked as NEW in the Examples Explorer:)