रेजर के साथ MVC 4 में ड्रॉपडाउनलिस्ट


142

मैं एक बनाने की कोशिश कर रहा हूँ DropDownList एक उस्तरा दृश्य पर ।

क्या कोई मेरी इसमें मदद करेगा?

सामान्य HTML5 कोड:

<select id="dropdowntipo">
    <option value="Exemplo1">Exemplo1</option>
    <option value="Exemplo2">Exemplo2</option>
    <option value="Exemplo3">Exemplo3</option>
</select>

मैंने यह कोशिश की:

@{
    var listItems = new List<ListItem> { 
        new ListItem { Text = "Exemplo1", Value = "Exemplo1" }, 
        new ListItem { Text = "Exemplo2", Value = "Exemplo2" }, 
        new ListItem { Text = "Exemplo3", Value = "Exemplo3" } 
    };
}

@Html.DropDownListFor(model => 
    model.tipo, 
    new SelectList(listItems), 
    "-- Select Status --"
)

7
आपका var listItems = ...कंट्रोल आपके व्यू में होना चाहिए न कि आपके कंट्रोलर में।
लियाम

1
यह MVC3 है, लेकिन यह MVC4 के समान सिंटैक्स है: stackoverflow.com/questions/5070762/…
Liam

2
@ लिआम: यह शायद व्यू मॉडल में है, कंट्रोलर में नहीं। नियंत्रक पर निर्भरता नहीं होनी चाहिए ListItemक्योंकि यह यूआई-बाउंड अवधारणा है। यह वास्तव में दृश्य मॉडल में नहीं होना चाहिए , केवल दृश्य में। नियंत्रक को दृश्य मॉडल का निर्माण करना चाहिए, दृश्य मॉडल में डेटा होना चाहिए, दृश्य ListItemको उस डेटा के लिए UI तत्व (जैसे ) का निर्माण करना चाहिए ।
डेविड

2
देशी HTML पर रेजर का उपयोग करने का मूल्य क्या है; यह प्रदर्शन या कार्यक्षमता है? चूंकि नियंत्रक से कोई डेटा नहीं खींचा जा रहा है।
बैरी MSIH

1
कृपया कोई मुझे बताएं कि जेनेरिक अर्थों में model.tipo प्रॉपर्टी क्या दर्शाती है।

जवाबों:


249
@{
   List<SelectListItem> listItems= new List<SelectListItem>();
   listItems.Add(new SelectListItem
        {
          Text = "Exemplo1",
          Value = "Exemplo1"
        });
   listItems.Add(new SelectListItem
        {
            Text = "Exemplo2",
            Value = "Exemplo2",
            Selected = true
        });
   listItems.Add(new SelectListItem
        {
            Text = "Exemplo3",
            Value = "Exemplo3"
        });
}

@Html.DropDownListFor(model => model.tipo, listItems, "-- Select Status --")

2
यदि आपने सूची को नियंत्रक में परिभाषित किया है, तो आपको इसे देखने के लिए व्यू की आवश्यकता है, जैसे: @ Html.DropDownListFor (मॉडल => model.model_year, ViewBag.Years सूची <SelectListemem>, "- वर्ष का चयन करें -")
बशर अबू शमा

4
आखिरी पंक्ति पर - आप कैसे जानते हैं कि किस मॉडल को कॉल करना है? "टिपो" कहाँ से आता है?
आंद्रे

2
@ और यह मॉडल प्रॉपर्टी का नाम है। उसने प्रश्न से इसे पढ़ा। मान उस फ़ील्ड से बांधता है।
१५:१५

आपको सावधान रहना होगा क्योंकि पोस्ट किए गए समाधानों में से कोई भी किसी भी प्रकार का सर्वर-साइड सत्यापन नहीं करता है। यहां एक सुरुचिपूर्ण समाधान है जो क्लाइंट-साइड और सर्वर-साइड सत्यापन दोनों को निष्पादित करता है ताकि यह सुनिश्चित हो सके कि वैध डेटा मॉडल पर पोस्ट किया गया है। stackoverflow.com/a/56185910/3960200
एटिएन चारलैंड

73
@{var listItems = new List<ListItem>
    {
          new ListItem { Text = "Exemplo1", Value="Exemplo1" },
          new ListItem { Text = "Exemplo2", Value="Exemplo2" },
          new ListItem { Text = "Exemplo3", Value="Exemplo3" }
    };
    }
        @Html.DropDownList("Exemplo",new SelectList(listItems,"Value","Text"))

इस उदाहरण को काम करने के लिए मैंने इस कोड सेगमेंट के ऊपर इसे जोड़ा है। @use System.Web.UI.ebControls;
बद्र

