How to use html.grid control in spark view for asp.net mvc? - spark-view-engine

class person()
{
public int Id{get;set;}
public string Name{get;set;}
}
HomeController.cs
ActionResult Index()
{
IList list=new[]{
new person { Id = 1, Name = "Name1" },
new person { Id = 2, Name = "Name2" },
new person { Id = 3, Name = "Name3" }
};
ViewData["mygrid"]=list;
return view();
}
Home\Index.spark
!{Html.Grid[[person]]("mygrid",
(column=>{
column.For(c=>c.Id);
column.For(c=>c.Name);
}))
Am getting the error
Dynamic view compilation failed..error CS1501: No overload for method 'Grid' takes '2' arguments.
I have added reference to MvcContrib.dll
And added following namespace in the _global.spark file
<use namespace="MvcContrib.UI"/>
<use namespace="MvcContrib.UI.Grid"/>
<use namespace="MvcContrib.UI.Pager"/>
<use namespace="MvcContrib.UI.Grid.ActionSyntax"/>
<use namespace="Microsoft.Web.Mvc.Controls"/>
I want to bind the data to my grid in spark view.Can anybody help.

Should it be
!{Html.Grid[[person]]("mygrid").Columns(
column=>{
column.For(c=>c.Id);
column.For(c=>c.Name);
})}
? Notice .Columns().

Related

Blazor Page Combobox DataSource to async method

I have an issue where I need to set DataSource for a combo box to a service's Async method.
<div class="col-xs-5 col-sm-5 col-lg-5 col-md-5">
<SfComboBox TValue="string" TItem="ProjectStatusViewModel" PopupHeight="230px" Placeholder="Project Status" FloatLabelType="#FloatLabelType.Auto"
DataSource="#LookUpService.GetProjectStatuses()" #bind-Value="#_projectToEdit.Status">
<ComboBoxFieldSettings Text="Name" Value="Name"></ComboBoxFieldSettings>
</SfComboBox>
</div>
I'm getting this error:
cannot convert from 'System.Threading.Tasks.Task<System.Collections.Generic.IEnumerable<DesignTracker.Application.ViewModels.ProjectStatusViewModel>>'
to
'System.Collections.Generic.IEnumerable<DesignTracker.Application.ViewModels.ProjectStatusViewModel>' DesignTracker.UI.SyncfusionBlazorApp
Syncfusion support here.
We have checked the provided code example and issue details. We suspect that the reported issue may be cased due to mismatch in the type of data source and TItem in your application.
Also, we suggest you to bind the async method inside the OnInitialized method instead of assigned to the tag helper directly to avoid the issues at your end.
We have prepared the sample for your reference and attached it below.
Sample Link: https://www.syncfusion.com/downloads/support/directtrac/274346/ze/ComboBox_274346-1580423979
[index.razor]
<SfComboBox TValue="string" TItem="Countries" PopupHeight="230px" Placeholder="Project Status" FloatLabelType="Syncfusion.Blazor.Inputs.FloatLabelType.Auto"
DataSource="#DataSource" #bind-Value="#val">
<ComboBoxFieldSettings Text="Name" Value="Code"></ComboBoxFieldSettings>
</SfComboBox>
#code {
private string val { get; set; }
public CountryService DataService;
public List<Countries> DataSource = new List<Countries>();
protected override async Task OnInitializedAsync()
{
DataSource = await ownservice.GetDataAsync();
this.val = await ownservice.GetPreSelectDataAsync();
}
}
[OwnService.cs]
public class CountryService
{
public async Task<List<Countries>> GetDataAsync()
{
List<Countries> Country = new List<Countries>
{
new Countries() { Name = "Australia", Code = "AU" },
new Countries() { Name = "Bermuda", Code = "BM" },
new Countries() { Name = "Canada", Code = "CA" },
new Countries() { Name = "Cameroon", Code = "CM" },
new Countries() { Name = "Denmark", Code = "DK" },
new Countries() { Name = "France", Code = "FR" },
new Countries() { Name = "Finland", Code = "FI" }
};
return await Task.FromResult(Country);
}
public async Task<string> GetPreSelectDataAsync()
{
string value = "AU";
return await Task.FromResult(value);
}
}
[Startup.cs]
public void ConfigureServices(IServiceCollection services)
{
services.AddMvc(option => option.EnableEndpointRouting = false).SetCompatibilityVersion(CompatibilityVersion.Version_3_0);
services.AddRazorPages();
services.AddServerSideBlazor();
services.AddSyncfusionBlazor();
services.AddSingleton<CountryService>();
}
[WeatherForecast.cs]
public class Countries
{
public string Name { get; set; }
public string Code { get; set; }
}
It looks like your DataSource is expecting an enumerable collection, whereas you are supplying it with a Task that will eventually supply that collection. Try changing it to DataSource="#(await LookUpService.GetProjectStatuses()" which might do the truck.
The second option is to set up a backing property on the Parent component that holds that collection, and make the service call programmatically to populate the list, as in within the OnInitialized method override.

