ListView won't display data

1 Answer 286 Views

ListView

A asked on 30 Apr 2021, 08:33 PM

listview.png

The controller is definitely being hit and it is returning data in the format I was expecting. I have javascript in the "RequestEnd" and I am seeing data there. There are no errors or warnings (that pertain to the listview) in the browser's developer console. The pager shows up but says there are zero records. I have been tossing code at this for waaaaay too long.

Any suggestions? Please.....

Controller:

		[HttpPost]
		[ResponseCache(Duration = 0, Location = ResponseCacheLocation.None, NoStore = true)]
		public async Task<IActionResult> UserProfiles_Search([DataSourceRequest] DataSourceRequest request)
		{
			Logger.LogInformation("In UserProfiles_Search");

                        // dummy data
			var data = new List < UserProfile >(){
				new UserProfile() { Title = "Mrs", FirstName = "Joanne", LastName = "Welch", EmailAddress = "joanne.welch@example.com", Id = Guid.Parse("3c7b201d-9744-4807-bd53-192251fb6e60") },
				new UserProfile() { Title = "Miss", FirstName = "Florence", LastName = "Lawrence", EmailAddress = "florence.lawrence@example.com", Id = Guid.Parse("6691697e-faa5-41ec-89b0-b6a040be8d2d") },
				new UserProfile() { Title = "Mrs", FirstName = "Stella", LastName = "Laurent", EmailAddress = "stella.laurent@example.com", Id = Guid.Parse("87cf6fef-0d9e-4fea-bbca-b48d9f478c61") },
				new UserProfile() { Title = "Ms", FirstName = "Sharida", LastName = "Broeren", EmailAddress = "sharida.broeren@example.com", Id = Guid.Parse("d58fcf47-88ac-4753-8d08-3cbf0318c13d") },
				new UserProfile() { Title = "Mr", FirstName = "William", LastName = "Liu", EmailAddress = "william.liu@example.com", Id = Guid.Parse("688fff10-e522-4267-a061-5553c627689e") },
				new UserProfile() { Title = "Ms", FirstName = "Brielle", LastName = "Clark", EmailAddress = "brielle.clark@example.com", Id = Guid.Parse("00fa0fa0-494f-44e5-9bb2-5fbcea156eb7") },
				new UserProfile() { Title = "Miss", FirstName = "تارا", LastName = "زارعی", EmailAddress = "tr.zraay@example.com", Id = Guid.Parse("3a7ddd17-33a3-489a-91b9-48055eefb55e") },
				new UserProfile() { Title = "Mr", FirstName = "Necati", LastName = "Karadaş", EmailAddress = "necati.karadas@example.com", Id = Guid.Parse("33c54e50-7297-4af0-914c-484f182d0e52") },
				new UserProfile() { Title = "Ms", FirstName = "Elizabeth", LastName = "Craig", EmailAddress = "elizabeth.craig@example.com", Id = Guid.Parse("6841bcec-6662-473e-9b1a-d5f533ab01d8") },
				new UserProfile() { Title = "Mr", FirstName = "Karl", LastName = "Gordon", EmailAddress = "karl.gordon@example.com", Id = Guid.Parse("43ec6d51-5b3e-4e6d-ae78-4394234950b4") },
				new UserProfile() { Title = "Mrs", FirstName = "Gretel", LastName = "Bender", EmailAddress = "gretel.bender@example.com", Id = Guid.Parse("54dab09c-1d6f-4544-aa23-0fb74f3f12c9") },
				new UserProfile() { Title = "Mrs", FirstName = "Francelina", LastName = "Nunes", EmailAddress = "francelina.nunes@example.com", Id = Guid.Parse("3c62214b-c797-4cdb-9623-cbc51ec8a86f") },
				new UserProfile() { Title = "Monsieur", FirstName = "Oskar", LastName = "Berger", EmailAddress = "oskar.berger@example.com", Id = Guid.Parse("4687147c-8630-4018-afb8-52cdb0e1937a") },
				new UserProfile() { Title = "Miss", FirstName = "Emilie", LastName = "Carpentier", EmailAddress = "emilie.carpentier@example.com", Id = Guid.Parse("8b11fb43-93da-470c-bc1a-eddce87a3ecc") },
				new UserProfile() { Title = "Mrs", FirstName = "Florence", LastName = "King", EmailAddress = "florence.king@example.com", Id = Guid.Parse("f203e0b7-ebe3-4a72-b82e-c910b9daa3fd") }
			};

			var resultData = await data.ToDataSourceResultAsync(request);

			return Json(resultData);
		}

Index.cshtml

