मैं एक गतिशील वेब फॉर्म बना रहा हूं (जिसका अर्थ है कि फ़ील्ड की अतिरिक्त पंक्तियों को आवश्यकतानुसार जोड़ा जा सकता है) एक खोज योग्य ड्रॉप डाउन सूची के साथ एक डेटाबेस से पॉप्युलेट प्रविष्टियों वाले फ़ील्ड में से एक के रूप में। मैं चयन 2 के माध्यम से ड्रॉप डाउन को खोजने योग्य बना रहा हूं, और मैं जावास्क्रिप्ट एपेंड का उपयोग करके फॉर्म में नई पंक्तियां जोड़ रहा हूं। मेरे पास ViewBag तत्व है जिसे मैं प्रत्येक पंक्ति में ड्रॉपडाउन बॉक्स को पॉप्युलेट करने के लिए उपयोग करने का प्रयास कर रहा हूं। वर्तमान में, मैं सूची तत्व में आइटम के रूप में कई प्रविष्टियां करने में सक्षम हूं, लेकिन मैं ड्रॉप डाउन को पॉप्युलेट करने के लिए आइटम के लिए मान और टेक्स्ट गुणों तक पहुंचने में असमर्थ हूं। मैं चयनित संपत्ति तक पहुंचने में सक्षम हूं।

मेरा नियंत्रक निम्न जैसा दिखता है:

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

अगर मैं "आइटम.वैल्यू" और "आइटम.टेक्स्ट" को "आइटम.सेलेक्टेड" के लिए स्विच आउट करता हूं तो कोड निष्पादित होगा और ड्रॉप डाउन सूची में "गलत" प्रदर्शित करेगा। अगर कोई मुझे बता सकता है कि मैं ड्रॉप डाउन को पॉप्युलेट करने के लिए "वैल्यू" और "टेक्स्ट" फ़ील्ड तक कैसे पहुंच सकता हूं, तो मैं इसकी बहुत सराहना करता हूं।

0
wurscht7 30 अप्रैल 2021, 08:34

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;

नतीजा:

enter image description here

आप ViewBag में मान की जांच करने के लिए डीबग कर सकते हैं, और यदि आप item.Value और item.Text का उपयोग करते हैं, तो क्या कोई त्रुटि संदेश है?

0
mj1313 3 मई 2021, 05:44

तालिका को भरने के लिए जावास्क्रिप्ट का उपयोग करने की कोई आवश्यकता नहीं है। इन उद्देश्यों के लिए आपको 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>
0
Arsen 30 अप्रैल 2021, 09:58