如何使用 Kendo UI 将参数传递给 HttpHandler?

发布于 2025-01-03 10:47:49 字数 3244 浏览 5 评论 0原文

我非常熟悉 jQuery AJAX 并且一直使用它。 Kendo UI 构建在 jQuery 之上并使用 AJAX。与 & 接口使用 jQuery 将参数传递给 HttpHandler 很容易,您只需执行以下操作:

使用 JQUERY AJAX:

$.ajax({
    complete: self.onComplete,
    data: { SiteId: 777 },  // <--- this gets appended to the post
    dataType: 'json',
    error: self.onError,
    success: self.onSuccess,
    url: self.url
});

我的问题:
我正在尝试找到 data 的 KendoUI 等效调用(见上文)。

  • 虽然网格确实填充了从 HttpHandler 传回给我的数据,但
  • 参数并未被提供给 HttpHandler(见下文)

KENDO 代码看起来像:

    <script type="text/javascript">

        $(document).ready(function () {

            var dataSource = new kendo.data.DataSource({
                transport:
                    {
                        read: {
                            url: "Handlers/Attempt1Synch.ashx",
                            dataType: "json",
                            contentType: "application/json; charset=utf-8",
                            type: "POST",
                            data: { SiteId: 777 }
                        }
//                        parameterMap: function (data, operation) {
//                            return JSON.stringify(data);
//                        }
                    },
                schema: { data: "People" }
            });

            $("#grid").kendoGrid({
                height: 360,
                width: 500,
                dataSource: dataSource,
                groupable: true,
                scrollable: true,
                sortable: true,
                pageable: true,
                columns:
                [{
                    field: "Id",
                    width: 0
                },
                 {
                     field: "FirstName",
                     width: 90,
                     title: "First Name"
                 },
                {
                    field: "LastName",
                    width: 90,
                    title: "Last Name"
                },
                {
                    width: 100,
                    field: "City"
                },
                {
                    field: "Title"
                },
                {
                    field: "BirthDate",
                    title: "Birth Date",
                    template: '#= kendo.toString(BirthDate,"dd MMMM yyyy") #'
                },
                {
                    width: 50,
                    field: "Age"
                }]
            });
        });
    </script>

    <div id="grid">
    </div>

我的 HTTP 处理程序看起来喜欢:

public class Attempt1Synch : IHttpHandler
{
    public void ProcessRequest(HttpContext context)
    {
        var siteId = Convert.ToInt32(context.Request["SiteId"]);

        var serializer = new JavaScriptSerializer();
        var response = mock(siteId);

        context.Response.ContentType = "text/json";
        context.Response.Write(serializer.Serialize(response));
        context.Response.End();
    }

    public bool IsReusable
    {
        get
        {
            return false;
        }
    }
}

I am very familiar with jQuery AJAX and use it all the time. Kendo UI is built on top of jQuery and its' use of AJAX. Interfacing with & passing parameters to an HttpHandler is easy using jQuery, you simply do the following:

USING JQUERY AJAX:

$.ajax({
    complete: self.onComplete,
    data: { SiteId: 777 },  // <--- this gets appended to the post
    dataType: 'json',
    error: self.onError,
    success: self.onSuccess,
    url: self.url
});

MY ISSUE:
I am trying to find the KendoUI equivolent-call for data (above).

  • While the grid DOES populate with data passed back to me from the HttpHandler
  • The parameters are not being fed to the HttpHandler (see below)

THE KENDO CODE LOOKS LIKE:

    <script type="text/javascript">

        $(document).ready(function () {

            var dataSource = new kendo.data.DataSource({
                transport:
                    {
                        read: {
                            url: "Handlers/Attempt1Synch.ashx",
                            dataType: "json",
                            contentType: "application/json; charset=utf-8",
                            type: "POST",
                            data: { SiteId: 777 }
                        }
//                        parameterMap: function (data, operation) {
//                            return JSON.stringify(data);
//                        }
                    },
                schema: { data: "People" }
            });

            $("#grid").kendoGrid({
                height: 360,
                width: 500,
                dataSource: dataSource,
                groupable: true,
                scrollable: true,
                sortable: true,
                pageable: true,
                columns:
                [{
                    field: "Id",
                    width: 0
                },
                 {
                     field: "FirstName",
                     width: 90,
                     title: "First Name"
                 },
                {
                    field: "LastName",
                    width: 90,
                    title: "Last Name"
                },
                {
                    width: 100,
                    field: "City"
                },
                {
                    field: "Title"
                },
                {
                    field: "BirthDate",
                    title: "Birth Date",
                    template: '#= kendo.toString(BirthDate,"dd MMMM yyyy") #'
                },
                {
                    width: 50,
                    field: "Age"
                }]
            });
        });
    </script>

    <div id="grid">
    </div>

MY HTTP HANDLER LOOKS LIKE:

public class Attempt1Synch : IHttpHandler
{
    public void ProcessRequest(HttpContext context)
    {
        var siteId = Convert.ToInt32(context.Request["SiteId"]);

        var serializer = new JavaScriptSerializer();
        var response = mock(siteId);

        context.Response.ContentType = "text/json";
        context.Response.Write(serializer.Serialize(response));
        context.Response.End();
    }

    public bool IsReusable
    {
        get
        {
            return false;
        }
    }
}

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

誰認得朕 2025-01-10 10:47:49

我发现这是他们之前版本中的一个已知问题。 最新版本修复了这个问题。因此,您必须首先下载最新版本的 KendoUI,如下所示:

V1 2011 SP1(版本 2011.3.1407)- 2012 年 2 月
- 请参阅“OData 不提交用户定义的参数”

但是,上面的代码存在问题。该代码应该完全省略POST命令。

新数据源应如下所示:
只有 DataSource 对象不正确。新的应该是这样的——

var dataSource = new kendo.data.DataSource({                 
    transport:                     
    {                         
        read: 
        {
            url: "Handlers/Attempt1Synch.ashx",
            dataType: "json",
            contentType: "application/json; charset=utf-8",
            data: { SiteId: 777 }
        },
        schema: { data: "People" }             
});

I have come to find out that this was a known issue in their previous build. The newest release fixes this. As such, you must FIRST download the latest version of KendoUI as shown below:

V1 2011 SP1 (version 2011.3.1407) - February 2012
- see 'OData does not submit user defined parameters'

However, there is also an issue with the code above. The code should omit the POST command altogether.

THE NEW DATA SOURCE SHOULD LOOK LIKE:
Only the DataSource object is incorrect. The new one should look like this -

var dataSource = new kendo.data.DataSource({                 
    transport:                     
    {                         
        read: 
        {
            url: "Handlers/Attempt1Synch.ashx",
            dataType: "json",
            contentType: "application/json; charset=utf-8",
            data: { SiteId: 777 }
        },
        schema: { data: "People" }             
});
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文