查找每个控件的id，并使用asp.net将下拉列表与数据库绑定

本文关键字：net asp 下拉列表 绑定 数据库 控件 id 查找 | 更新日期: 2023-09-27 18:06:31

我正在研究一个asp.net应用程序，我使用SheepIt插件来动态生成控件，如文本框和下拉列表。我想绑定jquery-ui- calendar文本框，我想绑定下拉列表与数据库项目。我的代码是:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript" src="jquery-1.4.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" />
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<!--<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>-->
<script type="text/javascript" src="jquery.sheepItPlugin.js"></script>
<script type="text/javascript">
    var sheepItForm = {};
    $(document).ready(function () {
        sheepItForm = $('#sheepItForm').sheepIt({
            separator: '',
            allowRemoveLast: true,
            allowRemoveCurrent: true,
            allowRemoveAll: true,
            allowAdd: true,
            allowAddN: true,
            maxFormsCount: 10,
            minFormsCount: 0,
            iniFormsCount: 0,
            afterAdd: function (source, newForm) {
                $(".from").datepicker({
                    defaultDate: "+1w",
                    changeMonth: true,
                    numberOfMonths: 1,
                    onClose: function (selectedDate) {
                        $(".to").datepicker("option", "minDate", selectedDate);
                    }
                });
                $(".to").datepicker({
                    defaultDate: "+1w",
                    changeMonth: true,
                    numberOfMonths: 1,
                    onClose: function (selectedDate) {
                        $(".from").datepicker("option", "maxDate", selectedDate);
                    }
                });
                $.ajax({
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    url: "SheepingExample.aspx/BindDatatoDropdown",
                    data: "{}",
                    dataType: "json",
                    success: function (data) {
                        $.each(data.d, function (key, value) {
                            $("#sheepItForm_#index#_ddlRoom").append($("<option></option>").val(value.ID).html(value.Name));
                        });
                    }
                });
            }
        });
    });
</script>
<style>
    a {
        text-decoration: underline;
        color: #00F;
        cursor: pointer;
    }
    #sheepItForm_controls div, #sheepItForm_controls div input {
        float: left;
        margin-right: 10px;
    }
    #executeLink {
        clear: both;
        margin-top: 20px;
    }
</style>
</head>
<body>
 <!-- sheepIt Form -->
<div id="sheepItForm">
    <!-- Form template-->
    <div id="sheepItForm_template">
        <label for="sheepItForm_#index#_phone">Booking Details <span id="sheepItForm_label"></span></label>
        <input id="sheepItForm_#index#_phone" name="person[phones][#index#][phone]" type="text" size="15" maxlength="10" style="display: none;" />
        <select id="sheepItForm_#index#_ddlRoom" name="person[phones][#index#][ddlRoom]" class="sel"></select>
        <input id="sheepItForm_#index#_from" class="from" placeholder="Enter From Date" name="person[phones][#index#][from]" type="text" size="15" maxlength="10" />
        <input id="sheepItForm_#index#_to" class="to" placeholder="Enter to Date" name="person[phones][#index#][to]" type="text" size="15" maxlength="10" />
        <a id="sheepItForm_remove_current">
            <img class="delete" src="images/cross.png" width="16" height="16" border="0">
        </a>
    </div>
    <!-- /Form template-->
    <!-- No forms template -->
    <div id="sheepItForm_noforms_template">No phones</div>
    <!-- /No forms template-->
    <!-- Controls -->
    <div id="sheepItForm_controls">
        <div id="sheepItForm_add"><a><span>Add phone</span></a></div>
        <div id="sheepItForm_remove_last"><a><span>Remove</span></a></div>
        <div id="sheepItForm_remove_all"><a><span>Remove all</span></a></div>
        <div id="sheepItForm_add_n">
            <input id="sheepItForm_add_n_input" type="text" size="4" />
            <div id="sheepItForm_add_n_button"><a><span>Add</span></a></div>
        </div>
    </div>
    <!-- /Controls -->

</div>
<!-- /sheepIt Form -->

</body>
</html>

和My webservice绑定下拉列表database-items是:

[WebMethod]
public static RoomType[] BindDatatoDropdown()
{
    DataTable dt = new DataTable();
    List<RoomType> details = new List<RoomType>();
    using (SqlConnection con = new SqlConnection(@"Data Source=.'sqlexpress;Initial Catalog=Raju;Integrated Security=true"))
    {
        using (SqlCommand cmd = new SqlCommand("SELECT ID,Name FROM RoomType_Master", con))
        {
            con.Open();
            SqlDataAdapter da = new SqlDataAdapter(cmd);
            da.Fill(dt);
            RoomType room = new RoomType();
            room.ID = 0;
            room.Name = "select";
            details.Add(room);
            foreach (DataRow dtrow in dt.Rows)
            {
                RoomType country = new RoomType();
                country.ID = Convert.ToInt32(dtrow["ID"].ToString());
                country.Name = dtrow["Name"].ToString();
                details.Add(country);
            }
        }
    }
    return details.ToArray();
}

，但当我试图绑定下拉列表与它的id然后没有得到绑定。它也没有给出任何错误。

查找每个控件的id，并使用asp.net将下拉列表与数据库绑定

在jQuery中，$(document).ready()函数期望在DOM中加载所有元素。任何动态加载的元素都会被忽略，这就是为什么它不会绑定;它找不到页面上的元素。jQuery中有其他方法(参见文档)，或者您可以重新注册脚本。

如果使用MVC razor:

@if(Request.IsAjaxRequest()){
    <script>...</script>
}

如果使用WebForms，则使用ClientScriptManager.RegisterClientScriptBlock。

在jQuery中，你可以像这样使用事件委托:

$('<selector>').on('click', '#target', function(){…});
相关文章：