搜索按钮点击后剑道UI电网不重新绑定 [英] Kendo Ui Grid not rebinding after search button click
本文介绍了搜索按钮点击后剑道UI电网不重新绑定的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有困难，那里的剑道UI格不会与新的结果重新绑定搜索按钮后click.Please让我知道我能做到这一点。谢谢
目前的GetList将正确返回数据然而KendoUi格不会与新的结果重新绑定。
.cshtml
＆LT; DIV ID =搜索＆GT; ＆LT; DIV＆GT;
＆LT; DIV CLASS =searchOption＆GT;
@ Html.LabelFor（型号=＆GT; model.HRN）
@ Html.EditorFor（型号=＆GT; model.HRN）
＆LT; / DIV＆GT; ＆LT; / DIV＆GT; ＆LT; DIV＆GT; ＆LT; DIV CLASS =在smallBox＆GT;
＆LT;输入类型=按钮ID =btnSearch的风格=高度：32PX; FONT-SIZE：14px的;背景颜色：＃3399FF级=K-按钮称号=搜索值=搜索 /＆GT; ＆LT; / DIV＆GT; ＆LT; / DIV＆GT;
＆LT; DIV＆GT;
＆LT; DIV CLASS =searchOption＆GT;
@ Html.LabelFor（型号=＆GT; model.FamilyName）
@ Html.EditorFor（型号=＆GT; model.FamilyName）
＆LT; / DIV＆GT; ＆LT; / DIV＆GT; ＆LT; DIV＆GT;
＆LT; DIV CLASS =searchOption＆GT;
@ Html.LabelFor（型号=＆GT; model.GivenName）
@ Html.EditorFor（型号=＆GT; model.GivenName） ＆LT; / DIV＆GT; ＆LT; / DIV＆GT;
＆LT; DIV＆GT;
＆LT; DIV CLASS =searchOption＆GT;
@ Html.LabelFor（型号=＆GT; model.Priority）
@ Html.EditorFor（型号=＆GT; model.Priority）
＆LT; / DIV＆GT; ＆LT; / DIV＆GT;＆LT; / DIV＆GT;@（Html.Kendo（）网格和LT; PWeb_App.ViewModels.ResultModel＆GT;（） 。名称（结果）
.HtmlAttributes（新{@style =对齐：中心; FONT-SIZE：10px的; WIDTH：985px}）
.Events（EV = GT; ev.Change（的onChange））
.Columns（列=＆GT;
{
columns.Bound（p值=＆GT; p.GivenName）.WIDTH（90）;
columns.Bound（p值=＆GT; p.FamilyName）.WIDTH（90）;
columns.Bound（p值=＆GT; p.Community）.WIDTH（130）; }）
.ToolBar（栏= GT; toolbar.Save（））
.Editable（编辑= GT; editable.Mode（GridEditMode.InCell））
.Sortable（） .Pageable（分页=＆GT;分页
。输入（假）
.Numeric（真） 。previousNext（真）
.PageSizes（新INT [] {5，10，25，50}）
.REFRESH（假） ） .Selectable（）
.Scrollable（）
.ColumnMenu（C =＆GT; c.Columns（假））
.DataSource（数据源=＆GT;数据源 阿贾克斯（）//使用Ajax，而不是服务器绑定绑定
.PageSize（10）
.ServerOperation（真）
。型号（型号= GT;
{
model.Id（p值=＆GT; p.Pid）;
model.Field（P =＆GT; p.FamilyName）.Editable（假）;
model.Field（P =＆GT; p.GivenName）.Editable（假）; }）
.Read（读=方式＆gt; read.Action（的GetData，详细信息）类型（HttpVerbs.Get））
.Update（编辑，详细资料） ） ）
＆LT;脚本类型=文/ JavaScript的＆GT;
$（文件）。就绪（函数（）{$（'＃btnConsumerSearch'）。点击（函数（五）{ VAR社区= $（＃共同体）VAL（）。
。VAR familyName = $（＃FamilyName）VAL（）;
VAR给定名称= $（＃给定名称）VAL（）。
$阿贾克斯（{
输入：POST，
完成：功能（E）{
$（＃结果）的数据（kendoGrid）dataSource.read（）;
}， 网址：@（Url.Content（〜/细节/的GetData /）），
数据：{ 社区：社区，
FamilyName：familyName，
给定名称：给定名称
}， 成功：函数（）{
$（＃btnSearch）removeAttr（禁用）。 } }）;
$（＃btnSearch），ATTR（禁用，禁用）。
}）;}）;
＆LT; / SCRIPT＆GT;
控制器：
//下面的code将返回数据如预期，不过剑道网格不具有下列code的结果刷新新的结果：
公众的ActionResult的GetData（[DataSourceRequest] DataSourceRequest要求，SearchCriteria模型）
{
DataTable的结果=的GetList（模型）;
Response.Cache.SetCacheability（HttpCacheability.NoCache）;
返回JSON（result.ToDataSourceResult（要求），JsonRequestBehavior.AllowGet）;
}
///＆LT;总结＆gt;
///从客户端获得表中的所有可用的列表，并返回数据表使用
///＆LT; /总结＆gt;
///＆LT;＆回报GT;＆LT; /回报＆GT;
私人的DataTable的GetList（SearchCriteria型号，串ReferralListID）
{
使用（PEntities上下文=新PEntities（））
{
字符串的ConnectionString =（context.Connection为EntityConnection）.StoreConnection.ConnectionString;
SqlConnectionStringBuilder建设者=新SqlConnectionStringBuilder（的ConnectionString）;
builder.ConnectTimeout = 2500;
使用（SqlConnection的CON =新的SqlConnection（builder.ConnectionString））
{
使用（SqlDataAdapter的适配器=新SqlDataAdapter的（））
{
使用（CMD的SqlCommand =新的SqlCommand（spListResultsCON））
{ cmd.CommandType = CommandType.StoredProcedure; cmd.Parameters.Add（paramCommunity，SqlDbType.VarChar，100）.value的=！String.IsNullOrEmpty（model.Community）？ （对象）model.Community：DBNull.Value;
cmd.Parameters.Add（paramGivenName，SqlDbType.VarChar，100）.value的=！String.IsNullOrEmpty（model.GivenName）？ （对象）model.GivenName：DBNull.Value;
cmd.Parameters.Add（paramFamilyName，SqlDbType.VarChar，100）.value的=！String.IsNullOrEmpty（model.FamilyName）？ （对象）model.FamilyName：DBNull.Value;
cmd.Parameters.Add（paramPriority，SqlDbType.VarChar，10）.value的=！String.IsNullOrEmpty（model.Priority）？ （对象）model.Priority：DBNull.Value; adapter.SelectCommand = CMD;
cmd.CommandTimeout = 0;
DataTable的DT =新的DataTable（）;
adapter.Fill（DT）;
返回DT;
}
}
}
} }
解决方案
试试这个样子，
鉴于这样的在你的电网读法
.Read（读=方式＆gt; read.Action（的GetData，详细信息）的数据（的GetData））
您的按钮应该是提交键入
＆LT;输入类型=提交ID =btnSearch的风格=高度：32PX; FONT-SIZE：14px的;背景颜色：＃3399FF级=K-按钮称号=搜索值=搜索/＆GT;
脚本
函数的GetData（）{
返回{
HRN：$（'＃HRN）VAL（）
FamilyName：$（'＃FamilyName）VAL（）
给定名称：$（'＃给定名称）VAL（）
优先级：$（'＃优先）VAL（）。 };
}$（文件）。就绪（函数（）{
$（＃btnSearch）。点击（函数（五）{
$（＃结果）的数据（kendoGrid）dataSource.read（）;
。$（＃结果）的数据（kendoGrid），刷新（）;
亦即preventDefault（）;
}）;
}）;
控制器
公众的ActionResult的GetData（[DataSourceRequest] DataSourceRequest请求字符串HRN，串FamilyName，串给定名称，串优先）
{
DataTable的结果=的GetList（HRN，FamilyName，给定名称，优先）;
Response.Cache.SetCacheability（HttpCacheability.NoCache）;
返回JSON（result.ToDataSourceResult（要求），JsonRequestBehavior.AllowGet）;
}
I having difficulty where the Kendo Ui grid would not rebind with new result after the Search button click.Please let me know how i could achieve this. Thank you
Currently the GetList will return data correctly however the KendoUi grid would not rebind with the new result.
.cshtml
<div id="search">
<div>
<div class="searchOption">
@Html.LabelFor(model => model.HRN)
@Html.EditorFor(model => model.HRN)
</div>
</div>
<div>
<div class="smallBox">
<input type="button" id="btnSearch" style="height:32px; font-size:14px; background-color:#3399FF" class="k-button" title="Search" value="Search" />
</div>
</div>
<div>
<div class="searchOption">
@Html.LabelFor(model => model.FamilyName)
@Html.EditorFor(model => model.FamilyName)
</div>
</div>
<div>
<div class="searchOption">
@Html.LabelFor(model => model.GivenName)
@Html.EditorFor(model => model.GivenName)
</div>
</div>
<div>
<div class="searchOption">
@Html.LabelFor(model => model.Priority)
@Html.EditorFor(model => model.Priority)
</div>
</div>
</div>
@(Html.Kendo().Grid<PWeb_App.ViewModels.ResultModel>()
.Name("Result")
.HtmlAttributes(new { @Style = "align:center; font-size:10px; width:985px" })
.Events(ev => ev.Change("onChange"))
.Columns(columns =>
{
columns.Bound(p => p.GivenName).Width(90);
columns.Bound(p => p.FamilyName).Width(90);
columns.Bound(p => p.Community).Width(130);
})
.ToolBar(toolbar => toolbar.Save())
.Editable(editable => editable.Mode(GridEditMode.InCell))
.Sortable()
.Pageable(paging => paging
.Input(false)
.Numeric(true)
.PreviousNext(true)
.PageSizes(new int[] { 5, 10, 25, 50 })
.Refresh(false)
)
.Selectable()
.Scrollable()
.ColumnMenu(c => c.Columns(false))
.DataSource(dataSource => dataSource
.Ajax()//bind with Ajax instead server bind
.PageSize(10)
.ServerOperation(true)
.Model(model =>
{
model.Id(p => p.Pid);
model.Field(p => p.FamilyName).Editable(false);
model.Field(p => p.GivenName).Editable(false);
})
.Read(read => read.Action("GetData", "Details").Type(HttpVerbs.Get))
.Update("Edit", "Details")
)
)
<script type="text/javascript">
$(document).ready(function () {
$('#btnConsumerSearch').click(function (e){
var community = $("#Community").val();
var familyName = $("#FamilyName").val();
var givenName = $("#GivenName").val();
$.ajax({
type: 'POST',
complete: function(e) {
$("#Result").data("kendoGrid").dataSource.read();
},
url: "@(Url.Content("~/Details/GetData/"))",
data: {
"Community":community,
"FamilyName":familyName,
"GivenName":givenName
},
success: function () {
$("#btnSearch").removeAttr('disabled');
}
});
$("#btnSearch").attr('disabled','disabled');
});
});
</script>
controller:
//The following code will return data new result as expected however the kendo grid does not refresh with the result of the following code:
public ActionResult GetData([DataSourceRequest] DataSourceRequest request, SearchCriteria model)
{
DataTable result = GetList(model);
Response.Cache.SetCacheability(HttpCacheability.NoCache);
return Json(result.ToDataSourceResult(request), JsonRequestBehavior.AllowGet);
}
/// <summary>
/// Get all available List from Client table and return using datatable
/// </summary>
/// <returns></returns>
private DataTable GetList(SearchCriteria model, string ReferralListID)
{
using (PEntities context = new PEntities())
{
string ConnectionString = (context.Connection as EntityConnection).StoreConnection.ConnectionString;
SqlConnectionStringBuilder builder = new SqlConnectionStringBuilder(ConnectionString);
builder.ConnectTimeout = 2500;
using (SqlConnection con = new SqlConnection(builder.ConnectionString))
{
using (SqlDataAdapter adapter = new SqlDataAdapter())
{
using (SqlCommand cmd = new SqlCommand("spListResults", con))
{
cmd.CommandType = CommandType.StoredProcedure;
cmd.Parameters.Add("paramCommunity", SqlDbType.VarChar, 100).Value = !String.IsNullOrEmpty(model.Community) ? (object)model.Community : DBNull.Value;
cmd.Parameters.Add("paramGivenName", SqlDbType.VarChar, 100).Value = !String.IsNullOrEmpty(model.GivenName) ? (object)model.GivenName : DBNull.Value;
cmd.Parameters.Add("paramFamilyName", SqlDbType.VarChar, 100).Value = !String.IsNullOrEmpty(model.FamilyName) ? (object)model.FamilyName : DBNull.Value;
cmd.Parameters.Add("paramPriority", SqlDbType.VarChar, 10).Value = !String.IsNullOrEmpty(model.Priority) ? (object)model.Priority : DBNull.Value;
adapter.SelectCommand = cmd;
cmd.CommandTimeout = 0;
DataTable dt = new DataTable();
adapter.Fill(dt);
return dt;
}
}
}
}
}
解决方案
Try like this,
In your grid read method in view like this
.Read(read => read.Action("GetData", "Details").Data("GetData"))
You button should be Submit Type
<input type="Submit" id="btnSearch" style="height:32px; font-size:14px; background-color:#3399FF" class="k-button" title="Search" value="Search" />
Script
function GetData() {
return {
HRN: $('#HRN').val(),
FamilyName: $('#FamilyName').val(),
GivenName: $('#GivenName').val(),
Priority: $('#Priority').val()
};
}
$(document).ready(function () {
$("#btnSearch").click(function (e) {
$("#Result").data("kendoGrid").dataSource.read();
$("#Result").data("kendoGrid").refresh();
e.preventDefault();
});
});
Controller
public ActionResult GetData([DataSourceRequest] DataSourceRequest request, string HRN, string FamilyName, string GivenName, string Priority)
{
DataTable result = GetList(HRN,FamilyName,GivenName,Priority);
Response.Cache.SetCacheability(HttpCacheability.NoCache);
return Json(result.ToDataSourceResult(request), JsonRequestBehavior.AllowGet);
}
这篇关于搜索按钮点击后剑道UI电网不重新绑定的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
