मैं एक गतिशील वेब फॉर्म बना रहा हूं (जिसका अर्थ है कि फ़ील्ड की अतिरिक्त पंक्तियों को आवश्यकतानुसार जोड़ा जा सकता है) एक खोज योग्य ड्रॉप डाउन सूची के साथ एक डेटाबेस से पॉप्युलेट प्रविष्टियों वाले फ़ील्ड में से एक के रूप में। मैं चयन 2 के माध्यम से ड्रॉप डाउन को खोजने योग्य बना रहा हूं, और मैं जावास्क्रिप्ट एपेंड का उपयोग करके फॉर्म में नई पंक्तियां जोड़ रहा हूं। मेरे पास
मेरा नियंत्रक निम्न जैसा दिखता है:
//Populate program search dropdown from DB
List<SelectListItem> ls = new List<SelectListItem>();
var lm = entities.SCInnovationProject;
foreach (var temp in lm)
{
ls.Add(new SelectListItem() { Text = temp.ProjectName, Value = temp.SCInnovationProjectId.ToString() });
}
ViewBag.projectSearch = ls;
मेरे दृश्य का जावास्क्रिप्ट भाग इस तरह दिखता है:
<script>
var counter = 1;
$(function () {
$('#add').click(function () {
$('<tr id="tablerow' + counter + '">' +
'<td>' +
'<select class="catch form-control" id="dependentProjectID_' + counter + '_" name="dependentProjectID[' + counter + ']"><option value="">Select dependent project</option>' +
@{foreach (var item in ViewBag.projectSearch)
{
@:'<option value="@item.Value">@item.Text</option>' +
}
}
'</select>' +
'</td>' +
'</tr>').appendTo('#submissionTable');
$('.catch').select2();
counter++;
return false;
});
});
function removeTr(index) {
if (counter > 1) {
$('#tablerow' + index).remove();
counter--;
}
return false;
}
</script>
अगर मैं "आइटम.वैल्यू" और "आइटम.टेक्स्ट" को "आइटम.सेलेक्टेड" के लिए स्विच आउट करता हूं तो कोड निष्पादित होगा और ड्रॉप डाउन सूची में "गलत" प्रदर्शित करेगा। अगर कोई मुझे बता सकता है कि मैं ड्रॉप डाउन को पॉप्युलेट करने के लिए "वैल्यू" और "टेक्स्ट" फ़ील्ड तक कैसे पहुंच सकता हूं, तो मैं इसकी बहुत सराहना करता हूं।
2 जवाब
मैंने आपके कोड का परीक्षण किया, ऐसा लगता है कि मेरी तरफ से कोई समस्या नहीं है।
राय:
<button id="btn">Test</button>
<div id="submissionTable"></div>
लिपियों:
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script>
$("#btn").click(function () {
var counter = 1;
$('<tr id="tablerow' + counter + '">' +
'<td>' +
'<select class="catch form-control" id="dependentProjectID_' + counter + '_" name="dependentProjectID[' + counter + ']"><option value="">Select dependent project</option>' +
@{foreach (var item in ViewBag.projectSearch)
{
@:'<option value="@item.Value">@item.Text</option>' +
}
}
'</select>' +
'</td>' +
'</tr>').appendTo('#submissionTable');
$('.catch').select2();
counter++;
return false;
})
</script>
नियंत्रक:
List<SelectListItem> ls = new List<SelectListItem>();
ls.Add(new SelectListItem { Value = "1", Text = "A" });
ls.Add(new SelectListItem { Value = "2", Text = "B" });
ls.Add(new SelectListItem { Value = "3", Text = "C" });
ViewBag.projectSearch = ls;
नतीजा:
आप ViewBag में मान की जांच करने के लिए डीबग कर सकते हैं, और यदि आप item.Value और item.Text का उपयोग करते हैं, तो क्या कोई त्रुटि संदेश है?
तालिका को भरने के लिए जावास्क्रिप्ट का उपयोग करने की कोई आवश्यकता नहीं है। इन उद्देश्यों के लिए आपको html को रेजर के साथ संयोजित करने की आवश्यकता है। मुझे विश्वास है कि आपने यही करने की कोशिश की है
<table>
@for (var i = 0; i < @ViewBag.projectSearch.Count; i++)
{
<tr id=@string.Format("tablerow{0}", @i)>
<td>
@Html.DropDownList("dependentProjectID_" + i, (List<SelectListItem>)@ViewBag.projectSearch, "Select dependent project", null)
</td>
</tr>
}
</table>