Unable to bind data to Kendo Scheduler

I've got this Kendo Scheduler that is displayed in the View but without any data.
The Scheduler on the View:
#(Html.Kendo().Scheduler<ProjName.Models.ScheduleInspectionModel>()
.Name("scheduler")
.Views(views =>
{
views.DayView();
views.WorkWeekView();
views.WeekView();
views.MonthView(mv => mv.Selected(true));
views.AgendaView();
})
.Timezone("Etc/UTC")
.DataSource(d => d
.Read("ControllerName", "GetScheduleInspections")
)
)
The datasource invokes the controller method below:
public ActionResult GetScheduleInspections([DataSourceRequest]DataSourceRequest request)
{
ScheduleInspectionModel sim = new ScheduleInspectionModel();
var gsio = sim.getScheduleInspections();
List<ScheduleInspectionModel> list = new List<ScheduleInspectionModel>();
if (gsio.scheduleinspections != null)
{
foreach (wsScheduleInspection.scheduleInspectionOutput scheduleInspection in gsio.scheduleinspections)
{
ScheduleInspectionModel sim2 = new ScheduleInspectionModel
{
GlobalEquipConditionId = scheduleInspection.globalEquipmentCondition.id,
Description = scheduleInspection.globalEquipmentCondition.code,
Start = DateTime.Now,
End = DateTime.Now.AddHours(2),
Title = scheduleInspection.globalEquipmentCondition.code,
IsAllDay = true
};
list.Add(sim2);
}
}
return Json(list.ToDataSourceResult(request));
}
But this method is never run, despite being on the Scheduler Datasource property. It should run that method and return a list of inspections. I don't know why isn't the method being hit. With a Kendo Grid, for example, the method on the Datasource Read is hit as soon as the page is loaded.
Try making sure your definition has these two items as I think they are required.
.Date(new DateTime(2013, 6, 13))
.StartTime(new DateTime(2013, 6, 13, 7, 00, 00))
EDIT
I was able to get the following code to work:
Model
// NOTE: It's important that your model class implements ISchedulerEvent
public class TaskViewModel : ISchedulerEvent
{
public string Title { get; set; }
public string Description { get; set; }
public bool IsAllDay { get; set; }
public DateTime Start { get; set; }
public DateTime End { get; set; }
public string StartTimezone { get; set; }
public string EndTimezone { get; set; }
public string RecurrenceRule { get; set; }
public string RecurrenceException { get; set; }
}
SchedulerController.cs
public class SchedulerController : Controller
{
// GET: Scheduler
public ActionResult Index()
{
var model = new SchedulerViewModel();
// In this case, it doesn't matter what this model is really since we're using AJAX binding
return View(model);
}
// I usually have my binding methods for Kendo use HttpPost
[HttpPost]
public ActionResult GetData([DataSourceRequest] DataSourceRequest request)
{
var data = new List<TaskViewModel>
{
new TaskViewModel
{
Start = new DateTime(2014, 12, 1, 8, 0, 0),
End = new DateTime(2014, 12, 1, 17, 0, 0),
Title = "Task 1"
}
};
return Json(data.ToDataSourceResult(request));
}
}
Index.cshtml (view)
#(Html.Kendo().Scheduler<TaskViewModel>()
.Name("scheduler")
.Views(views =>
{
views.DayView();
views.WorkWeekView();
views.WeekView();
views.MonthView(mv => mv.Selected(true));
views.AgendaView();
})
.Timezone("Etc/UTC")
.DataSource(d => d
.Read("GetData", "Scheduler")
))
If this doesn't work for you, I would make sure your versions (for Kendo, jQuery, etc) are correct. Hope this helps.
Yes, Scheduler read is called as soon as it is loeded. But it may not be getting data in proper format as it expects. So it is not able to bind the data. If you can check for these modification:
1) Define the "Model" in "DataSource" of scheduler as defined in this example.
2) Also the action method should return object of "MyModel" class(model on which scheduler is defined)
not "ScheduleInspectionModel" class.

