[CLOSED] Getting "BADRESPONSE Unexpected token '<'" error while trying to bind html value to ext:ModelField .....

[iansriley]

Ext.NET Pro ver. 2.5.0.30649
VS 2010 Framework 4.0
Browser: Google Chrome ver.40.0.2214.111
Device: Ipad

Error message: BADRESPONSE Unexpected token '<'
Error screenshot: Attached.


[DB]


CREATE TABLE [dbo].[gsAnnounce](
[gsAnnounceID] [int] IDENTITY(1,1) NOT NULL,
[subject] [varchar](100) NULL,
[announce] [varchar](8000) NULL
)


GO


insert into gsAnnounce ([subject],[announce]) values('Test Subject-1', '<div>TESTING < /br> 123</div>')
insert into gsAnnounce ([subject],[announce]) values('Test Subject-2', 'Announcements<div> <ul> </ul> </div>')


[/DB]

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="HomeIpad.aspx.vb" Inherits="HomePage.HomeIpad" %><%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

 <asp:SqlDataSource ID="SqlDataSourceAnnouncement" runat="server" SelectCommand="select gsAnnounceID as ID ,Subject ,Announce as Message From gsAnnounce"
        SelectCommandType="Text">
        <UpdateParameters>
            <asp:Parameter Name="ID" Type="Int32" />
            <asp:Parameter Name="Viewed" Type="Boolean" />
        </UpdateParameters>
    </asp:SqlDataSource>
    <ext:Store runat="server" ID="StoreAnnouncement" DataSourceID="SqlDataSourceAnnouncement"
        AutoLoad="true">
        <Model>
            <ext:Model runat="server" IDProperty="ID">
                <Fields>
                    <ext:ModelField Name="ID" Type="Int" />
                    <ext:ModelField Name="Subject" Type="String" />
                    <ext:ModelField Name="Message" Type="String" />
                </Fields>
            </ext:Model>
        </Model>
    </ext:Store>


 <ext:GridPanel ID="GridPanelAnnouncement" runat="server" AutoWidth="true" StyleSpec="padding:4px 4px 4px 2px;"
                                        Border="true" StoreID="StoreAnnouncement" AnimCollapse="true" Title="Announcements"
                                        HideHeaders="true">
                                        <TopBar>
                                            <ext:Toolbar ID="ToolbarAnnouncement" runat="server">
                                                <Items>
                                                    <ext:Button runat="server" ID="ToolbarButtonAnnouncementNew" Icon="PageWhiteAdd">
                                                        <Listeners>
                                                            <Click Fn="newAnnouncementItem" />
                                                        </Listeners>
                                                        <ToolTips>
                                                            <ext:ToolTip ID="ToolTipAnnouncement8" runat="server" Html="New Announcement" />
                                                        </ToolTips>
                                                    </ext:Button>
                                                    <ext:ToolbarFill>
                                                    </ext:ToolbarFill>
                                                    <ext:Button runat="server" ID="ToolbarAnnouncementRefresh" Icon="PageWhiteRefresh">
                                                        <Listeners>
                                                            <Click Handler="#{StoreAnnouncement}.reload();" />
                                                        </Listeners>
                                                        <ToolTips>
                                                            <ext:ToolTip ID="ToolTipAnnouncement1" runat="server" Html="Check Announcements" />
                                                        </ToolTips>
                                                    </ext:Button>
                                                </Items>
                                            </ext:Toolbar>
                                        </TopBar>
                                        <ColumnModel>
                                            <Columns>
                                                <ext:ImageCommandColumn ID="Commands" runat="server" Flex="1">
                                                    <Commands>
                                                        <ext:ImageCommand CommandName="view" Icon="PageWhiteMagnify" Text="">
                                                            <ToolTip Text="View in Full Page" />
                                                        </ext:ImageCommand>
                                                        <ext:ImageCommand CommandName="edit" Icon="PageWhiteEdit" Text="">
                                                            <ToolTip Text="Edit" />
                                                        </ext:ImageCommand>
                                                        <ext:ImageCommand CommandName="moveup" Icon="PageWhiteGet" Text="">
                                                            <ToolTip Text="Move Up" />
                                                        </ext:ImageCommand>
                                                        <ext:ImageCommand CommandName="movedown" Icon="PageWhitePut" Text="">
                                                            <ToolTip Text="Move Down" />
                                                        </ext:ImageCommand>
                                                        <ext:ImageCommand CommandName="delete" Icon="PageWhiteDelete" Text="">
                                                            <ToolTip Text="Delete Announcement" />
                                                        </ext:ImageCommand>
                                                    </Commands>
                                                    <Listeners>
                                                        <Command Handler="handleAnnouncementCommand(command, record.data.ID);" />
                                                    </Listeners>
                                                </ext:ImageCommandColumn>
                                            </Columns>
                                        </ColumnModel>
                                        <View>
                                            <ext:GridView ID="GridView1" runat="server" LoadingText="Loading Announcements..." />
                                        </View>
                                        <Features>
                                            <ext:RowBody ID="RowBody1" runat="server">
                                                <GetAdditionalData Handler="orig.rowBody = '<div class=announcement-item>' + data.Message + '</div>';" />
                                            </ext:RowBody>
                                        </Features>
                                        <Loader runat="server" Mode="Frame">
                                            <LoadMask ShowMask="true" Msg="Loading Announcements..." />
                                        </Loader>
                                         <Listeners>
                                          <BeforeRender Handler="this.height=document.form1.offsetHeight-70;"></BeforeRender>
                                        </Listeners>
                                    </ext:GridPanel>

