FormPanel with strongly-typed aspx view

**fosteliss** · Aug 17, 2012, 6:36 PM

Hi,

I am trying to use a FormPanel with a strongly-type aspx view. The elements of my model are Time, Description, Action, and NotifyTime. Here is the view so far:

<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<EMIAQToolkit.EventLog>" %>

<%@ Import Namespace="System.Collections.Generic"%>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<!DOCTYPE html>

<html>
<head id="Head1" runat="server">
<title> Add event </title>

<body>

<form id="Form1" runat="server">
    <ext:ResourceManager ID="ResourceManager1" runat="server" />

      <ext:FormPanel 
            ID="UserForm" 
            runat="server"
            Frame="true"
            LabelAlign="Right"
            Title="Add Event -- Alert message and notify date are optional"
            Width="500"
            >
            <Items>
                <ext:DateField ID="Datefield1" runat="server"
                    FieldLabel="Date"
                    Name="Time"
                    AllowBlank="false"
                    Vtype="Date"
                    AnchorHorizontal="100%" AutoDataBind="true"
                    />
                
                <ext:TextField ID="TextField1" runat="server"
                    FieldLabel="Description"
                    Name="Description"
                    AllowBlank="false"
                    AnchorHorizontal="100%" AutoDataBind="true"
                    />
                
                <ext:ComboBox ID="ComboBox1" runat="server"
                            FieldLabel="Set Alert"
                            Name="Action"
                            TypeAhead="true"
                            SelectOnTab="true" AutoDataBind="true">
                            <Items>
                                <ext:ListItem Text="No Alert" />
                                <ext:ListItem Text="Calibrate" />
                                <ext:ListItem Text="Replace" />
                                <ext:ListItem Text="Check" />
                            </Items>
                        </ext:ComboBox>
                  <ext:DateField ID="Datefield2" runat="server"
                    FieldLabel="Notify Date"
                    Name="NotifyTime"
                    AllowBlank="true"
                    Vtype="Date"
                    AnchorHorizontal="100%" AutoDataBind="true"
                    />
            </Items>            
            
            <Buttons>
                <ext:Button ID="Button1" 
                    runat="server"
                    Text="Save"
                    Icon="Disk"
                    AutoPostBack="true" 
                    />
                <ext:Button ID="Button2" 
                    runat="server"
                    Text="Reset">
                    <Listeners>
                        <Click Handler="#{UserForm}.getForm().reset();" />
                    </Listeners>
                </ext:Button>
            </Buttons>
        </ext:FormPanel>
 </form>
</body>
</html>

Is there a tag that could be placed in the DateField/TextField/ComboBox elements. I already placed the AutoDataBinding tag but this isn't working.
On postback the model is getting the time="01/01/1901" and everything else empty.

Thanks,

Eli

**Vladimir** · Aug 17, 2012, 6:51 PM

FormPanel doesn't render HTML form tag
Wrap the form panel by form tags

**fosteliss** · Aug 17, 2012, 6:56 PM

I do have the FormPanel wrapped by form tags

**Vladimir** · Aug 17, 2012, 7:03 PM

How and wher do you check values?

**fosteliss** · Aug 17, 2012, 8:09 PM

I'm checking values by looking at the tables in the database.
Here is the Controller:

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

namespace EMIAQToolkit.Models
{
    public class EventController : System.Web.Mvc.Controller
    {
       
        EventRepository eventRepository = new EventRepository();

        //
        // GET: /Event/Add/2

        public ActionResult Add(int id)
        {
            EventLog eventLog = new EventLog()
            {
                TrendId_FK = (short)id,
                Time = DateTime.Now
            };
            return View(eventLog);

        }

        //
        // POST: /Event/Add/2

        [HttpPost]
        public ActionResult Add(int id, FormCollection collection)
        {
            EventLog eventLog = new EventLog();
            eventLog.TrendId_FK = (short)id;
            eventRepository.Add(eventLog);
            eventRepository.Save();

            return RedirectToAction("Add", new { id = eventLog.TrendId_FK });
         
        }
            
    }
}

Here is the EventRepository Class:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace EMIAQToolkit.Models
{
    public class EventRepository
    {
        private ACEMIAQ_DEVEntities dba = new ACEMIAQ_DEVEntities();

        public IQueryable<EventLog> GetAllEvents()
        {
            return dba.EventLogs;
        }

        public IQueryable<EventLog> FindEvents(int trendId)
        {
            return from eventlog in GetAllEvents()
                   where eventlog.TrendId_FK == trendId
                   select eventlog;
        }

        public void Add(EventLog eventLog)
        {
            dba.EventLogs.AddObject(eventLog);
        }

        public void Save()
        {
            dba.SaveChanges();
        }

    }
  
}

**Vladimir** · Aug 17, 2012, 8:21 PM

AutoPostBack is WebForm functuonality and should not be used under MVC
Use the following Handler for the Button

Handler="this.el.up('form').dom.submit();"

**fosteliss** · Aug 17, 2012, 8:39 PM

