Вопрос или проблема
У меня есть два выпадающих списка: один с именем, а другой с номером контакта. При выборе имени соответствующий номер контакта нужно показать с помощью ajax в .net.
Вот мой код события загрузки [в котором привязывается выпадающий список]
service.BindDropdownList(cmb_customer, "tbl_Ledger", "Name", "Ledger_Id", "where BranchId = " + Session["BranchId"] + " and Grup = 'CUSTOMER'", "SELECT CUSTOMER");
service.BindDropdownList(cmb_contactno, "tbl_Ledger", "ContactNo", "Ledger_Id", "where BranchId = " + Session["BranchId"] + " and Grup = 'CUSTOMER' and ContactNo != ''", "SELECT CONTACT NO.");
Вот мой код дизайна выпадающего списка
<asp:DropDownList ID="cmb_customer" runat="server" ClientIDMode="Static" ></asp:DropDownList>
<asp:DropDownList ID="cmb_contactno" runat="server" ClientIDMode="Static"></asp:DropDownList>
Вот мой ajax код
$("#<%= cmb_customer.ClientID %>").change(function () {
var Name = document.getElementById('<%= cmb_customer.ClientID %>').value;
var dataToSend = JSON.stringify({ name: Name });
$.ajax({
type: "POST",
url: "Quotation.aspx/GetCustomerDetail",
async: true,
data: dataToSend,
dataType: "JSON",
contentType: "application/json; charset=utf-8",
success: function (data) {
alert(data.d.ContactNo);
if (data.d.Redirect == "YES") {
Response.redirect("Index.aspx");
}
else {
$("#<%= cmb_contactno.ClientID %>").val(data.d.ContactNo);
<%--document.getElementById('<%= cmb_contactno.ClientID %>').sele = data.d.ContactNo;--%>
}
},
error: function () {
// Обработка ошибок
$('#result').html('<p>Произошла ошибка</p>');
},
complete: function () {
// Скрыть индикатор загрузки
$('#loadingOverlay').hide();
}
});
});
Вот мой код метода веб-сервиса
[WebMethod]
public static QuotationModel GetCustomerDetail(int name)
{
Services service = new Services();
QuotationModel quotationModel = new QuotationModel();
if (HttpContext.Current.Session["BranchId"] == null)
{
quotationModel.Redirect = "YES";
return quotationModel;
}
else
{
string qryGetCustomerDetail = "";
qryGetCustomerDetail = " select * from tbl_Ledger where Ledger_ID = " + name + "";
DataTable dtGetCustomerDetail = new DataTable();
dtGetCustomerDetail = service.GetDataTable(qryGetCustomerDetail);
quotationModel.ContactNo = dtGetCustomerDetail.Rows[0]["Ledger_ID"].ToString();
quotationModel.Redirect = "NO";
return quotationModel;
}
}
Ответ или решение
Для решения задачи изменения содержимого одного выпадающего списка (DropdownList) на основе выбора в другом выпадающем списке с использованием Ajax в ASP.NET, необходимо выполнить несколько шагов. Давайте рассмотрим это последовательно.
1. Связывание выпадающих списков в событии загрузки страницы
Сначала вам нужно связать ваши выпадающие списки в методе Page_Load, что вы уже сделали:
service.BindDropdownList(cmb_customer, "tbl_Ledger", "Name", "Ledger_Id", "where BranchId = " + Session["BranchId"] + " and Grup = 'CUSTOMER'", "SELECT CUSTOMER");
service.BindDropdownList(cmb_contactno, "tbl_Ledger", "ContactNo", "Ledger_Id", "where BranchId = " + Session["BranchId"] + " and Grup = 'CUSTOMER' and ContactNo != ''", "SELECT CONTACT NO.");2. Разметка выпадающих списков
Разметка для ваших выпадающих списков выглядит следующим образом:
<asp:DropDownList ID="cmb_customer" runat="server" ClientIDMode="Static"></asp:DropDownList>
<asp:DropDownList ID="cmb_contactno" runat="server" ClientIDMode="Static"></asp:DropDownList>3. Ajax-код для обработки изменения выпадающего списка
Ваш текущий код Ajax почти завершен, но вам нужно исправить передачу значения при изменении выпадающего списка. Вместо строки int name в методе WebMethod необходимо передавать string, чтобы вы могли передавать выбранное имя.
Вот ваш обновленный код Ajax:
$("#<%= cmb_customer.ClientID %>").change(function () {
var name = $(this).val(); // Получение выбранного имени
var dataToSend = JSON.stringify({ name: name });
$.ajax({
type: "POST",
url: "Quotation.aspx/GetCustomerDetail",
async: true,
data: dataToSend,
dataType: "json",
contentType: "application/json; charset=utf-8",
success: function (data) {
if (data.d.Redirect == "YES") {
window.location.href = "Index.aspx"; // переадресация
} else {
$("#<%= cmb_contactno.ClientID %>").val(data.d.ContactNo);
}
},
error: function () {
$('#result').html('<p>Произошла ошибка</p>');
},
complete: function () {
$('#loadingOverlay').hide(); // скрытие индикатора загрузки
}
});
});4. Метод WebMethod для получения данных
Ваша функция GetCustomerDetail должна принимать string name и выполнять запрос для получения информации о контакте. Измените ваш метод следующим образом:
[WebMethod]
public static QuotationModel GetCustomerDetail(string name)
{
Services service = new Services();
QuotationModel quotationModel = new QuotationModel();
if (HttpContext.Current.Session["BranchId"] == null)
{
quotationModel.Redirect = "YES";
return quotationModel;
}
else
{
string qryGetCustomerDetail = "SELECT * FROM tbl_Ledger WHERE Name = @Name";
DataTable dtGetCustomerDetail = new DataTable();
// Используйте параметризованный запрос для безопасности
using (SqlConnection conn = new SqlConnection("your_connection_string"))
{
using (SqlCommand cmd = new SqlCommand(qryGetCustomerDetail, conn))
{
cmd.Parameters.AddWithValue("@Name", name);
SqlDataAdapter da = new SqlDataAdapter(cmd);
da.Fill(dtGetCustomerDetail);
}
}
if (dtGetCustomerDetail.Rows.Count > 0)
{
quotationModel.ContactNo = dtGetCustomerDetail.Rows[0]["ContactNo"].ToString(); // Обратите внимание, что изменили на "ContactNo"
}
quotationModel.Redirect = "NO";
return quotationModel;
}
}Заключение
Теперь ваше приложение должно корректно обрабатывать изменения в первом выпадающем списке и обновлять второй на основании выбранного имени. Убедитесь, что все подключаемые библиотеки, такие как jQuery, доступны на странице, а метод GetCustomerDetail настроен для безопасного выполнения запросов с использованием параметризованных запросов для предотвращения SQL-инъекций.