如何防止 Syncfusion ASP.Net Webforms Grid 中的过滤器文本框发送服务器端请求?
How to prevent a filter textbox in Syncfusion ASP.Net Webforms Grid from sending server-side requests?
我在 ASP.Net Webforms 4.0 网站中使用来自 Syncfusion 的最新版本的 WebForms Grid。
绑定是使用 WebMethod 完成的,即启用 ajax 的 Web 服务。此网格的标记如下。
问题是当我过滤 Product Name
列并开始在 Product Name
的过滤框中输入内容时,网格向服务器发送请求以匹配每个输入字符的产品名称。我不希望这样用户就可以在过滤器文本框中输入内容,而不需要任何服务器端请求减慢用户的输入速度。
问题:如何防止 Product Name
的过滤器文本框在用户输入文本框时发送服务器请求?我尝试在他们的文档中搜索一些网格 属性 来解决这个问题,但找不到。
来自 Syncfusion 的 Webforms 网格标记
<ej:Grid ID="Grid1" runat="server" AllowFiltering="True" AllowPaging="True" AllowSorting="True" >
<DataManager Adaptor="WebMethodAdaptor" URL="WebService1.asmx/GetProducts" />
<Columns>
<ej:Column Field="ProductId" Width="200" HeaderText="Product ID" AllowFiltering="true"></ej:Column>
<ej:Column Field="ProductName" Width="200" HeaderText="Product Name" AllowFiltering="true" ></ej:Column>
<ej:Column Field="UnitPrice" Width="200" HeaderText="Unit Price" Format="{0:c}" AllowFiltering="true"></ej:Column>
<ej:Column Field="UnitsInStock" Width="200" HeaderText="Units in Stock" AllowFiltering="true"></ej:Column>
</Columns>
<PageSettings Template=""></PageSettings>
<RowDropSettings DropTargetID="" DropMapper=""></RowDropSettings>
<ScrollSettings EnableTouchScroll="False"></ScrollSettings>
<FilterSettings FilterType="Menu" EnableCaseSensitivity="false"></FilterSettings>
</ej:Grid>
我们已经分析了您的查询,并通过使用 grid 的 DataBound 事件和 ejDataManger 实现了您的要求。因为我们已经将代码后面的全部数据绑定到 ejDataManager 并将其分配给 ejAutocomplete 的数据源 属性。现在,当我们专注于自动完成时,我们已将数据绑定到自动完成数据源,如果我们选择任何数据,它将阻止 POST。由于整个数据已作为本地数据检索。
请参考下面的代码示例,
[Default.aspx]
<ej:Grid ID="Grid1" runat="server" AllowFiltering="True" AllowPaging="True"…
<ClientSideEvents DataBound="databound"/>
…
<script type="text/javascript">
var b;
function databound(args) {
setTimeout(function () {
var dataManager = ej.DataManager({ url: "WebService1.asmx/HelloWorld", offline: true, adaptor: "UrlAdaptor" });
var promise = dataManager.executeQuery(new ej.Query());
promise.done(function (e) {
var a =
$("#MainContent_Grid1_acString").ejAutocomplete("instance");
b = e.result;
});
promise.fail(function (s) {
console.log(s)
})
$("#MainContent_Grid1_acString").ejAutocomplete({ focusIn: "change" });
}, 600);
}
function change(args) {
var a = $("#MainContent_Grid1_acString").ejAutocomplete("instance");
a.model.dataSource = b; //Passed the data as local when we focusIn the autocomplete
}
</script>
[WebService1.asmx.cs]
[WebMethod]
public IEnumerable HelloWorld()
{
SqlConnection myConnection = new SqlConnection(ConfigurationManager.ConnectionStrings["NORTHWNDConnectionString"].ToString());
…
IEnumerable order = (from DataRow row in dt.Rows
select new Products
{
ProductId = Convert.ToInt32(row["ProductId"]),
ProductName = row["ProductName"].ToString(),
UnitPrice = Convert.ToDouble(row["UnitPrice"]),
UnitsInStock = Convert.ToInt32(row["UnitsInStock"])
}).ToList();
return order;
}
在上面的代码中,我们在代码隐藏中初始化了一个方法,return结果单独将数据绑定到自动完成。
我在 ASP.Net Webforms 4.0 网站中使用来自 Syncfusion 的最新版本的 WebForms Grid。 绑定是使用 WebMethod 完成的,即启用 ajax 的 Web 服务。此网格的标记如下。
问题是当我过滤 Product Name
列并开始在 Product Name
的过滤框中输入内容时,网格向服务器发送请求以匹配每个输入字符的产品名称。我不希望这样用户就可以在过滤器文本框中输入内容,而不需要任何服务器端请求减慢用户的输入速度。
问题:如何防止 Product Name
的过滤器文本框在用户输入文本框时发送服务器请求?我尝试在他们的文档中搜索一些网格 属性 来解决这个问题,但找不到。
来自 Syncfusion 的 Webforms 网格标记
<ej:Grid ID="Grid1" runat="server" AllowFiltering="True" AllowPaging="True" AllowSorting="True" >
<DataManager Adaptor="WebMethodAdaptor" URL="WebService1.asmx/GetProducts" />
<Columns>
<ej:Column Field="ProductId" Width="200" HeaderText="Product ID" AllowFiltering="true"></ej:Column>
<ej:Column Field="ProductName" Width="200" HeaderText="Product Name" AllowFiltering="true" ></ej:Column>
<ej:Column Field="UnitPrice" Width="200" HeaderText="Unit Price" Format="{0:c}" AllowFiltering="true"></ej:Column>
<ej:Column Field="UnitsInStock" Width="200" HeaderText="Units in Stock" AllowFiltering="true"></ej:Column>
</Columns>
<PageSettings Template=""></PageSettings>
<RowDropSettings DropTargetID="" DropMapper=""></RowDropSettings>
<ScrollSettings EnableTouchScroll="False"></ScrollSettings>
<FilterSettings FilterType="Menu" EnableCaseSensitivity="false"></FilterSettings>
</ej:Grid>
我们已经分析了您的查询,并通过使用 grid 的 DataBound 事件和 ejDataManger 实现了您的要求。因为我们已经将代码后面的全部数据绑定到 ejDataManager 并将其分配给 ejAutocomplete 的数据源 属性。现在,当我们专注于自动完成时,我们已将数据绑定到自动完成数据源,如果我们选择任何数据,它将阻止 POST。由于整个数据已作为本地数据检索。
请参考下面的代码示例,
[Default.aspx]
<ej:Grid ID="Grid1" runat="server" AllowFiltering="True" AllowPaging="True"…
<ClientSideEvents DataBound="databound"/>
…
<script type="text/javascript">
var b;
function databound(args) {
setTimeout(function () {
var dataManager = ej.DataManager({ url: "WebService1.asmx/HelloWorld", offline: true, adaptor: "UrlAdaptor" });
var promise = dataManager.executeQuery(new ej.Query());
promise.done(function (e) {
var a =
$("#MainContent_Grid1_acString").ejAutocomplete("instance");
b = e.result;
});
promise.fail(function (s) {
console.log(s)
})
$("#MainContent_Grid1_acString").ejAutocomplete({ focusIn: "change" });
}, 600);
}
function change(args) {
var a = $("#MainContent_Grid1_acString").ejAutocomplete("instance");
a.model.dataSource = b; //Passed the data as local when we focusIn the autocomplete
}
</script>
[WebService1.asmx.cs]
[WebMethod]
public IEnumerable HelloWorld()
{
SqlConnection myConnection = new SqlConnection(ConfigurationManager.ConnectionStrings["NORTHWNDConnectionString"].ToString());
…
IEnumerable order = (from DataRow row in dt.Rows
select new Products
{
ProductId = Convert.ToInt32(row["ProductId"]),
ProductName = row["ProductName"].ToString(),
UnitPrice = Convert.ToDouble(row["UnitPrice"]),
UnitsInStock = Convert.ToInt32(row["UnitsInStock"])
}).ToList();
return order;
}
在上面的代码中,我们在代码隐藏中初始化了一个方法,return结果单独将数据绑定到自动完成。