Enclosing Contents of Viewport in Form tags

Page 1 of 2 12 LastLast
  1. #1

    Enclosing Contents of Viewport in Form tags

    How can i enclose the content of an Ext.Net.Viewport or an Ext.net.Panel in form tags. Once i use a viewport, everything is rendered to the body. The end result would look something like...

    <body id="veiwport">
    <form id="fileUploadForm">
    ...
    </form>
    </body>
    OR

    <body id="veiwport">
    <div id="panel">
    <form id="fileUploadForm">
    ...
    </form>
    </div>
    </body>
  2. #2
    Hello @edip!

    I don't see how you can reproduce this issue, you can just use an [b]ext:Viewport[b] within the HTML form tag (or ASP.NET's), and the form will wrap the viewport.
    Fabrício Murta
    Developer & Support Expert
  3. #3
    Hello Fabricio,
    I have tried this but it seems that the viewport gets rendered outside of the form tags. I am using "Border" layout on the viewport and it becomes the body. I am rendering everything in code behind, but the child items of the viewport are not rendered inside the form tags. The following is my BaseLayout page...
    <body>
        <form id="TopApplicationForm">
        @Html.X( ).ResourceManager( ).CleanResourceUrl( true ).ShowWarningOnAjaxFailure( false ).AjaxTimeout( 130000 )
    
        @RenderSection( "Content" , true )
    
        @RenderSection( "AfterContent" , false )
        </form>
    </body>
    </html>
    This is a snapshot of how it renders...
    Click image for larger version. 