[Daniil]

Hi @iansriley,

Please remove this:

<Loader runat="server" Mode="Frame">
    <LoadMask ShowMask="true" Msg="Loading Announcements..." />
</Loader>

A Loader is not supposed to be used with a GridPanel.

Please clarify after what action are you getting a failing request? After clicking the ToolbarButtonAnnouncementNew Button? Or does it happen just after the initial page load?

Ideally, please provide a full standalone test case. It should be reproducible without an SqlDataSource.

P.S. Please wrap the database related code in [CODE] tags.

[iansriley]

Hi Daniil,

I think you are getting my issue but for more clarity:

This same code is working fine on Safari browser so i don't think there is issue with <Loader ....

And if i replace this html text in my DB table by plan text this is working fine even on Google Chrome.

Not Working
insert into gsAnnounce ([subject],[announce]) values('Test Subject-1', '<div>TESTING < /br> 123</div>')
insert into gsAnnounce ([subject],[announce]) values('Test Subject-2', 'Announcements<div> <ul> </ul> </div>')

Working
insert into gsAnnounce ([subject],[announce]) values('Test Subject-1', 'TESTING 123')
insert into gsAnnounce ([subject],[announce]) values('Test Subject-2', 'Announcements')


Moreover i removed reference of store from grid in my code, so now its binding data only to store not to grid, but still facing same error.

So please check this at your end by some changes, if required, and let us know if ext.net have any solution for this.

My requirement is to get data with special char like '<, >, %,' etc. from DB table and bind that to store and that should support on all browser.

[geoffrey.mcgill]

Hello,

We tried to run your sample, but you'll have to reconfigure to use a local object for the data source. Not a SQL database.

Almost all the samples in the Examples Explorer use a local collection of objects for the data source. Please combine one of those samples with your requirements.

Once you have it all running in one file, and reproducing the problem, please post a follow up with the sample wrapped in [CODE] tags.