@using SaskPower.DSS.CSRTools.Models.Models
@using SaskPower.DSS.CSRTools.Models.ViewModels
@model ProfileSearchViewModel
@{
	Layout = "";
}
<html>
<head>
	<title>Test page</title>

	<link rel="stylesheet" href="~/lib/kendo/styles/kendo.common.min.css" />
	<link rel="stylesheet" href="~/lib/kendo/styles/kendo.bootstrap.min.css" />
	<link rel="stylesheet" href="~/lib/kendo/styles/kendo.bootstrap-v4.css" />

	<script language="javascript" type="text/ecmascript" src="~/lib/kendo/scripts/jquery.min.js"></script>
	<script language="javascript" type="text/ecmascript" src="~/lib/kendo/scripts/jszip.min.js"></script>
	<script language="javascript" type="text/ecmascript" src="~/lib/kendo/scripts/kendo.all.min.js"></script>
	<script language="javascript" type="text/ecmascript" src="~/lib/kendo/scripts/kendo.aspnetmvc.min.js"></script>
	<script language="javascript" type="text/ecmascript" src="~/lib/kendo/scripts/cultures/kendo.culture.en-CA.min.js"></script>
	<script language="javascript" type="text/ecmascript" src="~/lib/kendo/scripts/messages/kendo.messages.en-CA.min.js"></script>
	<script language="javascript" type="text/ecmascript" src="~/lib/bootstrap/dist/js/bootstrap.min.js"></script>
</head>
<body>
	<script type="text/x-kendo-tmpl" id="userProfileSearchResultItem">
		<div class="userProfileSingleResult">
			<div class="name">#:firstName# #:lastName#</div>
			<div class="email">#:emailAddress#</div>
			<div class="id">#:id#</div>
		</div>
	</script>
	<div class="profile-search">
		<div class="result-count"></div>
		<div class="results">
			@(Html.Kendo().ListView<UserProfile>()
				.Name("userProfileSearchResults")
				.TagName("div")
				.ClientTemplateId("userProfileSearchResultItem")
				.DataSource(dataSource => dataSource
					.Ajax()
					.Model(m => m.Id(p => p.Id))
					.PageSize(25)
					.Read(read=>read.Action("UserProfiles_Search", "Home"))
					.ServerOperation(false)
					.Events(evt => evt
						.RequestEnd("userProfileRequestEnd")
					)
				)
				.AutoBind(true)
				.Pageable(pager => pager
				.ButtonCount(10)
				.Numeric(true)
				.Enabled(true)
			)
		)
</div>
	</div>
	<script type="text/javascript" language="javascript">
		function userProfileRequestEnd(event) {
			console.log("in userProfileRequestEnd");
			$(".profile-search .result-count").html("" + event.response.data.length + " profiles found");
		}
	</script>
</body>
</html>

Model:

	public class UserProfile
	{
		public Guid Id { get; set; }
		public string Title { get; set; }
		public string FirstName { get; set; }
		public string LastName { get; set; }
		public string EmailAddress { get; set; }
	}

Thanks

-Cam

Juergen

commented on 04 May 2021, 08:29 AM

Hi Cam, did you figure that one out ? I am facing the same problem for days. Cheers, Juergen

commented on 04 May 2021, 02:14 PM

Nope, still can't get it to work. Had a couple of other people at work take a peek at it too.... still nothing.

commented on 04 May 2021, 11:02 PM

Hey Juergen, I figured it out and posted the answer. Let me know if it works for you too.

1 Answer, 1 is accepted

answered on 04 May 2021, 11:01 PM

.Net Core uses the System.Text.Json namespace by default for the serialization of all Json. It, by default, converts the property names to have a lower case first letter (myPropertyName) where as NewtonSoft defaulted to leave the case as it was in the original object. Because of this, all of the Telerik JavaScript can't find any of the properties (JavaScript is case sensitive) and everything looks like it is null.

In your startup you should have something like:

services.AddControllersWithViews();

You will need to change it to be:

services.AddControllersWithViews().AddJsonOptions(options=>
{
	options.JsonSerializerOptions.PropertyNamingPolicy = null;
});

This will leave the case alone and the Telerik JavaScript will work.

-Cam

Juergen

commented on 05 May 2021, 11:52 AM

Thanks Cam and glad to read it works for you. That problem I saw in the beginning and has I cannot use your solution, I used dataannoations like
[JsonProperty("Id")]
public int Id { get; set; }
to return field names unchanged. The json I see returned looks fine to me.

Aleksandar

commented on 10 May 2021, 09:26 AM

Hi Juergen,

We have s article dedicated on JSON serialization in different versions of ASP.NET Core available here: https://docs.telerik.com/aspnet-core/compatibility/json-serialization If this is not helpful I can suggest sharing further details on the scenario you have, so the community and the admins can provide better suggestions.