تگ option

[علی فتحی]

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


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

[mazoolagh]

سلام و روز خوش

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

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 اجرا کنین.

[mazoolagh]

روش بالا البته درسته و بدون اشکال هم کار میکنه و موردی هم نداره،
ولی همیشه مسائل اینقدر ساده نیست و گاهی پیش میاد که المان پیچیده تری داریم که نیاز به کنترل بیشتری داره (مثل 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)

[mazoolagh]

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

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