42

आप इसका उपयोग कर सकते हैं:

@Html.DropDownListFor(x => x.Tipo, new List<SelectListItem>
    {
                        new SelectListItem() {Text = "Exemplo1", Value="Exemplo1"},
                        new SelectListItem() {Text = "Exemplo2", Value="Exemplo2"},
                        new SelectListItem() {Text = "Exemplo3", Value="Exemplo3"}
    })  

1
"टिपो" क्या है?
आंद्रे

1
@Andre। मॉडल पर संपत्ति टिपो। पहली पोस्ट देखें।
गेब्रियल सिमास

1
धन्यवाद, मुझे अभी भी पता नहीं है कि वह कहाँ से मिला है
आंद्रे

22

// ViewModel

public class RegisterViewModel
{

    public RegisterViewModel()
    {
        ActionsList = new List<SelectListItem>();
    }

    public IEnumerable<SelectListItem> ActionsList { get; set; }

    public string StudentGrade { get; set; }

  }

// Enum Class:

public enum GradeTypes
{
    A,
    B,
    C,
    D,
    E,
    F,
    G,
    H
}

// कंट्रोलर एक्शन

 public ActionResult Student()
    {
RegisterViewModel vm = new RegisterViewModel();
IEnumerable<GradeTypes> actionTypes = Enum.GetValues(typeof(GradeTypes))
                                             .Cast<GradeTypes>();
        vm.ActionsList = from action in actionTypes
                         select new SelectListItem
                         {
                             Text = action.ToString(),
                             Value = action.ToString()
                         };
        return View(vm);
    }

// देखें एक्शन

 <div class="form-group">
                                <label class="col-lg-2 control-label" for="hobies">Student Grade:</label>
                                <div class="col-lg-10">
                                   @Html.DropDownListFor(model => model.StudentGrade, Model.ActionsList, new { @class = "form-control" })
                                </div>

11

यहाँ सबसे आसान जवाब है:

आपके विचार में केवल जोड़ने के लिए:

@Html.DropDownListFor(model => model.tipo, new SelectList(new[]{"Exemplo1",
"Exemplo2", "Exemplo3"}))

या अपने कंट्रोलर ऐड में:

var exemploList= new SelectList(new[] { "Exemplo1:", "Exemplo2", "Exemplo3" });
        ViewBag.ExemploList = exemploList;

और आपका विचार बस जोड़ें:

@Html.DropDownListFor(model => model.tipo, (SelectList)ViewBag.ExemploList )

मैंने जेस चैडविक के साथ यह सीखा


8

मेरा विश्वास करो कि मैंने ऐसा करने के लिए बहुत सारे विकल्प आज़माए हैं और मेरे पास यहाँ उत्तर हैं

लेकिन मैं हमेशा सबसे अच्छे अभ्यास की तलाश करता हूं और सबसे अच्छा तरीका है जो मैं अब तक फ्रंट-एंड और बैक-एंड डेवलपर्स दोनों के लिए जानता हूं for loop (हां, मैं मजाक कर रहा हूं)

क्योंकि जब फ्रंट-एंड आपको यूआई पेज देता है तो डमी डेटा के साथ उसने विशिष्ट सेलेक्शन ऑप्शन पर क्लासेस और कुछ इनलाइन स्टाइल्स को भी जोड़ा है ताकि इसके hard to dealइस्तेमाल सेHtmlHelper

इसे देखो:

<select class="input-lg" style="">
    <option value="0" style="color:#ccc !important;">
        Please select the membership name to be searched for
    </option>
    <option value="1">11</option>
    <option value="2">22</option>
    <option value="3">33</option>
    <option value="4">44</option>
</select>

फ्रंट-एंड डेवलपर से यह सबसे अच्छा समाधान है ताकि लूप का उपयोग किया जा सके

fristly createया get your listनियंत्रक कार्रवाई में से (...) डेटा की और ViewModel, ViewBag या जो कुछ भी में रख

//This returns object that contain Items and TotalCount
ViewBag.MembershipList = await _membershipAppService.GetAllMemberships();

दूसरे दृश्य में ड्रॉपडाउनलिस्ट को पॉप्युलेट करने के लिए लूप के लिए यह सरल है

<select class="input-lg" name="PrerequisiteMembershipId" id="PrerequisiteMembershipId">
    <option value="" style="color:#ccc !important;">
        Please select the membership name to be searched for
    </option>
    @foreach (var item in ViewBag.MembershipList.Items)
    {
        <option value="@item.Id" @(Model.PrerequisiteMembershipId == item.Id ? "selected" : "")>
            @item.Name
        </option>
    }
