asp.net-mvc - mvc - kendodropdownlist parameters
KendoUI Grid Ajax Parámetros de enlace para Select (3)
Tengo una KendoUI Grid básica para mi aplicación ASP.NET MVC que utiliza un enlace ajax para la lectura. Me gustaría mejorar esto para que un formulario sobre la cuadrícula se utilice para ayudar a seleccionar los datos que se deben mostrar en la cuadrícula. Este es un formulario de búsqueda estándar con campos básicos como Nombre, Apellido, Fecha de nacimiento, Fuente del cliente, etc. con un botón de búsqueda. Cuando se presiona el botón de búsqueda, quiero obligar a la cuadrícula a obtener los datos que cumplen con los criterios del controlador pasando el Modelo de búsqueda con los campos que mencioné anteriormente.
El formulario de búsqueda está dentro de la vista parcial _CustomerSearch.
He implementado este tipo de cosas antes con las extensiones de Telerik MVC tocando el evento del cliente OnDataBinding y actualizando los valores de los parámetros allí y luego haciendo la llamada Ajax manualmente para obtener los datos. No parece que KendoUI operará de la misma manera.
Ver
@Html.Partial("_CustomerSearch", Model)
<hr>
@(Html.Kendo().Grid<ViewModels.CustomerModel>()
.Name("Grid")
.Columns(columns =>
{
columns.Bound(p => p.Id).Hidden(true);
columns.Bound(p => p.FirstName);
columns.Bound(p => p.LastName);
columns.Bound(p => p.DateOfBirth).Format("{0:MM/dd/yyyy}");
columns.Bound(p => p.IsActive);
})
.Scrollable()
.Filterable()
.Sortable()
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("_Search", "Customer"))
)
)
Controlador
public ActionResult _Search([DataSourceRequest]DataSourceRequest request)
{
return Json(DataService.GetCustomers2().ToDataSourceResult(request));
}
Imagino que el controlador luce algo como esto, pero no puedo encontrar ningún ejemplo de algo que se implemente de esta manera, que es con lo que necesito ayuda.
public ActionResult _Search([DataSourceRequest]DataSourceRequest request, CustomerSearchModel customerSearchModel)
{
return Json(DataService.GetCustomers2(customerSearchModel)
.ToDataSourceResult(request));
}
La respuesta de Nicholas podría funcionar si sus requisitos se pueden resolver con el filtro integrado. Pero si sus requisitos se pueden resolver con el filtrado integrado, ¿por qué desea crear un formulario de búsqueda personalizado?
Así que supongo que tiene una razón para hacer la búsqueda manualmente, así que aquí es cómo lo hemos hecho en nuestro proyecto (así que tal vez hay una manera más fácil, pero aún así funcionó para nosotros):
La acción del controlador está bien:
public ActionResult _Search([DataSourceRequest]DataSourceRequest request,
CustomerSearchModel customerSearchModel)
{
return Json(DataService.GetCustomers2(customerSearchModel)
.ToDataSourceResult(request));
}
Siguiente paso: necesita una función de JavaScript que recopile los datos del formulario de búsqueda (los nombres de propiedad del objeto JS deben coincidir con los nombres de propiedad de su CustomerSearchModel ):
function getAdditionalData() {
// Reserved property names
// used by DataSourceRequest: sort, page, pageSize, group, filter
return {
FirstName: $("#FirstName").val(),
LastName: $("#LastName").val(),
//...
};
}
Luego puede configurar esta función para que se invoque en cada lectura:
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("_Search", "Customer")
.Data("getAdditionalData"))
)
Finalmente, en el clic de su botón, solo necesita actualizar la cuadrícula con:
$(''#Grid'').data(''kendoGrid'').dataSource.fetch();
Puede configurar los filtros en la grilla llamando al filter en la fuente de datos de la cuadrícula.
Entonces, en la función del controlador onclick su botón, ponga algo como esto:
var $Grid = $(''#Grid'').data(''kendoGrid'');
$Grid.dataSource.filter([
{ field: ''FirstName'', operator: ''eq'', value: $(''#firstName'').val() },
{ field: ''LastName'', operator: ''eq'', value: $(''#lastName'').val() }
]);
Aquí hay un enlace a los documentos de Kendo: DataSource.filter
Referir Pase Datos Adicionales al Método de Acción
Para pasar parámetros adicionales a la acción, use el método de Datos . Proporcione el nombre de una función de JavaScript que devolverá un objeto JavaScript con los datos adicionales:
Un ejemplo de búsqueda que se muestra a continuación:
Importante: type="button" para el botón; Y AutoBind(false) para Grid; de lo contrario, no funcionará
VER
@model IEnumerable<KendoUIMvcSample.Models.Sample>
@{
ViewBag.Title = "Index";
}
<script type="text/javascript">
function getAdditionalData()
{
return {
FirstName: ''A'',
LastName: ''B'',
};
}
$(document).ready(function ()
{
$(''#Submit1'').click(function ()
{
alert(''Button Clicked'');
//Refresh the grid
$(''#ssgrid222'').data(''kendoGrid'').dataSource.fetch();
});
});
</script>
<h2>Index</h2>
@using (Html.BeginForm())
{
@(Html.Kendo().Grid<KendoUIMvcSample.Models.Sample>()
.Name("ssgrid222")
.Columns(columns => {
columns.Bound(p => p.SampleDescription).Filterable(false).Width(100);
columns.Bound(p => p.SampleCode).Filterable(false).Width(100);
columns.Bound(p => p.SampleItems).Filterable(false).Width(100);
})
.AutoBind(false)
.Pageable()
.Sortable()
.Scrollable()
.Filterable()
.HtmlAttributes(new { style = "height:430px;" })
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(20)
.Read(read => read.Action("Orders_Read", "Sample")
.Data("getAdditionalData"))
)
)
<input id="Submit1" type="button" value="SubmitValue" />
}
Controlador
namespace KendoUIMvcSample.Controllers
{
public class SampleController : Controller
{
public ActionResult Index()
{
SampleModel AddSample = new SampleModel();
Sample s1 = new Sample();
return View(GetSamples());
}
public static IEnumerable<Sample> GetSamples()
{
List<Sample> sampleAdd = new List<Sample>();
Sample s12 = new Sample();
s12.SampleCode = "123se";
s12.SampleDescription = "GOOD";
s12.SampleItems = "newone";
Sample s2 = new Sample();
s2.SampleCode = "234se";
s2.SampleDescription = "Average";
s2.SampleItems = "oldone";
sampleAdd.Add(s12);
sampleAdd.Add(s2);
return sampleAdd;
}
public ActionResult Orders_Read([DataSourceRequest]DataSourceRequest request, CustomerSearchModel customerSearchModel)
{
string firstParam = customerSearchModel.FirstName;
return Json(GetOrders().ToDataSourceResult(request));
}
private static IEnumerable<Sample> GetOrders()
{
return GetSamples();
}
}
public class CustomerSearchModel
{
public string FirstName { get; set; }
public string LastName { get; set; }
}
}
Modelo
namespace KendoUIMvcSample.Models
{
public class SampleModel
{
public List<Sample> samples;
}
public class Sample
{
public string SampleDescription { get; set; }
public string SampleCode { get; set; }
public string SampleItems { get; set; }
}
}