تگ option

سلام اام خانوادگی موجود در جدول دیتابیس و چگونه در ابشن زیر قرار بدم ؟؟؟؟

کد HTML:

---

<label for="exampleDataList" class="form-label">Datalist example</label><input class="form-control" list="datalistOptions" id="exampleDataList" placeholder="Type to search...">
<datalist id="datalistOptions">
  <option value="San Frabarnamenevisco">
  <option value="New York">
  <option value="Seattle">
  <option value="Los Angeles">
  <option value="Chicago"> </datalist>

---

سلام و روز خوش

شما به چند روش میتونین این رو پیاده کنین؛

1- یک datalist خام و خالی در صفحه وب تعریف کنین و با کد سمت سرور لیست optionها رو بسازین.
برای این کار لازم هست برای دیتالیست 'runat='server مشخص کنین تا در code-behind بهش دسترسی داشته باشین:

<label for="input">City:</label>

<input list="datalist" id="input" placeholder="Type to search..." />

<datalist id="datalist" runat="server">

</datalist>

با فرض این که شما دیتا رو قبلا از دیتابیس خوندین و در یک دیتاتیبل به اسم CitiesDT ریختین که دو ستون CityID , City داره:

DIM sb AS NEW STRINGBUILDER

FOR EACH row AS DATAROW IN CitiesDT.rows

    sb.append($"<option itemid='{row("CityID")}' value='{row("City")}'>")

NEXT

datalist.innerhtml= sb.tostring

این کد رو باید در page load اجرا کنین.

روش بالا البته درسته و بدون اشکال هم کار میکنه و موردی هم نداره،
ولی همیشه مسائل اینقدر ساده نیست و گاهی پیش میاد که المان پیچیده تری داریم که نیاز به کنترل بیشتری داره (مثل table)
و در این حالت دیگه چسبوندن بخش های مختلف بصورت استرینگ به هم و ریختنش در innerhtml هم کدنویسی اولیه و هم نگهداریش سخت میشه.

2- کل دیتالیست رو سمت سرور میسازیم و بعد به صفحه اضافه میکنیم،
برای این کار یک placeholder روی صفحه میگذاریم که در code-behind به موقعیتی که باید المان ساخته شده رو اضافه کنیم دسترسی داشته باشیم:

<label for="input">City:</label>

<input list="datalist" id="input" placeholder="Type to search..." />

<asp:placeholder id="ph" runat="server"></asp:placeholder>

حالا کافی هست برای هر المان یک ابجکت از htmlgenericcontrol بسازیم و روی اون کار کنیم:

DIM dl AS NEW HTMLGENERICCONTROL("datalist")

dl.id= "datalist"

FOR EACH row AS DATAROW IN CitiesDT.rows

    DIM opt AS NEW HTMLGENERICCONTROL("option")

    opt.attributes.add("itemid" , row("cityid"))

    opt.attributes.add("value" , row("city"))

    dl.controls.add(opt)

NEXT

ph.controls.add(dl)

راه های دیگه هم هست، ولی برای همه مسائل شاید مناسب نباشه؛

3- میتونین دیتا رو در سمت سرور بعنوان کد جاوااسکریپت به صفحه اضافه کنین و در سمت کلاینت دیتالیست رو با این دیتا پر کنین.