</select>

इस तरह से आप UI डिज़ाइन और इसके सरल, आसान और अधिक पठनीय को नहीं तोड़ेंगे

आशा है कि यह आपकी मदद करेगा भले ही आपने रेजर का उपयोग न किया हो


7

एक सरणी का उपयोग सूची बनाने से थोड़ा अधिक कुशल होगा।

@Html.DropDownListFor(x => x.Tipo, new SelectListItem[]{
                new SelectListItem() {Text = "Exemplo1", Value="Exemplo1"},
                new SelectListItem() {Text = "Exemplo2", Value="Exemplo2"},
                new SelectListItem() {Text = "Exemplo3", Value="Exemplo3"}})

6
@{
List<SelectListItem> listItems= new List<SelectListItem>();
listItems.Add(new SelectListItem
    {
      Text = "One",
      Value = "1"
    });
listItems.Add(new SelectListItem
    {
        Text = "Two",
        Value = "2",
    });
listItems.Add(new SelectListItem
    {
        Text = "Three",
        Value = "3"
    });
listItems.Add(new SelectListItem
{
   Text = "Four",
   Value = "4"
});
listItems.Add(new SelectListItem
{
   Text = "Five",
   Value = "5"
});
}
@Html.DropDownList("DDlDemo",new SelectList(listItems,"Value","Text"))

देखें: - MVC 4 रेजर उदाहरण में ड्रॉप डाउन सूची बनाएं


4

बस इस का उपयोग करें

public ActionResult LoadCountries()
{
     List<SelectListItem> li = new List<SelectListItem>();
     li.Add(new SelectListItem { Text = "Select", Value = "0" });
     li.Add(new SelectListItem { Text = "India", Value = "1" });
     li.Add(new SelectListItem { Text = "Srilanka", Value = "2" });
     li.Add(new SelectListItem { Text = "China", Value = "3" });
     li.Add(new SelectListItem { Text = "Austrila", Value = "4" });
     li.Add(new SelectListItem { Text = "USA", Value = "5" });
     li.Add(new SelectListItem { Text = "UK", Value = "6" });
     ViewData["country"] = li;
     return View();
}

और निम्नलिखित में देखें।

 @Html.DropDownList("Country", ViewData["country"] as List<SelectListItem>)

यदि आप डेटासेट से डेटा प्राप्त करना चाहते हैं और इन डेटा को सूची बॉक्स में बदलना चाहते हैं, तो निम्न कोड का उपयोग करें।

List<SelectListItem> li= new List<SelectListItem>();
for (int rows = 0; rows <= ds.Tables[0].Rows.Count - 1; rows++)
{
    li.Add(new SelectListItem { Text = ds.Tables[0].Rows[rows][1].ToString(), Value = ds.Tables[0].Rows[rows][0].ToString() });
}
ViewData["FeedBack"] = li;
return View();

और देखने के बाद निम्नलिखित कोड लिखें।

@Html.DropDownList("FeedBack", ViewData["FeedBack"] as List<SelectListItem>)

3

यदि आप ASP.net 5 (MVC 6) या बाद में उपयोग कर रहे हैं, तो आप नए टैग हेल्पर्स का उपयोग बहुत अच्छे वाक्यविन्यास के लिए कर सकते हैं :

<select asp-for="tipo">
    <option value="Exemplo1">Exemplo1</option>
    <option value="Exemplo2">Exemplo2</option>
    <option value="Exemplo3">Exemplo3</option>
</select>

क्या आप एक उदाहरण प्रदान कर सकते हैं जहां आइटम गतिशील हैं? स्थैतिक सूची के लिए टैग हेल्पर्स का उपयोग करने का कोई मतलब नहीं है। और किसी एक विकल्प को चुने।
18:32 पर user3285954

मुद्दा यह है कि यह डेटा बाउंड है। यह स्वचालित रूप से उस विकल्प का चयन करता है जिसे चर सेट किया जाता है और यह चर को जमा करता है जब फार्म जमा किया जाता है। वस्तुओं को गतिशील बनाने के लिए, बस एक रेजर फॉर्च करना चाहिए।
ब्रायन लीजेंड


0

List<tblstatu> status = new List<tblstatu>();
            status = psobj.getstatus();
            model.statuslist = status;
            model.statusid = status.Select(x => new SelectListItem
            {
                Value = x.StatusId.ToString(),
                Text = x.StatusName
            });


  @Html.DropDownListFor(m => m.status_id, Model.statusid, "Select", new { @class = "form-control input-xlarge required", @type = "text", @autocomplete = "off" })

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.