KendoUI版本:2013.3.1316.545 操作系统:Windows 8 .NET:4.5 / C#
我在RazorView上有一个multiSelect和一个网格。我的目的是让用户在多选框中输入多个项目,当他们点击一个按钮时,通过将多选中的所选项目添加到字符串并将该字符串传递给字符串,在数据库中搜索这些项目并将其显示在下面的网格中我的控制器动作。
所有这些都是第一次正常工作。如果用户修改了多选中的项目,然后单击搜索按钮,我将重新创建查询字符串并从按钮单击事件处理程序中调用我的控制器操作。我使用以下代码重新加载数据。
var dSource = $( grid ).data( 'kendoGrid' ).dataSource;
dSource.transport.options.read.url = newUrl;
dSource.read();
虽然我可以在调试器中看到执行了dSource.read()函数。但是第一次通话后呼叫从未触及我的动作方法。如果我完全刷新页面并再次调用它,它就可以了。我的假设是,虽然url中的查询字符串已更改,但dataSource已缓存并且从未再次执行。我怎么能让它起作用?任何帮助都非常感谢。
以下是所有View代码:
<div class="PCSectionPaddingTop5">
<form role="form">
<div class="form-group">
<label><span class="label label-danger">Ingredient(s)</span></label>
</div>
<div class="form-group">
@(Html.Kendo().MultiSelect()
.Name( "IngredientMultiSelect" )
.DataTextField( "Name" )
.DataValueField( "PKGuid" )
.Placeholder( "Select Ingredients..." )
.Filter( Kendo.Mvc.UI.FilterType.Contains )
.AutoBind( true )
.DataSource( ds => ds
.Read( r => r.Action( "GetAllIngredients", "Ingredient" ).Type( HttpVerbs.Post ) )
))
</div>
<div class="form-group">
<button onclick="ReloadRec2IngrSearchGrid()" type="button" class="btn btn-info btn-xs"><i class="glyphicon glyphicon-search"></i> Search by Ingredient(s)</button>
<button onclick="ClearRec2IngrSearchGrid()" type="button" class="btn btn-info btn-xs"><i class="glyphicon glyphicon-retweet"></i> Reset</button>
</div>
<div class="form-group">
@(Html.Kendo()
.Grid<PowerChef.DAL.ViewModels.RecipeVM>()
.Name( "Recipe2IngrSearchKGrid" )
.Pageable()
.Scrollable()
.Sortable()
.Filterable()
.Resizable( resize => resize.Columns( true ) )
.Editable( ed => ed.Mode( GridEditMode.InLine ) )
.Columns( c =>
{
//c.Bound(x => x.PKId).Hidden(true);
c.Bound( x => x.PKGuid ).Hidden( true );
c.Bound( x => x.Name ).Title( "Name" );
c.Bound( x => x.Included ).Width( "20%" ).Sortable( false ).Filterable( false ).Title( "Include" )
.ClientTemplate( "<input type='checkbox' #= Included === true ? checked='checked' : '' # class='chkbx' />" );
}
)
.AutoBind( false )
.DataSource( ds => ds
.Ajax()
.ServerOperation( true )
.Read( r => r.Action( "GetRecipe2IngrSearchRecipes", "CustomerMenu", new { selectedIngrs = "" } ).Type( HttpVerbs.Post ) )
.Model( m =>
{
//m.Id(d => d.PKId);
//m.Field(d => d.PKId).DefaultValue(-1);
m.Id( d => d.PKGuid );
m.Field( d => d.PKGuid ).DefaultValue( new Guid() );
} )
.PageSize( 20 )
))
</div>
<div class="form-group">
<div class="pull-right">
<button onclick="submitRec2IngrKGridSelection()" type="button" class="btn btn-info btn-xs"><i class="glyphicon glyphicon-download"></i> Finish Selection</button>
</div>
</div>
</form>
这是我的javascript方法:
function ReloadRec2IngrSearchGrid() {
try {
if ( !_.isUndefined( $( "#IngredientMultiSelect" ) ) && !_.isNull( $( "#IngredientMultiSelect" ).data( "kendoMultiSelect" ) ) && !_.isEmpty( $( "#IngredientMultiSelect" ).data( "kendoMultiSelect" ).value() ) ) {
var parmValues = $( "#IngredientMultiSelect" ).data( "kendoMultiSelect" ).value();
var parmName = "ingrId";
ReloadDataSourceForGrid( "#Recipe2IngrSearchKGrid", parmName, parmValues );
}
else {
PcGfShowNotification( 'error', "Error", "Invalid Parameter!" );
}
} catch ( e ) {
PcGfShowNotification( 'error', "Error", PcGvMsgTechFailure );
}
}
更多JavaScript:
function ReloadDataSourceForGrid( grid, parmName, parmValues ) {
try {
var kGridUrl = $( grid ).data( 'kendoGrid' ).dataSource.transport.options.read.url;
var newUrl = PCAddQueryStringValueArrayToURL( kGridUrl, parmName, parmValues );
var dSource = $( grid ).data( 'kendoGrid' ).dataSource;
dSource.transport.options.read.url = newUrl;
dSource.read();
//$( grid ).data( 'kendoGrid' ).dataSource.transport.options.read.url = newUrl;
//$( grid ).data( 'kendoGrid' ).dataSource.read();
} catch ( e ) {
throw e;
}
}
感谢。 巴布。