Надеюсь, заголовок моего вопроса информативен и поможет вам понять проблему, с которой я столкнулся. Я новичок в программировании и знаю, что проблема, с которой я столкнулся, может возникнуть только у новичка. Пожалуйста, помогите мне. Пожалуйста, подождите, это довольно длинное описание. Я знаю, что большинство из вас, которые являются частью этого сообщества, являются очень опытными программистами и не нуждаются в такой подробной методологии, но я не собираюсь тратить ваше время, и я считаю, что, дав такое подробное описание, вы бы сможет помочь мне лучше. Теперь о проблеме: я пытаюсь построить сетку, используя jQuery:
https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/index.htm#demos / jqxgrid / defaultfunctionality.htm
Я использовал исходный код из приведенной выше ссылки, чтобы построить сетку, но когда я запускаю программу, данные не отображаются. Я уверен, что проблема заключается в jQuery, потому что я запускал свою веб-службу отдельно, и она подключается к SQL серверу и отображает результат в виде массива JSON.
У меня есть разбил решение на три проекта в Visual Studio 2019:
- Проект PracticeValidation - содержит 3 веб-формы .aspx c#. Один для домашней страницы, другой для формы рецепта и третий для формы сотрудника.
- Проект WebServicesFunctionality - содержит один файл .asmx Webservice, который содержит 2 веб-метода (один для формы рецепта, другой для формы сотрудника) для сериализации данных, поступающих в виде списка, в JSON массив. Ниже приведен код веб-службы.
[System.Web.Script.Services.ScriptService]
public class WebService1 : System.Web.Services.WebService
{
[WebMethod]
public string GetRecipe()
{
JavaScriptSerializer js = new JavaScriptSerializer();
string recipeList = String.Empty;
List<FormGeneratorClass.FormGeneratorVar.RecipeVar> recipeCatcher = new List<FormGeneratorClass.FormGeneratorVar.RecipeVar>();
recipeCatcher = FormGeneratorClass.FormGeneratorVar.ExecuteRecipeList();
if (recipeCatcher != null && recipeCatcher.Count > 0)
{
recipeList = js.Serialize(recipeCatcher);
}
else
recipeList = js.Serialize("No recipes!");
return recipeList;
}
[WebMethod]
public string GetEmp()
{
JavaScriptSerializer js = new JavaScriptSerializer();
string EmployeeList = String.Empty;
List<FormGeneratorClass.FormGeneratorVar.EmpVar> employeeCatcher = new List<FormGeneratorClass.FormGeneratorVar.EmpVar>();
employeeCatcher = FormGeneratorClass.FormGeneratorVar.ExecuteEmployeeList();
if (employeeCatcher != null && employeeCatcher.Count > 0)
{
EmployeeList = js.Serialize(employeeCatcher);
}
else
EmployeeList = js.Serialize("No recipes!");
return EmployeeList;
}
}
Проект FormGeneratorClass: Этот проект содержит файл класса c#, который отвечает за взаимодействие с SQL Сервером. Я прикрепляю код внутри этого файла ниже.
using System;
using System.Collections.Generic;
using System.Configuration;
using System.Data.SqlClient;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
namespace FormGeneratorClass
{
public class FormGeneratorVar
{
public class RecipeVar
{
public int Recipe_Id { get; set; }
public string Recipe_Name { get; set; }
}
public class EmpVar
{
public int Emp_Id { get; set; }
public string Emp_FirstName { get; set; }
public string Emp_LastName { get; set; }
}
public static List<RecipeVar> ExecuteRecipeList()
{
List<RecipeVar> listRecipe = new List<RecipeVar>();
string strConnString = ConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString;
using (SqlConnection con = new SqlConnection(strConnString))
{
string sqlSelectAllQuery = "SELECT * FROM Tbl_Recipe";
SqlCommand cmd = new SqlCommand(sqlSelectAllQuery, con);
con.Open();
SqlDataReader rdr = cmd.ExecuteReader();
while (rdr.Read())
{
RecipeVar recipe = new RecipeVar();
recipe.Recipe_Id = !(rdr["recipe_id"] == DBNull.Value) ? Convert.ToInt32(rdr["recipe_id"]) : 0;
recipe.Recipe_Name = !(rdr["recipe_name"] == DBNull.Value) ? Convert.ToString(rdr["recipe_name"]) : string.Empty;
listRecipe.Add(recipe);
}
con.Close();
}
return listRecipe;
}
public static List<EmpVar> ExecuteEmployeeList()
{
List<EmpVar> listEmployee = new List<EmpVar>();
string strConnString = ConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString;
using (SqlConnection con = new SqlConnection(strConnString))
{
string sqlSelectAllQuery = "SELECT * FROM Tbl_Emp";
SqlCommand cmd = new SqlCommand(sqlSelectAllQuery, con);
con.Open();
SqlDataReader rdr = cmd.ExecuteReader();
while (rdr.Read())
{
EmpVar employee = new EmpVar();
employee.Emp_Id = !(rdr["emp_id"] == DBNull.Value) ? Convert.ToInt32(rdr["emp_id"]) : 0;
employee.Emp_FirstName = !(rdr["emp_firstName"] == DBNull.Value) ? Convert.ToString(rdr["emp_firstName"]) : string.Empty;
employee.Emp_LastName = !(rdr["emp_lastName"] == DBNull.Value) ? Convert.ToString(rdr["emp_lastName"]) : string.Empty;
listEmployee.Add(employee);
}
con.Close();
}
return listEmployee;
}
}
}
Я установлю проект WebServicesFunctionality (pt.2) в качестве запускаемого проекта и сделаю снимок экрана с результатом, который я получаю для вашей справки
Веб-служба загружена в моем локальном браузере
Результат после вызова веб-метода сотрудника
Результат после вызова веб-метода рецепта
Теперь я уверен, что все, кто читает этот пост, будут иметь более четкое представление о том, что я пытаюсь сделать. Итак, теперь я прикреплю код для страницы .aspx сотрудника.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="EmployeeRecord.aspx.cs" Inherits="PracticeValidation.WebForm2" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Record of employees</title>
<meta name="description" content="JavaScript Grid with rich support for Data Filtering, Paging, Editing, Sorting and Grouping" />
<link href="Scripts/jqx.base.css" rel="stylesheet" type="text/css"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
<script src="Scripts/jquery-1.11.1.min.js"></script>
<script src="Scripts/jqxcore.js"></script>
<script src="Scripts/jqxdata.js"></script>
<script src="Scripts/jqxbuttons.js"></script>
<script src="Scripts/jqxscrollbar.js"></script>
<script src="Scripts/Menu.js"></script>
<script src="Scripts/jqxcheckbox.js"></script>
<script src="Scripts/jqxlistbox.js"></script>
<script src="Scripts/jqxdropdownlist.js"></script>
<script src="Scripts/jqxgrid.js"></script>
<script src="Scripts/jqxgrid.sort.js"></script>
<script src="Scripts/jqxgrid.pager.js"></script>
<script src="Scripts/jqxgrid.selection.js"></script>
<script src="Scripts/jqxgrid.edit.js"></script>
<script src="Scripts/demos.js"></script>
<script type="text/javascript">
$(document).ready(function () {
//Getting the source data with ajax GET request
source = {
datatype: "json",
datafields: [
{ name: 'EmpID' },
{ name: 'EmpLastName' },
{ name: 'EmpFirstName' }
],
async: false,
record: 'Table',
url: 'WebService1.asmx/GetEmp',
};
var dataAdapter = new $.jqx.dataAdapter(source,
{ contentType: 'application/json; charset=utf-8' }
);
$("#grid").jqxGrid({
source: dataAdapter,
theme: 'classic',
width: '100%',
columns: [
{ text: 'EmpID', dataField: 'EmpID', width: 250, hidden: false },
{ text: 'EmpLastName', dataField: 'EmpLastName', width: 150 },
{ text: 'EmpFirstName', dataField: 'EmpFirstName', width: 180 },
]
});
});
</script>
</head>
<body class ='default'>
<form id="form1" runat="server">
<div>
<h1>Welcome to the record of employees page</h1>
<h4>Click <a href="HomePage.aspx">here</a> to go back to the main login page</h4>
</div>
<div id="grid">
</div>
</form>
</body>
</html>
Наконец, я прикреплю снимок экрана с полученным результатом.
Вывод страницы записи сотрудника .aspx : 
Спасибо всем, кто прочитал весь пост, и будьте в безопасности!