Razor FormPanel "FormID" missing

  1. #1

    Razor FormPanel "FormID" missing

    FormPanel is not rendering an html <form>. The property "FormID" seems to be missing.

    Html.X().FormPanel()
                  .ID("FormPanel")
                  .Url(Html.AttributeEncode(Url.Action("LogOn")))
                  .Items(itemsFormPanel => { 
                      itemsFormPanel.Add(Html.X().TextField().ID("UserName").FieldLabel("Username").AllowBlank(false).BlankText("Username is required.").Text("").AnchorHorizontal("100%"));
                      itemsFormPanel.Add(Html.X().TextField().ID("Password").FieldLabel("Password").AllowBlank(false).BlankText("Password is required.").Text("").AnchorHorizontal("100%").InputType(Ext.Net.InputType.Password));
                  })
    Ext1.3:

    <ext:FormPanel ID="FormPanel1" 
                        runat="server" 
                        FormID="form1"
                        Layout="form"
                        Url='<%# Html.AttributeEncode(Url.Action("LogOn")) %>'>
                        <Items>
                            <ext:TextField ID="Username" runat="server" FieldLabel="Username" AllowBlank="false"BlankText="Username is required." Text="" AnchorHorizontal="100%" />
                             <ext:TextField ID="Password" runat="server" InputType="Password" FieldLabel="Password" AllowBlank="false" BlankText="Password is required." Text="" AnchorHorizontal="100%" />
                        </Items>
                    </ext:FormPanel>
  2. #2
    Hi,

    Yes, there is no FormID property anymore and a <form> element is not created.

    A temporary <form> element is created if there is an FileUploadField.
    http://docs.sencha.com/ext-js/4-0/#!...thod-hasUpload
  3. #3
    So this is a work-around? Or is this final?

    I defined a (click) DirectEvent with method POST. But still no <form>. Is this behaviour expected?
  4. #4
    If you need html form then you can create it manually (like ASP.NET form) and wrap any required top container
  5. #5
    Thanks for the suggestion, but that's not going to work either.

    If I use
    @using (Html.BeginForm()) {
    
    @Html.X().ResourceManager()
      
      
          @(Html.X().Window()
             .ID("LoginWindow")
    
    ...........
    
              Html.X().FormPanel()
                           .ID("FormPanel")
    
    .......
    
    
    
    }
    It first renders a <form method="post" etc.></form>, next the Ext Rendered code
    The form is not wrapped around it.

    Any more suggestions?
  6. #6
    I replied a little too soon. Seems that the Window is not rendered inside, but a Panel is. I will try to get the Window inside the Panel then :)
  7. #7
    This is how you can render a Window into a <form> using the Ext.NET v2 Beta release.

    Example
    @{
        Layout = "";    
    }
    <!DOCTYPE html>
    <html>
    <head>
        <title>Ext.Net.MVC v2 Example</title>
    
        @Html.X().ResourcePlaceHolder(ResourceMode.ScriptFiles)
    
        <script type="text/javascript">
            Ext.net.ResourceMgr.aspForm = "form1";    
        </script>
    </head>
    <body>
        @using (Html.BeginForm("actionName", "controllerName", FormMethod.Post, new { id = "form1" }))
        {
            @Html.X().ResourceManager()
        
            @(Html.X().Window()
                .RenderTo("={Ext.get('form1')}")
                .Items(items =>
                {
                    items.Add(Html.X().TextField()
                        .ID("TextField1")
                        .Text("Hello World")
                    );
                    items.Add(Html.X().Button()
                        .Text("Fire DirectEvent")
    
                        .DirectEvents(directEvents =>
                            directEvents.Click.Url = "/Test/Submit"
                        )
                    );
                })
            )
        }
    </body>
    </html>
    Recently, we've added the FormID property for ResourceManager to set up a main <form> in Razor. It will available in the next release (Beta 2).

    This is now it can be used.

    Example
    @{
        Layout = "";    
    }
    <!DOCTYPE html>
    <html>
    <head>
        <title>Ext.Net.MVC v2 Example</title>
    </head>
    <body>
        @using (Html.BeginForm("actionName", "controllerName", FormMethod.Post, new { id = "form1" }))
        {
            @(Html.X().ResourceManager()
                .FormID("form1")
            )
        
            @(Html.X().Window()
                .Items(items =>
                {
                    items.Add(Html.X().TextField()
                        .ID("TextField1")
                        .Text("Hello World")
                    );
                    items.Add(Html.X().Button()
                        .Text("Fire DirectEvent")
    
                        .DirectEvents(directEvents =>
                            directEvents.Click.Url = "/Test/Submit"
                        )
                    );
                })
            )
        }
    </body>
    </html>

Similar Threads

  1. [CLOSED] How does "MaskCls" work for "AutoLoad" mask in panel control
    By leon_tang in forum 1.x Legacy Premium Help
    Replies: 5
    Last Post: Jul 19, 2012, 12:09 PM
  2. Replies: 1
    Last Post: Jun 26, 2012, 11:29 AM
  3. Replies: 1
    Last Post: Jun 21, 2012, 1:58 PM
  4. Replies: 5
    Last Post: May 02, 2012, 5:37 PM
  5. Replies: 4
    Last Post: Oct 11, 2011, 2:42 AM

Tags for this Thread

Posting Permissions