MVC populate dropdown from foreign key

I have been struggling with this for several days. I need to populate a dropdownlistfor with genres.
My MovieRepository to grab the genres:
public IQueryable<Movies> MoviesAndGenres
{
get { return db.Movies.Include(m => m.parentGenre); }
}
My movie model
public virtual Genres parentGenre { get; set; }
Genre Model:
public class Genres
{
public Genres()
{
this.movies = new HashSet<Movies>();
}
[Key]
public int genreId { get; set; }
[Required(ErrorMessage = "A genre name is required")]
[StringLength(25)]
public String genreName { get; set; }
public ICollection<Movies> movies { get; set; }
}
I am trying to pass in the genres with a select list, but I am getting a LINQ to Entities does not recognize the System.String To String() Method, and this method cannot be translated to a stored expression.
Movies Controller, addMovie action:
ViewBag.Genres = movieRepository.MoviesAndGenres.Select(m => new SelectListItem
{
Text = m.parentGenre.genreName,
Value = m.parentGenre.genreId.ToString()
}).ToList();
return View();
View:
#Html.DropDownListFor(m => m.parentGenre, (SelectList)ViewBag.Genres)
Any help would be greatly appreciated!
Update:
Repository:
public IQueryable<Genres> MoviesAndGenres
{
get { return db.Genres; }
}
Controller:
var x = movieRepository.MoviesAndGenres.Select(m => new
{
Text = m.genreName,
Value = m.genreId
});
ViewBag.Genres = new SelectList(x);
return View();
View:
#Html.DropDownListFor(m => m.parentGenre, (SelectList)ViewBag.Genres)
Since you're retrieving all of the records anyways, you can just do this.
ViewBag.Genres = movieRepository.MoviesAndGenres.AsEnumerable()
.Select(m => new SelectListItem
{
Text = m.parentGenre.genreName,
Value = m.parentGenre.genreId.ToString()
});
You would also need to change your view to:
#Html.DropDownListFor(m => m.parentGenre, new SelectList(ViewBag.Genres))
Actually, a better approach would probably be this, since then it only retrieves the specific columns you need:
var x = movieRepository.MoviesAndGenres.Select(m => new
{
Text = m.parentGenre.genreName,
Value = m.parentGenre.genreId
});
ViewBag.Genres = new SelectList(x)
Also, the ToList() is no longer required because it's already in a an immediate state.

Display Template For Generics - View is not found

I have the following classes:
public class Widget
{
public string Name { get; set; }
}
GenericModel
public class GenericModel<T>
{
public List<T> Data { get; set; }
}
My Controller action is:
public ActionResult Simple()
{
var model = new GenericModel<Widget>()
{
Data = new List<Widget>
{
new Widget {Name = "a"}
}
};
return View(model);
}
And my view is:
#model MyApp.GenericModel<MyApp.Widget>
#{
ViewBag.Title = "Simple";
}
<h2>Simple</h2>
#Html.DisplayFor(m=>m)
I have a file called GenericModel.cshtml in Views/Shared/DisplayTemplate folder:
#model MyApp.GenericModel<MyApp.Widget>
<ul>
#for (int i = 0; i < Model.Data.Count; i++ )
{
<li>
#Html.EditorFor(m=> Model.Data[i].Name)
</li>
}
</ul>
This view can not be found. I see when I print out the name of the type of my model I get "GenericModel1". Seeing that, I renamed my template "GenericModel1.cshtml". This seems like a bit of a hack, is there an easier way to find this display template without resorting to this?
You have to set it in your viewstart:
#Code
Layout = "~/Views/Shared/DisplayTemplate.cshtml"
End Code
Note: The above is VB.
You can also pass it via your controller like this:
public ActionResult Simple()
{
var model = new GenericModel<Widget>()
{
Data = new List<Widget>
{
new Widget {Name = "a"}
}
};
return View("", "DisplayTemplate", model);
}