[iansriley]

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="HomeIpad.aspx.vb" Inherits="HomePage.HomeIpad" %><%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>


    <ext:Store runat="server" ID="StoreAnnouncement"
        AutoLoad="true">
        <Model>
            <ext:Model runat="server" IDProperty="ID">
                <Fields>
                    <ext:ModelField Name="ID" Type="Int" />
                    <ext:ModelField Name="Subject" Type="String" />
                    <ext:ModelField Name="Message" Type="String" />
                </Fields>
            </ext:Model>
        </Model>
    </ext:Store>


 <ext:GridPanel ID="GridPanelAnnouncement" runat="server" AutoWidth="true" StyleSpec="padding:4px 4px 4px 2px;"
                                        Border="true" StoreID="StoreAnnouncement" AnimCollapse="true" Title="Announcements"
                                        HideHeaders="true">
                                        <TopBar>
                                            <ext:Toolbar ID="ToolbarAnnouncement" runat="server">
                                                <Items>
                                                    <ext:Button runat="server" ID="ToolbarButtonAnnouncementNew" Icon="PageWhiteAdd">
                                                        <Listeners>
                                                            <Click Fn="newAnnouncementItem" />
                                                        </Listeners>
                                                        <ToolTips>
                                                            <ext:ToolTip ID="ToolTipAnnouncement8" runat="server" Html="New Announcement" />
                                                        </ToolTips>
                                                    </ext:Button>
                                                    <ext:ToolbarFill>
                                                    </ext:ToolbarFill>
                                                    <ext:Button runat="server" ID="ToolbarAnnouncementRefresh" Icon="PageWhiteRefresh">
                                                        <Listeners>
                                                            <Click Handler="#{StoreAnnouncement}.reload();" />
                                                        </Listeners>
                                                        <ToolTips>
                                                            <ext:ToolTip ID="ToolTipAnnouncement1" runat="server" Html="Check Announcements" />
                                                        </ToolTips>
                                                    </ext:Button>
                                                </Items>
                                            </ext:Toolbar>
                                        </TopBar>
                                        <ColumnModel>
                                            <Columns>
                                                <ext:ImageCommandColumn ID="Commands" runat="server" Flex="1">
                                                    <Commands>
                                                        <ext:ImageCommand CommandName="view" Icon="PageWhiteMagnify" Text="">
                                                            <ToolTip Text="View in Full Page" />
                                                        </ext:ImageCommand>
                                                        <ext:ImageCommand CommandName="edit" Icon="PageWhiteEdit" Text="">
                                                            <ToolTip Text="Edit" />
                                                        </ext:ImageCommand>
                                                        <ext:ImageCommand CommandName="moveup" Icon="PageWhiteGet" Text="">
                                                            <ToolTip Text="Move Up" />
                                                        </ext:ImageCommand>
                                                        <ext:ImageCommand CommandName="movedown" Icon="PageWhitePut" Text="">
                                                            <ToolTip Text="Move Down" />
                                                        </ext:ImageCommand>
                                                        <ext:ImageCommand CommandName="delete" Icon="PageWhiteDelete" Text="">
                                                            <ToolTip Text="Delete Announcement" />
                                                        </ext:ImageCommand>
                                                    </Commands>
                                                    <Listeners>
                                                        <Command Handler="handleAnnouncementCommand(command, record.data.ID);" />
                                                    </Listeners>
                                                </ext:ImageCommandColumn>
                                            </Columns>
                                        </ColumnModel>
                                        <View>
                                            <ext:GridView ID="GridView1" runat="server" LoadingText="Loading Announcements..." />
                                        </View>
                                        <Features>
                                            <ext:RowBody ID="RowBody1" runat="server">
                                                <GetAdditionalData Handler="orig.rowBody = '<div class=announcement-item>' + data.Message + '</div>';" />
                                            </ext:RowBody>
                                        </Features>
                                        <Loader runat="server" Mode="Frame">
                                            <LoadMask ShowMask="true" Msg="Loading Announcements..." />
                                        </Loader>
                                         <Listeners>
                                          <BeforeRender Handler="this.height=document.form1.offsetHeight-70;"></BeforeRender>
                                        </Listeners>
                                    </ext:GridPanel>

Dim dt as New DataTable()
dt.columns.Add("Id")
dt.columns.Add("Subject")
dt.columns.Add("Message")
Dim dr as DataRow()
dr =dt.NewRow()
dr("Id") = 1
dr("Subject") =" test"
dr("Message") ="<div> testing </div>"
dt.Rows.Add(dr )
StoreAnnouncement.DataSource= dt
StoreAnnouncement.DataBind()

This is little difficult to write down all scenarios here.., Sound like you might have understood the scenario ,Please provide the solution as how to encode the Html Content in the Store Model Field

The Major issue which is coming Only in "iPad" Chrome Browser, Except this is working in all browsers in windows.

This is happening when i Use "{StoreAnnouncement}.reload()" on the button or any other actions ..
, Is there any way to encode the Html Content of the store model field?


Appreciate your quick response on this thread.

Thanks in Advance.

[Daniil]

Please clarify can you reproduce the issue with this test case?

Example

<%@ Page Language="C#" %>

<script runat="server">
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!X.IsAjaxRequest)
        {
            this.DataBind();
        }
    }

    protected void Store1_ReadData(object sender, StoreReadDataEventArgs e)
    {
        this.DataBind();
    }

    public void DataBind()
    {
        this.Store1.DataSource = new object[] 
        { 
            new object[] { "test", "test" },
            new object[] { "<div>Some Div Content</div>", "test" },
            new object[] { "test", "test" }
        };
    }
</script>

<!DOCTYPE html>

<html>
<head runat="server">
    <title>Ext.NET v2 Example</title>
</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server" />

        <ext:GridPanel runat="server">
            <Store>
                <ext:Store ID="Store1" runat="server" OnReadData="Store1_ReadData">
                    <Model>
                        <ext:Model runat="server">
                            <Fields>
                                <ext:ModelField Name="test1" />
                                <ext:ModelField Name="test2" />
                            </Fields>
                        </ext:Model>
                    </Model>
                </ext:Store>
            </Store>
            <ColumnModel runat="server">
                <Columns>
                    <ext:Column runat="server" Text="Test 1" DataIndex="test1" />
                    <ext:Column runat="server" Text="Test 2" DataIndex="test2" />
                </Columns>
            </ColumnModel>
        </ext:GridPanel>

        <ext:Button runat="server" Text="Reload" Handler="App.Store1.reload();" />
    </form>
</body>
</html>

As for encoding data on the ModelField level, you could try a Convert:

<ext:ModelField Name="test1">
    <Convert Handler="return Ext.String.htmlEncode(value);" />
</ext:ModelField>