C# 引导下拉列表/文本数据绑定

我已经使用ASP.net framework web表单和引导为部门创建了一个下拉列表-

<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>

我得到的错误消息是ddl_dept在当前上下文中不存在。 当我使用同一个下拉列表时，使用它是有效的。 此外，来自输入文本控件的ID引用无法从编码中识别。我的意思是txt_firstName无法从编码页面识别。我不知道我错过了什么

选择标记中缺少runat=server属性

因此，它应该是：

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

---

出现此错误的原因是.NET Framework无法识别任何未由runat server修饰的控件。这就像Teal.NETFramework考虑将每个RunTale=服务器的控件作为服务器控件并对其执行操作。

< P>我理解ASP.NET将Web控件呈现为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>

解决方案2： 另一种不使用ASP.NET控件的解决方案是通过使用AJAX调用ASPX WebMethod，我不建议这样做，因为WebMethod必须是静态的，这意味着很难引用其他非静态的控件或变量，并且从长远来看很难维护我最讨厌的ASP.NET：

C代码： 您需要创建此web方法：

[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代码：

<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>

在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>

---

解决此问题的方法是使用asp控件，然后查看这些控件如何在浏览器中呈现为HTML F12开发工具，并检查HTML。然后将这些控件替换为该HTML。根据发布数据的方式，HTML元素上可能缺少name属性。第二件事：asp控件可以呈现不同于您在控件中看到的Id，这取决于您的设置。当您查看控件的呈现HTML时，当我使用相同的下拉菜单时，您将能够知道它的工作原理。。这就是webforms的工作原理。。。使用该选项或使用MVC/CORE是否意味着我们不能在ASP.NET framework web表单中使用引导？这会产生一个错误：无法从“System.web.UI.HtmlControls.HtmlSelect”转换为“System.web.UI.WebControls.DropDownList”，然后您可以使用ASP控件本身。只需使用它并构建您的项目。

<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>