Best way to sort a DropDownList in MVC3 / Razor using helper method

Hi so I'm pretty new to MVC3 and Razor and I've been trying to get my head around it the past few days. I've been given a task by my project architect to create a helper method that sorts a drop down list in an MVC View. I have a View that retrieves various data from a Controller and I'm returning some values that I want to appear in a drop down list. I've been told not to sort it in the Controller and also to pass the field that we want to sort by into the helper method. I could do it like below but the architect wants to keep the view free of c sharp code:
#Html.DropDownListFor(model => model.StudyName, new SelectList(ViewBag.StudyTypes, "Value", "Text").OrderBy(l => l.Text))
So I've created some sample code and some extension methods to try and get it to work. My idea is to replicate the existing Html.DropDownList method and allow the passing of 'object htmlAttributes' so I can set the style as part of the method call.
Here's my code so far. I'm returning the data for the drop down in ViewBag.StudyTypes in the Edit Controller method:
public ActionResult Edit(int id)
{
IEnumerable<SelectListItem> mySelectList = new List<SelectListItem>();
IList<SelectListItem> myList = new List<SelectListItem>();
for (int i = 0; i < 5; i++)
{
myList.Add(new SelectListItem()
{ Value = i.ToString(), Text = "My Item " + i.ToString(), Selected = i == 2 }
);
}
mySelectList = myList;
ViewBag.StudyTypes = mySelectList;
StudyDefinition studydefinition = db.StudyDefinitions.Find(id);
return View(studydefinition);
}
Here's my View code:
#model MyStudyWeb.Models.StudyDefinition
#using MyStudyWeb.Helpers
#{
ViewBag.Mode = "Edit";
}
<div>
#Html.DropDownListSorted(new SelectList(ViewBag.StudyTypes, "Value", "Text"))<br />
#Html.DropDownListSorted("MyList", new SelectList(ViewBag.StudyTypes, "Value", "Text"))<br />
</div>
Finally below are the extension methods I'm trying to get to work. The first extension method does nothing, I just get a blank space at that point in the View. The second method kind of works but it's ugly. For the 3rd method I don't know how to specify an 'order by' parameter as the OrderBy on an IEnumerable expects a Linq expression.
namespace StudyDefinition.Helpers
{
public static class HtmlHelperExtensions
{
// 1st sort method: sort the passed in list and return a new sorted list
public static SelectList DropDownListSorted(this HtmlHelper helper, IEnumerable<SelectListItem> selectList)
{
var x = new SelectList(selectList.ToList()).OrderBy(l => l.Text);
return x as SelectList;
}
// 2nd sort method: return IHtml string and create <select> list manually
public static IHtmlString DropDownListSorted(this HtmlHelper helper, string name, SelectList selectList)
{
StringBuilder output = new StringBuilder();
(selectList).OrderBy(l => l.Text);
output.Append("<select id=" + name + " name=" + name + ">");
foreach (var item in selectList)
{
output.Append("<option value=" + item.Value.ToString() + ">" + item.Text + "</option>");
}
output.Append("</select>");
return MvcHtmlString.Create(output.ToString());
}
// 3rd sort method: pass in order by parameter - how do I use this?
public static IHtmlString DropDownListSorted(this HtmlHelper helper, string name, SelectList selectList, string orderBy)
{
StringBuilder output = new StringBuilder();
//How do I use the orderBy parameter?
(selectList).OrderBy(l => l.Text);
output.Append("<select id=" + name + " name=" + name + ">");
foreach (var item in selectList)
{
output.Append("<option value=" + item.Value.ToString() + ">" + item.Text + "</option>");
}
output.Append("</select>");
return MvcHtmlString.Create(output.ToString());
}
}
}
I really don't know the best approach to take, there may be a much simpler way that I'm totally missing and I might be at the point where I can't see the wood for the trees anymore. Some questions
Should I return a SelectList or an MvcHtmlString, or something else entirely?
For the first extension method how do I get the returned SelectList to render in the View?
How to I pass in a parameter to my extension methods that specifies the sort order?
How do I pass an 'object htmlAttributes' parameter, and how do I apply this object / parameter to the SelectList?
If anyone has some ideas or suggestions then I'd appreciate some feedback :)
The first and most important part of your code would be to get rid of any ViewBag/ViewData (which I personally consider as cancer for MVC applications) and use view models and strongly typed views.
So let's start by defining a view model which would represent the data our view will be working with (a dropdownlistg in this example):
public class MyViewModel
{
public string SelectedItem { get; set; }
public IEnumerable<SelectListItem> Items { get; set; }
}
then we could have a controller:
public class HomeController : Controller
{
public ActionResult Index()
{
var model = new MyViewModel
{
// I am explicitly putting some items out of order
Items = new[]
{
new SelectListItem { Value = "5", Text = "Item 5" },
new SelectListItem { Value = "1", Text = "Item 1" },
new SelectListItem { Value = "3", Text = "Item 3" },
new SelectListItem { Value = "4", Text = "Item 4" },
}
};
return View(model);
}
}
and a view:
#model MyViewModel
#Html.DropDownListForSorted(
x => x.SelectedItem,
Model.Items,
new { #class = "foo" }
)
and finally the last piece is the helper method which will sort the dropdown by value (you could adapt it to sort by text):
public static class HtmlExtensions
{
public static IHtmlString DropDownListForSorted<TModel, TProperty>(
this HtmlHelper<TModel> helper,
Expression<Func<TModel, TProperty>> expression,
IEnumerable<SelectListItem> items,
object htmlAttributes
)
{
var model = helper.ViewData.Model;
var orderedItems = items.OrderBy(x => x.Value);
return helper.DropDownListFor(
expression,
new SelectList(orderedItems, "Value", "Text"),
htmlAttributes
);
}
}
Just add in the sorting before you return the items to the dropdown list.
Do this:
Models: StudyViewModel.cs
public class StudyViewModel {
public string StudyName { get; set; }
public string StudyTypes { get; set; }
}
Controller: StudyController.cs
using System.Web.Mvc;
public class StudyController
{
public List<SelectListItem> studyTypes()
{
List<SelectListItem> itemList = new List<SelectListItem>();
for (var i=0; i<5; i++)
{
itemList.Add = new SelectListItem({
Value = i.ToString();
Text = "My Item";
});
}
// You can sort here....
List<SelectListItem> sortedList = itemList.OrderBy(x=>x.Text);
return sortedList;
}
public ActionResult Edit(int id)
{
//You won't need this because you get it using your
//controller's routine, instead
//ViewBag.StudyTypes = studySlots.OrderBy(e => e.Value);
//-- unless you need to add these values to the model for
// some reason (outside of filling the ddl), in which case....
// StudyViewModel svm = new StudyViewModel();
// svm.StudyTypes = studySlots.OrderBy(e => e.Value);
// svm.StudyName = "My Item";
// return View(svm);
// Otherwise, just....
return View();
}
}
View: Edit.cshtml
#Html.DropDownListFor(model => model.StudyName)
.OptionLabel('Select...')
.DataTextField('Text')
.DataValueField('Value')
.Datasource(source =>
{
// This is where you populate your data from the controller
source.Read(read =>
{
read.Action("studyTypes", "Study");
});
})
.Value(Model.StudyName != null ? Model.StudyName.ToString() : "")
)
This way will avoid ViewBags and just use a function to fill in the values, directly.
If you are using a database you can use a query to define the sort element
using (BDMMContext dataContext = new BDMMContext())
{
foreach (Arquiteto arq in dataContext.Arquitetos.SqlQuery("SELECT * FROM Arquitetos ORDER BY Nome"))
{
SelectListItem selectItem = new SelectListItem { Text = arq.Nome, Value = arq.Arquiteto_Id.ToString() };
//
list.Add(selectItem);
}
}

Resources