выпадающий список начальной загрузки / привязка текстовых данных

#c# #asp.net #bootstrap-4 #webforms

#c# #asp.net #bootstrap-4 #веб-формы

Вопрос:

Я создал выпадающий список для отдела, используя ASP.net веб-форма фреймворка и начальная загрузка —

 <div class="form-group">
   <label for="ddl_dept">Primary Department<span style="color: Red">*</span></label>
   <select class="form-control" id="ddl_dept" tabindex="5">
      <option value="">Please Select a Department</option>
   </select>
</div>
  

и пытаюсь получить элемент из базы данных. вот мой код на C#

 string constr = ConfigurationManager.ConnectionStrings["MyConnectionString"].ConnectionString;
   using (SqlConnection con = new SqlConnection(constr))
   {
      using (SqlCommand cmd = new SqlCommand("SELECT DivCode,DivDesc FROM Z_Division"))
      {
         cmd.CommandType = CommandType.Text;
         cmd.Connection = con;
         con.Open();
         ddl_dept.DataSource = cmd.ExecuteReader();
         ddl_dept.DataTextField = "DivDesc";
         ddl_dept.DataValueField = "DivCode";
         ddl_dept.DataBind();
         con.Close();
      }
   }
  

Сообщение об ошибке, которое я получаю, ddl_dept не существует в текущем контексте.
когда я использую тот же выпадающий список с помощью <asp:DropDownList ID="ddl_dept" runat="server"></asp:DropDownList> , это работает.
Также ссылка на идентификатор из элемента управления вводом текста не распознается из кодирования <input class="form-control" placeholder="First Name" type="text" id="txt_firstName" tabindex="2"> . Я имею в виду, txt_firstName не распознается со страницы кодирования. Я не знаю, чего мне не хватает!

Комментарии:

1. Способ, которым вы можете решить эту проблему, — использовать элементы управления asp, а затем посмотреть, как эти элементы управления отображаются в HTML (F12 dev tools в вашем браузере и проверить HTML)., а затем заменить эти элементы управления на этот HTML, например, вам не хватает атрибута name в ваших элементах HTML (который может потребоваться, в зависимости от способа публикации ваших данных). Во-вторых: элементы управления asp могут отображать идентификаторы, отличные от того, что вы видите в элементе управления — это зависит от ваших настроек. Вы сможете определить, когда посмотрите на отображаемый HTML элемента управления

2. when I use the same dropdown using <asp:DropDownList ID="ddl_dept" runat="server"></asp:DropDownList> it works. . Ну, вот как работает webforms… Либо используйте это, либо используйте MVC / Core

3. Означает ли это, что мы не можем использовать Bootstrap в ASP.NET веб-форма фреймворка?

Ответ №1:

Я понимаю, что ASP .NET отображает WebControls как HTML, что означает, что если вы хотите сохранить «стиль начальной загрузки» или работать с DOM через какой-либо язык на клиенте, вы можете (вы можете проверить это через инспектор браузера). Однако я думаю, что есть два решения вашего вопроса в зависимости от подхода:

Решение 1: Самое простое, и если ваша цель состоит в том, чтобы сохранить стиль начальной загрузки с помощью элемента управления DropDownList, это использовать тег CssClass (и добавить небольшую часть кода C # метода для отображения этого параметра критерия выбора):

ASPX-код:

 <div class="form-group">
    <label for="ddl_dept">Primary Department<span style="color: Red">*</span></label>
    <asp:DropDownList ID="ddl_dept" runat="server" CssClass="form-control" ClientIDMode="Static"></asp:DropDownList>
</div>
  

C # код:

 string constr = ConfigurationManager.ConnectionStrings["MyConnectionString"].ConnectionString;
using (SqlConnection con = new SqlConnection(constr))
{
   using (SqlCommand cmd = new SqlCommand("SELECT DivCode,DivDesc FROM Z_Division"))
   {
      cmd.CommandType = CommandType.Text;
      cmd.Connection = con;
      con.Open();
      ddl_dept.DataSource = cmd.ExecuteReader();
      ddl_dept.DataTextField = "DivDesc";
      ddl_dept.DataValueField = "DivCode";
      ddl_dept.DataBind();
      con.Close();
   }
}

//Add this line
ddl_dept.Items.Insert(0, new System.Web.UI.WebControls.ListItem("Please Select a Department", "0"));
  

Решение 2:
Другое решение без использования ASP.Управление СЕТЬЮ осуществляется с помощью вызова веб-метода ASPX с использованием AJAX, который я не рекомендую, потому что веб-метод должен быть статическим, что означает, что трудно ссылаться на другие элементы управления или переменные (не статические) и затрудняет их обслуживание в долгосрочной перспективе (что я больше всего ненавижу в ASP .NET):

Код C #: Вам нужно создать этот веб-метод:

 [System.Web.Services.WebMethod(EnableSession = false)]
[System.Web.Script.Services.ScriptMethod(ResponseFormat = System.Web.Script.Services.ResponseFormat.Json)]
public static string WebMethodLoadDropdownList()
{
    using (SqlConnection con = new SqlConnection(constr))
    {
       using (SqlCommand cmd = new SqlCommand("SELECT DivCode,DivDesc FROM Z_Division"))
       {
          DataTable dt = new DataTable();
          cmd.CommandType = CommandType.Text;
          cmd.Connection = con;
          con.Open();
          dt.Load(cmd.ExecuteReader());
          con.Close();
          
          // Return List converted in JSON object
          return Newtonsoft.Json.JsonConvert.SerializeObject(dt.AsEnumerable().ToList());
       }
    }
}
  

ASPX-код:

Добавьте этот раздел скрипта в форму yout aspx:

 <script type="text/javascript">

    $(document).ready(function () {

        $.ajax({
            async: false,
            cache: false,
            timeout: 30000,
            type: "POST",
            url: '<%= ResolveUrl("YourAspxNameForm.aspx/WebMethodLoadDropdownList") %>',
            contentType: "application/json; charset=utf-8",
            data: null, // Nothing
            dataType: "json",
            success: function (msg) {

                //console.log(msg.d); this line print the result from the webmethod

                if (msg.d) {

                    var obj = JSON.parse(msg.d);

                    $.each(obj, function (key, value) {
                        //console.log(value.Code);
                        //This line add the new item in the dropdownlist
                        $('#ddl_dept1').append(new Option(value.DivDesc, value.DivCode));
                    });
                }
                else {
                    alert('Error JSON Data');
                }

            }
        });
    });

</script>
  

Ответ №2:

Вам не хватает runat="server" атрибута в вашей select разметке.

Так и должно быть:

  <select class="form-control" runat="server" id="ddl_dept" tabindex="5">
      <option value="">Please Select a Department</option>
 </select>
  

Причина, по которой вы получаете эту ошибку, заключается в том, что .NET Framework не распознает какие-либо элементы управления, которые не оформлены runat сервером. Это все равно что рассказывать .NET framework рассматривает каждый элемент управления, оформленный с помощью runat="server" , как серверный элемент управления и выполняет с ним действия.

Комментарии:

1. Это выдает ошибку: не удается преобразовать из ‘System.Web.UI.HtmlControls. HtmlSelect’ to ‘System.Web.UI.WebControls. Выпадающий список ‘

2. Затем вы можете использовать сам элемент управления asp. <asp: выпадающий список runat=»server» CssClass=»form-control» ID =»ddl_dept»> </Выпадающий список> просто используйте это и создайте свой проект.