Ok I took off the autopostback and put that instead but this still isn't binding my model to the values in the text boxes. Is there a way to bind the model with the text boxes based on the Name property of the TextField tag?

**Vladimir** · Aug 17, 2012, 8:47 PM

Model binding is supported since 2.1 version
2.1 version is not released yet (available in SVN only)

2.1 version will be released with MVC Examples Explorer to demonstrate supported MVC functionality

**fosteliss** · Aug 17, 2012, 9:10 PM

I have gotten it to work. I went back to just a regular form using the html helpers and I was still getting an out of range date for the Time field and nothing else filled in. I remembered that I had modified the EventController to not handle validation because I was going to disable the save button if the form wasn't valid. I have reverted to the validation in the controller and now it works.

[HttpPost]
        public ActionResult Add(int id, FormCollection collection)
        {
            EventLog eventLog = new EventLog();

            var actions = new[] { "No Alert", "Calibrate", "Replace", "Check" };
            ViewData["Actions"] = new SelectList(actions, eventLog.Action);

            if (TryUpdateModel(eventLog))
            {

                if (eventLog.Action == "No Alert")
                {
                    eventLog.Action = null;
                }

                eventLog.TrendId_FK = (short)id;
                eventRepository.Add(eventLog);
                eventRepository.Save();

                return RedirectToAction("Add", new { id = eventLog.TrendId_FK });
            }

            eventLog.TrendId_FK = (short)id;

            return View(eventLog);
        }

and here is the Add.aspx page

<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<EMIAQToolkit.EventLog>" %>

<%@ Import Namespace="System.Collections.Generic"%>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>


    
<!DOCTYPE html>

<html>
<head id="Head1" runat="server">
    <title>Add Event</title>
    <link href="/content/styling.css" rel="stylesheet" type="text/css" />    
</head>
<body>

    <form id="Form1" runat="server">
    <ext:ResourceManager ID="ResourceManager1" runat="server" />

      <ext:FormPanel 
            ID="UserForm" 
            runat="server"
            Frame="true"
            LabelAlign="Right"
            Title="Add Event -- Alert message and notify date are optional"
            Width="500"
            >
            <Items>
                <ext:DateField ID="Datefield1" runat="server"
                    FieldLabel="Date"
                    Name="Time"
                    AllowBlank="false"
                    Vtype="Date"
                    AnchorHorizontal="100%"
                    />
                
                <ext:TextField ID="TextField1" runat="server"
                    FieldLabel="Description"
                    Name="Description"
                    AllowBlank="false"
                    AnchorHorizontal="100%"
                    />
                
                <ext:ComboBox ID="ComboBox1" runat="server"
                            FieldLabel="Set Alert"
                            Name="Action"
                            TypeAhead="true"
                            SelectOnTab="true">
                            <Items>
                                <ext:ListItem Text="Shade" />
                                <ext:ListItem Text="Mostly Shady" />
                                <ext:ListItem Text="Sun or Shade" />
                                <ext:ListItem Text="Mostly Sunny" />
                                <ext:ListItem Text="Sunny" />
                            </Items>
                        </ext:ComboBox>
                  <ext:DateField ID="Datefield2" runat="server"
                    FieldLabel="Notify Date"
                    Name="NotifyTime"
                    AllowBlank="true"
                    Vtype="Date"
                    AnchorHorizontal="100%"
                    />
            </Items>            
            
            <Buttons>
                <ext:Button ID="Button1" 
                    runat="server"
                    Text="Save"
                    Icon="Disk" FormBind="true">
                        <Listeners>
                            <Click Handler="this.el.up('form').dom.submit();" />
                        </Listeners>
                    </ext:Button>
                <ext:Button ID="Button2" 
                    runat="server"
                    Text="Reset">
                    <Listeners>
                        <Click Handler="#{UserForm}.getForm().reset();" />
                    </Listeners>
                </ext:Button>
            </Buttons>
        </ext:FormPanel>
    </form>
</body>
</html>

I've set FormBind="true" for Button1 in order to make it where the button isn't enabled whenever the form is invalid but the button never becomes enabled when the form becomes valid. Am I using this property correctly?

Also, in IE in debugging mode, when I click on the calender button to input a value for the Date or for the Notify date there is an error:
Error: Object doesn't support property or method 'Date'

Thread: FormPanel with strongly-typed aspx view

Thread Tools

Search Thread

Display

FormPanel with strongly-typed aspx view

Similar Threads

MVC Add Controller / Strongly Typed View Bug

MVC and typed ViewUserControl<> inside another typed model aspx

Ext.NET [MVC] Strongly Typed Ext.NET component

[CLOSED] httpproxy/AjaxStoreResult in Strongly typed View

[CLOSED] Store and Strongly Typed DataSet

Tags for this Thread

Posting Permissions

Sitemap

Downloads

Resources

Thread: FormPanel with strongly-typed aspx view

FormPanel with strongly-typed aspx view

Similar Threads

Tags for this Thread

Posting Permissions

Sitemap

Downloads

Resources

Stay connected with us