Name:	FormForExt.PNG 
Views:	80 
Size:	50.4 KB 
ID:	25200

    This is the code that generates the viewport...
            public Ext.Net.Viewport ViewportForApplicationHome
            {
                get
                {
    
                    try
                    {
                        string sId
                            = this.GetId
                                ( nsMyIdentify.IdMapEnum.ApplicationViewportForApplication );
    
                        Ext.Net.Viewport oViewport
                            = this.GetCachedExtControl<Ext.Net.Viewport> ( sId );
    
    
                        if ( oViewport == null )
                        {
                            oViewport
                                = new Ext.Net.Viewport
                                {
                                    ID = sId ,
    
                                    RenderTo = "TopApplicationForm",
    
                                    Border = false ,
    
                                    Layout
                                        = Ext.Net.LayoutType.Border.ToString ( ) ,
    
                                    Flex = 1 ,
    
                                    Margin = 0 ,
    
                                };
    
                            //oViewport.Html 
                            //    = @"<form id=""EvisionApplicationForm"">{Content}</form>";
    
                            oViewport.Items.Add
                                ( this.PanelForNorth );
    
                            oViewport.Items.Add
                                ( this.FormPanelForCenter );
    
                            oViewport.Items.Add
                                ( this.PanelForSouth );
    
    
                            if ( this.DataStore.Services.IsAdministratorOrAboveByToken ( this.Model.GetToken ( ) ) )
                            {
                                nsMyArea.ExtBuilders.ExtAdministrationBuilder oExtAdministrationBuilder
                                    = new ExtAdministrationBuilder ( );
    
                                oViewport.Bin.Add ( oExtAdministrationBuilder.WindowForAdministrationHome );
    
                                oViewport.Bin.Add ( oExtAdministrationBuilder.WindowForAddUser );
    
                                oViewport.Bin.Add ( oExtAdministrationBuilder.WindowForEditUser );
    
                                oViewport.Bin.Add ( oExtAdministrationBuilder.WindowForResetPassword );
    
    
                            }
    
                            this.AddExtControlToCache ( sId , oViewport );
                        }
    
                        // string sScript = oViewport.ToScript ( );
    
                        return oViewport;
    
    
                    }
                    catch ( System.Exception ex )
                    {
    
                        System.Diagnostics.Debug.Fail ( ex.Message );
    
                        throw ex;
                    }
                }
            }
    Last edited by edip; Nov 27, 2018 at 6:58 PM.
  4. #4
    Is there an Ext.Net component that renders to a "form" tag or is there an way to enclose the items collection of an Ext.Net container control within "form" tags?
    Last edited by edip; Nov 27, 2018 at 7:06 PM.
  5. #5
    I modified the "FileUpload" of your ext.net examples to recreate the issue...

    This is the broken example once i have added the "Viewport"...

    @{
    	ViewBag.Title = "FormPanel - Ext.NET MVC Examples";
    	Layout = "~/Views/Shared/_BaseLayout.cshtml";
    	var X = Html.X ( );
    }
    @section headtag
    {
    	<style>
    
    		#fi-button-msg
    		{
    			border: 2px solid #ccc;
    			padding: 5px 10px;
    			background: #eee;
    			margin: 5px;
    			float: left;
    		}
    	</style>
    	<script>
    		var OnFileUploadChange = function (sender, newValue, oldValue)
    		{
    			debugger;
    			Ext.net.DirectMethod.request(
    				{
    					url: "OnFileSelected",
    
    					cleanRequest: true,
    
    					isUpload: true,
    
    					formId: "UploadForm",
    
    					//params:
    					//{
    					//	token: Core.Token,
    
    					//	browserPropertyName: newTab.dispatchBrowserPropertyName,
    
    					//	containerId: newTab.browserContainerId,
    					//},
    
    					success: function (result)
    					{
    						window.alert("Success - " + result);
    					},
    
    					failure: function (result)
    					{
    						window.alert("Failure - " + result);
    					}
    				});
    		};
    
    		var showFile = function (fb, v)
    		{
    			debugger;
    			if (v)
    			{
    				var el = Ext.get('fi-button-msg');
    				el.update('<b>Selected:</b> ' + v);
    
    				if (!el.isVisible())
    				{
    					el.slideIn('t', {
    						duration: .2,
    						easing: 'easeIn',
    						callback: function ()
    						{
    							el.highlight();
    						}
    					});
    				} else
    				{
    					el.highlight();
    				}
    			}
    		};
    	</script>
    }
    @section example
    {
    
    	<h1>File Upload Field</h1>
    	<h2>Basic FileUpload</h2>
    	<p>
    		A typical file upload field with Ext style.  Direct editing of the text field cannot be done in a
    		consistent, cross-browser way, so it is always read-only in this implementation.
    	</p>
    	<form id="UploadForm">
    		@(X.Viewport ( )
    					.Layout ( Ext.Net.LayoutType.Border )
    					.Items
    					(
    					X.FileUploadField ( )
    					.ID ( "BasicField" )
    					.Width ( 400 )
    					.Icon ( Icon.Attach )
    
    				.DirectEvents
    				( de =>
    				{
    
    					de.Change.Url = Url.Action ( "OnFileSelected" );
    					de.Change.IsUpload = true;
    					de.Change.FormID = "UploadForm";
    				}
    				)
    					//.Listeners
    					//(
    					//	l =>
    					//	{
    					//		l.Change.Fn = "OnFileUploadChange";
    					//	}
    					//)
    					)
    		)
    	</form>
    	@( X.Button ( )
    																										   .Text ( "Get File Path" )
    																										   .OnClientClick ( "var v = #{BasicField}.getValue(); Ext.Msg.alert('Selected&nbsp;File', v && v != '' ? v : 'None');" )
    	)
    
    	<h2>Basic FileUpload (Button-only)</h2>
    	<p>
    		You can also render the file input as a button without the text field, with access to the field's value via the
    		standard <tt>TextField</tt> interface or by handling the <tt>FileSelected</tt> event (as in this example).
    	</p>
    	@(X.FileUploadField ( )
    						.ID ( "ButtonOnlyFileUpload" )
    						.ButtonOnly ( true )
    						//.DirectEvents
    						//(
    						//	de =>
    						//	{
    						//		de.Change.Url = "OnButtonOnlyFileSelect";
    						//	}
    						//)
    						.Listeners
    						( l => l.Change.Fn = "showFile" )
    	)
    	<div id="fi-button-msg" style="display:none;"></div>
    	<div class="x-clear"></div>
    	<h2>Form Example</h2>
    	<p>
    		The FileUploadField can also be used in standard form layouts, with support for anchoring, validation (the
    		field is required in this example), empty text, etc.
    	</p>
    	@*<form id="fileUpload" enctype="multipart/form-data">*@
    	@(X.FormPanel ( )
    							.ID ( "BasicForm" )
    							.Width ( 500 )
    							.Frame ( true )
    							.Title ( "File Upload Form" )
    							.Content (
    							@<text>
    								<form id="DynamicForm"></form>
    							</text>)
    					.PaddingSpec ( "10px 10px 0 10px" )
    					.FieldDefaults ( fd => fd.LabelWidth = 50 )
    					.Defaults ( d =>
    					{
    						d.Add ( new Parameter ( "anchor" , "95%" , ParameterMode.Value ) );
    						d.Add ( new Parameter ( "allowBlank" , "false" , ParameterMode.Raw ) );
    						d.Add ( new Parameter ( "msgTarget" , "side" , ParameterMode.Value ) );
    					} )
    					.Items
    					(
    					X.TextField ( )
    					.ID ( "PhotoName" )
    					.FieldLabel ( "Name" ) ,
    
    					X.FileUploadField ( )
    					.ID ( "FileUploadField1" )
    					.EmptyText ( "Select an image" )
    					.FieldLabel ( "Photo" )
    					.ButtonText ( "" )
    					.Icon ( Icon.ImageAdd )
    
    					)
    					.Listeners
    					(
    					l =>
    					{
    						l.ValidityChange.Handler = "#{SaveButton}.setDisabled(!valid);";
    
    
    					}
    
    					)
    					.Buttons (
    					X.Button ( )
    					.ID ( "SaveButton" )
    					.Text ( "Save" )
    					.Disabled ( true )
    					.DirectEvents ( de =>
    					{
    						de.Click.Url = Url.Action ( "UploadClick" );
    						de.Click.FormID = "fileUpload";
    						de.Click.Before = @"if (!#{BasicForm}.getForm().isValid()) { return false; }
    		Ext.Msg.wait('Uploading your photo...', 'Uploading');";
    						de.Click.Failure = @"Ext.Msg.show({
    		title   : 'Error',
    		msg     : 'Error during uploading',
    		minWidth: 200,
    		modal   : true,
    		icon    : Ext.Msg.ERROR,
    		buttons : Ext.Msg.OK
    		});";
    					} ) ,
    
    					X.Button ( )
    					.Text ( "Reset" )
    					.OnClientClick ( "#{BasicForm}.getForm().reset();" )
    					)
    
    	)
    	@*</form>*@
    }
    This is the working example without the viewport...

    @{
    	ViewBag.Title = "FormPanel - Ext.NET MVC Examples";
    	Layout = "~/Views/Shared/_BaseLayout.cshtml";
    	var X = Html.X ( );
    }
    @section headtag
    {
    	<style>
    
    		#fi-button-msg
    		{
    			border: 2px solid #ccc;
    			padding: 5px 10px;
    			background: #eee;
    			margin: 5px;
    			float: left;
    		}
    	</style>
    	<script>
    		var OnFileUploadChange = function (sender, newValue, oldValue)
    		{
    			debugger;
    			Ext.net.DirectMethod.request(
    				{
    					url: "OnFileSelected",
    
    					cleanRequest: true,
    
    					isUpload: true,
    
    					formId: "UploadForm",
    
    					//params:
    					//{
    					//	token: Core.Token,
    
    					//	browserPropertyName: newTab.dispatchBrowserPropertyName,
    
    					//	containerId: newTab.browserContainerId,
    					//},
    
    					success: function (result)
    					{
    						window.alert("Success - " + result);
    					},
    
    					failure: function (result)
    					{
    						window.alert("Failure - " + result);
    					}
    				});
    		};
    
    		var showFile = function (fb, v)
    		{
    			debugger;
    			if (v)
    			{
    				var el = Ext.get('fi-button-msg');
    				el.update('<b>Selected:</b> ' + v);
    
    				if (!el.isVisible())
    				{
    					el.slideIn('t', {
    						duration: .2,
    						easing: 'easeIn',
    						callback: function ()
    						{
    							el.highlight();
    						}
    					});
    				} else
    				{
    					el.highlight();
    				}
    			}
    		};
    	</script>
    }
    @section example
    {
    
    	<h1>File Upload Field</h1>
    	<h2>Basic FileUpload</h2>
    	<p>
    		A typical file upload field with Ext style.  Direct editing of the text field cannot be done in a
    		consistent, cross-browser way, so it is always read-only in this implementation.
    	</p>
    	<form id="UploadForm">
    		@(
    			X.FileUploadField ( )
    			.ID ( "BasicField" )
    			.Width ( 400 )
    			.Icon ( Icon.Attach )
    
    			.DirectEvents
    			( de =>
    			{
    
    				de.Change.Url = Url.Action ( "OnFileSelected" );
    				de.Change.IsUpload = true;
    				de.Change.FormID = "UploadForm";
    			}
    		)
    			//.Listeners
    			//(
    			//	l =>
    			//	{
    			//		l.Change.Fn = "OnFileUploadChange";
    			//	}
    			//)
    	)
    
    	</form>
    	@( X.Button ( )
    																												   .Text ( "Get File Path" )
    																												   .OnClientClick ( "var v = #{BasicField}.getValue(); Ext.Msg.alert('Selected&nbsp;File', v && v != '' ? v : 'None');" )
    	)
    
    	<h2>Basic FileUpload (Button-only)</h2>
    	<p>
    		You can also render the file input as a button without the text field, with access to the field's value via the
    		standard <tt>TextField</tt> interface or by handling the <tt>FileSelected</tt> event (as in this example).
    	</p>
    	@(X.FileUploadField ( )
    								.ID ( "ButtonOnlyFileUpload" )
    								.ButtonOnly ( true )
    								//.DirectEvents
    								//(
    								//	de =>
    								//	{
    								//		de.Change.Url = "OnButtonOnlyFileSelect";
    								//	}
    								//)
    								.Listeners
    								( l => l.Change.Fn = "showFile" )
    	)
    	<div id="fi-button-msg" style="display:none;"></div>
    	<div class="x-clear"></div>
    	<h2>Form Example</h2>
    	<p>
    		The FileUploadField can also be used in standard form layouts, with support for anchoring, validation (the
    		field is required in this example), empty text, etc.
    	</p>
    	@*<form id="fileUpload" enctype="multipart/form-data">*@
    	@(X.FormPanel ( )
    									.ID ( "BasicForm" )
    									.Width ( 500 )
    									.Frame ( true )
    									.Title ( "File Upload Form" )
    									.Content (
    									@<text>
    										<form id="DynamicForm"></form>
    									</text>)
    										.PaddingSpec ( "10px 10px 0 10px" )
    										.FieldDefaults ( fd => fd.LabelWidth = 50 )
    										.Defaults ( d =>
    										{
    											d.Add ( new Parameter ( "anchor" , "95%" , ParameterMode.Value ) );
    											d.Add ( new Parameter ( "allowBlank" , "false" , ParameterMode.Raw ) );
    											d.Add ( new Parameter ( "msgTarget" , "side" , ParameterMode.Value ) );
    										} )
    										.Items
    										(
    										X.TextField ( )
    										.ID ( "PhotoName" )
    										.FieldLabel ( "Name" ) ,
    
    										X.FileUploadField ( )
    										.ID ( "FileUploadField1" )
    										.EmptyText ( "Select an image" )
    										.FieldLabel ( "Photo" )
    										.ButtonText ( "" )
    										.Icon ( Icon.ImageAdd )
    
    										)
    										.Listeners
    										(
    										l =>
    										{
    											l.ValidityChange.Handler = "#{SaveButton}.setDisabled(!valid);";
    
    
    										}
    
    										)
    										.Buttons (
    										X.Button ( )
    										.ID ( "SaveButton" )
    										.Text ( "Save" )
    										.Disabled ( true )
    										.DirectEvents ( de =>
    										{
    											de.Click.Url = Url.Action ( "UploadClick" );
    											de.Click.FormID = "fileUpload";
    											de.Click.Before = @"if (!#{BasicForm}.getForm().isValid()) { return false; }
    			Ext.Msg.wait('Uploading your photo...', 'Uploading');";
    											de.Click.Failure = @"Ext.Msg.show({
    			title   : 'Error',
    			msg     : 'Error during uploading',
    			minWidth: 200,
    			modal   : true,
    			icon    : Ext.Msg.ERROR,
    			buttons : Ext.Msg.OK
    			});";
    										} ) ,
    
    										X.Button ( )
    										.Text ( "Reset" )
    										.OnClientClick ( "#{BasicForm}.getForm().reset();" )
    										)
    
    	)
    	@*</form>*@
    }
    The controller code...
    using System.Web.Mvc;
    
    namespace Ext.Net.MVC.Examples.Areas.Form_FileUploadField.Controllers
    {
        public class BasicController : Controller
        {
            public ActionResult Index()
            {
                return View();
            }
    
            public ActionResult OnButtonOnlyFileSelect ( )
            {
                Ext.Net.FileUploadField oFileUploadField
                    = this.GetCmp<Ext.Net.FileUploadField> ( "ButtonOnlyFileUpload" );
    
                if ( oFileUploadField.HasFile )
                {
                    var o = oFileUploadField.PostedFile.InputStream;
                }
    
                Ext.Net.MVC.DirectResult oDirectResult
                    = new Ext.Net.MVC.DirectResult ( );
    
                oDirectResult.IsUpload = true;
    
                return oDirectResult;
    
    
            }
    
            public ActionResult OnFileSelected ( )
            {
                Ext.Net.FileUploadField oFileUploadField
                    = this.GetCmp<Ext.Net.FileUploadField> ( "BasicField" );
    
                if ( oFileUploadField.HasFile )
                {
                    System.IO.Stream oStream
                        = oFileUploadField.PostedFile.InputStream;
    
                    System.Drawing.Image oImage 
                        = System.Drawing.Image.FromStream ( oStream );
    
                    // System.Drawing.Imaging.ImageFormat.Jpeg
    
                    byte [ ] abytBuffer = new byte [ oStream.Length ];
    
                    oStream.Read ( abytBuffer , 0 , (int) oStream.Length );
    
                    var oBase64 = System.Convert.ToBase64String ( abytBuffer );
                }
    
                Ext.Net.MVC.DirectResult oDirectResult
                    = new Ext.Net.MVC.DirectResult ( );
    
                oDirectResult.IsUpload = true;
    
                return oDirectResult;
            }
            public ActionResult UploadClick()
            {
                string tpl = "Uploaded file: {0}<br/>Size: {1} bytes";
    
                var oFileUploadField
                    = this.GetCmp<FileUploadField> ( "FileUploadField1" );
    
                if (oFileUploadField.HasFile)
                {
                    X.Msg.Show(new MessageBoxConfig
                    {
                        Buttons = MessageBox.Button.OK,
                        Icon = MessageBox.Icon.INFO,
                        Title = "Success",
                        Message 
                            = string.Format(tpl, oFileUploadField.PostedFile.FileName
                            , oFileUploadField.PostedFile.ContentLength)
                    });
                }
                else
                {
                    X.Msg.Show(new MessageBoxConfig
                    {
                        Buttons = MessageBox.Button.OK,
                        Icon = MessageBox.Icon.ERROR,
                        Title = "Fail",
                        Message = "No file uploaded"
                    });
                }
                DirectResult result = new DirectResult();
                result.IsUpload = true;
                return result;
            }
        }
    }
    Last edited by edip; Nov 27, 2018 at 7:26 PM.
  6. #6
    Hello @edip!

    Do you require one form within a <form> block, then a FileUploadField outside any <form> block, and then a FormPanel with commented <form> block to reproduce the issue? I'm pretty confused with the test case you provided, not sure where to start looking to give you advice.

    Please understand we won't be able to help you if you can't reduce the issue to a minimum required code to reproduce it. Not cause we don't want. Simply because we can't figure out with some degree of precision on what we should be looking after in the code.
    Fabrício Murta
    Developer & Support Expert
  7. #7
    Hi Fabricio,
    The example i gave you is right from your mvc examples. I added the modifications. If you just replace the "Form_FileUploadField" example with my "Index.cshtml" and my "BasicController.cs" pasted below you will see that it does not have a file attached after you select a file from the file system.

    Index.cshtml

    @{
    	ViewBag.Title = "FormPanel - Ext.NET MVC Examples";
    	Layout = "~/Views/Shared/_BaseLayout.cshtml";
    	var X = Html.X ( );
    }
    @section headtag
    {
    	<style>
    
    		#fi-button-msg
    		{
    			border: 2px solid #ccc;
    			padding: 5px 10px;
    			background: #eee;
    			margin: 5px;
    			float: left;
    		}
    	</style>
    	<script>
    		var OnFileUploadChange = function (sender, newValue, oldValue)
    		{
    			debugger;
    			Ext.net.DirectMethod.request(
    				{
    					url: "OnFileSelected",
    
    					cleanRequest: true,
    
    					isUpload: true,
    
    					formId: "UploadForm",
    
    					//params:
    					//{
    					//	token: Core.Token,
    
    					//	browserPropertyName: newTab.dispatchBrowserPropertyName,
    
    					//	containerId: newTab.browserContainerId,
    					//},
    
    					success: function (result)
    					{
    						window.alert("Success - " + result);
    					},
    
    					failure: function (result)
    					{
    						window.alert("Failure - " + result);
    					}
    				});
    		};
    
    		var showFile = function (fb, v)
    		{
    			debugger;
    			if (v)
    			{
    				var el = Ext.get('fi-button-msg');
    				el.update('<b>Selected:</b> ' + v);
    
    				if (!el.isVisible())
    				{
    					el.slideIn('t', {
    						duration: .2,
    						easing: 'easeIn',
    						callback: function ()
    						{
    							el.highlight();
    						}
    					});
    				} else
    				{
    					el.highlight();
    				}
    			}
    		};
    	</script>
    }
    @section example
    {
    
    	<h1>File Upload Field</h1>
    	<h2>Basic FileUpload</h2>
    	<p>
    		A typical file upload field with Ext style.  Direct editing of the text field cannot be done in a
    		consistent, cross-browser way, so it is always read-only in this implementation.
    	</p>
    	<form id="UploadForm">
    	@(
    				X.Viewport ( )
    					.Layout ( Ext.Net.LayoutType.Border )
    					.Items (
    						X.FileUploadField ( )
    						.ID ( "BasicField" )
    						.Width ( 400 )
    						.Icon ( Icon.Attach )
    
    						.DirectEvents
    						( de =>
    						{
    
    							de.Change.Url = Url.Action ( "OnFileSelected" );
    							de.Change.IsUpload = true;
    							de.Change.FormID = "UploadForm";
    						}
    				)
    				//.Listeners
    				//(
    				//l =>
    				//{
    				//	l.Change.Fn = "OnFileUploadChange";
    				//}
    				//)
    				)
    	)
    	</form>
    
    	
    }
    BasicController.cs

    using System.Web.Mvc;
    
    namespace Ext.Net.MVC.Examples.Areas.Form_FileUploadField.Controllers
    {
        public class BasicController : Controller
        {
            public ActionResult Index()
            {
                return View();
            }
    
            public ActionResult OnButtonOnlyFileSelect ( )
            {
                Ext.Net.FileUploadField oFileUploadField
                    = this.GetCmp<Ext.Net.FileUploadField> ( "ButtonOnlyFileUpload" );
    
                if ( oFileUploadField.HasFile )
                {
                    var o = oFileUploadField.PostedFile.InputStream;
                }
    
                Ext.Net.MVC.DirectResult oDirectResult
                    = new Ext.Net.MVC.DirectResult ( );
    
                oDirectResult.IsUpload = true;
    
                return oDirectResult;
    
    
            }
    
            public ActionResult OnFileSelected ( )
            {
                Ext.Net.FileUploadField oFileUploadField
                    = this.GetCmp<Ext.Net.FileUploadField> ( "BasicField" );
    
                if ( oFileUploadField.HasFile )
                {
                    System.IO.Stream oStream
                        = oFileUploadField.PostedFile.InputStream;
    
                    System.Drawing.Image oImage 
                        = System.Drawing.Image.FromStream ( oStream );
    
                    // System.Drawing.Imaging.ImageFormat.Jpeg
    
                    byte [ ] abytBuffer = new byte [ oStream.Length ];
    
                    oStream.Read ( abytBuffer , 0 , (int) oStream.Length );
    
                    var oBase64 = System.Convert.ToBase64String ( abytBuffer );
                }
    
                Ext.Net.MVC.DirectResult oDirectResult
                    = new Ext.Net.MVC.DirectResult ( );
    
                oDirectResult.IsUpload = true;
    
                return oDirectResult;
            }
            public ActionResult UploadClick()
            {
                string tpl = "Uploaded file: {0}<br/>Size: {1} bytes";
    
                var oFileUploadField
                    = this.GetCmp<FileUploadField> ( "FileUploadField1" );
    
                if (oFileUploadField.HasFile)
                {
                    X.Msg.Show(new MessageBoxConfig
                    {
                        Buttons = MessageBox.Button.OK,
                        Icon = MessageBox.Icon.INFO,
                        Title = "Success",
                        Message 
                            = string.Format(tpl, oFileUploadField.PostedFile.FileName
                            , oFileUploadField.PostedFile.ContentLength)
                    });
                }
                else
                {
                    X.Msg.Show(new MessageBoxConfig
                    {
                        Buttons = MessageBox.Button.OK,
                        Icon = MessageBox.Icon.ERROR,
                        Title = "Fail",
                        Message = "No file uploaded"
                    });
                }
                DirectResult result = new DirectResult();
                result.IsUpload = true;
                return result;
            }
        }
    }
  8. #8
    Hello @edip!

    You can use the default Fit layout with the viewport and use the Border layout in a FormPanel within it. Then you would have a working form.

    The FormPanel has also the advantage of setting up the form so that the upload can happen -and- Ext.NET can send back commands, like showing status messages about the upload.

    In case other people run into this problem, the whole issue here can be reduced to a (working) example as follows:

    c62503_vpWithinForm.cshtml
    @{
        ViewBag.Title = "FormPanel - Ext.NET MVC Examples";
        Layout = null;
        var X = Html.X();
    }
    <!DOCTYPE html>
    <html>
    <body>
        @X.ResourceManager()
        @(
            X.Viewport()
                .Items(
                    X.FormPanel()
                        .ID("UploadForm")
                        .Items(
                            X.Container()
                                .Margin(10)
                                .Html(@<text>
                                    <h1>File Upload Field in a Viewport.</h1>
                                    <h2>Form-bound upload</h2>
                                    <p>
                                        If you want to use viewport and submission forms, you can nest them with a <b>FormPanel</b>.
                                    </p>
                                </text>),
                            X.FileUploadField()
                                .ID("BasicField")
                                .Icon(Icon.Attach)
                                .Width(400)
                                .Margin(10)
                                .DirectEvents(de =>
                                {
                                    de.Change.Url = Url.Action("c62503_OnFileSelected");
                                })
                        )
                )
        )
    </body>
    </html>
    controller.cs
    public ActionResult c62503_vpWithinForm() { return View(); }
    
    public ActionResult c62503_OnFileSelected()
    {
        var oFileUploadField = this.GetCmp<FileUploadField>("BasicField");
    
        if (oFileUploadField.HasFile)
        {
            X.Toast("Handled file upload.");
        }
        else
        {
            X.Toast("No file selected.");
        }
    
        return new DirectResult() { IsUpload = true };
    }
    Fabrício Murta
    Developer & Support Expert
  9. #9
    Thanks Fabricio,
    I think the issue becomes putting the fileuploadfield in an Ext.Net PropertyGrid. I will modify the example and see if i can get it to work in a propertygrid. Does the FileUploadField need to be a direct child of the FormPanel or can it be an editor in a propertygrid?
    Thanks again, I appreciate your help.
  10. #10
    Hello Fabricio,
    As soon as i add the PropertyGrid, it stops working and does not even fire the event. Am i missing something? Thanks.

    c62503_vpWithinForm.cshtml

    @{
    	ViewBag.Title = "FormPanel - Ext.NET MVC Examples";
    	Layout = null;
    	var X = Html.X( );
    }
    <!DOCTYPE html>
    <html>
    <body>
    	@X.ResourceManager( )
    	@(
    			X.Viewport( )
    				.Items(
    					X.FormPanel( )
    						.ID( "UploadForm" )
    						.Items(
    							X.Container( )
    								.Margin( 10 )
    								.Html(@<text>
    									<h1>File Upload Field in a Viewport.</h1>
    									<h2>Form-bound upload</h2>
    									<p>
    										If you want to use viewport and submission forms, you can nest them with a <b>FormPanel</b>.
    									</p>
    									</text>) ,
    											X.PropertyGrid( )
    												.Source
    												( s =>
    												{
    													Ext.Net.FileUploadField oField
    														= new Ext.Net.FileUploadField ( );
    
    
    													oField.ToBuilder ( )
    														.ID ( "BasicField" )
    														.Icon ( Icon.Attach )
    														.Width ( 400 )
    														.DirectEvents
    														( de =>
    														{
    															de.Change.Url = Url.Action ( "c62503_OnFileSelected" );
    														}
    														);
    
    
    													Ext.Net.PropertyGridParameter oParameter
    														= new Ext.Net.PropertyGridParameter ( )
    														{
    															Name = "Image" ,
    														};
    
    
    													oParameter.Editor.Add ( oField );
    
    													oParameter.Value = oField.FileName;
    
    													s.Add ( oParameter );
    
    
    												}
    												)
    								)
    
    			)
    	)
    </body>
    </html>
    Last edited by edip; Nov 28, 2018 at 5:49 PM.
Page 1 of 2 12 LastLast

Similar Threads

  1. Replies: 0
    Last Post: Jul 19, 2011, 3:15 PM
  2. Params with <% %> tags
    By norphos in forum 1.x Help
    Replies: 1
    Last Post: May 20, 2011, 3:53 AM
  3. Replies: 2
    Last Post: Jul 02, 2009, 4:16 PM
  4. Replies: 2
    Last Post: Mar 27, 2009, 6:06 PM
  5. [CLOSED] ViewPort Panel not sizing to fit contents
    By randy85253 in forum 1.x Help
    Replies: 3
    Last Post: Sep 27, 2008, 3:23 PM

Tags for this Thread

Posting Permissions