web-dev-qa-db-fra.com

Comment obtenir DropDownList Valeur sélectionnée dans le contrôleur dans MVC

J'ai dropdownlist, que j'ai rempli de base de données. Maintenant, je dois obtenir la valeur sélectionnée dans Controller faire quelques manipulations. Mais ne pas avoir l'idée. Code que j'ai essayé.

Modèle

public class MobileViewModel 
{          
    public List<tbInsertMobile> MobileList;
    public SelectList Vendor { get; set; }
}

Manette

 public ActionResult ShowAllMobileDetails()
    {
        MobileViewModel MV = new MobileViewModel();
        MV.MobileList = db.Usp_InsertUpdateDelete(null, "", "", null, "", 4, MergeOption.AppendOnly).ToList();
        MV.Vendor = new SelectList(db.Usp_VendorList(), "VendorId", "VendorName");
        return View(MV);
    }

    [HttpPost]
    public ActionResult ShowAllMobileDetails(MobileViewModel MV)
    {           
        string strDDLValue = ""; // Here i need the dropdownlist value

        return View(MV);
    }

Vue

   <table>           
        <tr>
            <td>Mobile Manufacured</td>
            <td>@Html.DropDownList("ddlVendor", Model.Vendor, "Select Manufacurer") </td>
        </tr>         
        <tr>
            <td>

            </td>
            <td>
                <input id="Submit1" type="submit" value="search" />
            </td>
        </tr>
    </table>
c#asp.netasp.net-mvcasp.net-mvc-4
40
Raghubar

1ère approche (via Request ou FormCollection):

Vous pouvez le lire depuis Request en utilisant Request.Form, votre nom de liste déroulante est ddlVendor, passez donc la clé ddlVendor dans formCollection pour obtenir sa valeur postée par formulaire:

string strDDLValue = Request.Form["ddlVendor"].ToString();

ou Utilisez FormCollection:

[HttpPost]
public ActionResult ShowAllMobileDetails(MobileViewModel MV,FormCollection form)
{           
  string strDDLValue = form["ddlVendor"].ToString();

  return View(MV);
}

2ème approche (via modèle):

Si vous voulez avec Model binding, ajoutez une propriété dans Model:

public class MobileViewModel 
{          
    public List<tbInsertMobile> MobileList;
    public SelectList Vendor { get; set; }
    public string SelectedVendor {get;set;}
}

et en vue:

@Html.DropDownListFor(m=>m.SelectedVendor , Model.Vendor, "Select Manufacurer")

et en action:

[HttpPost]
public ActionResult ShowAllMobileDetails(MobileViewModel MV)
{           
   string SelectedValue = MV.SelectedVendor;
   return View(MV);
}

METTRE À JOUR:

Si vous souhaitez également publier le texte de l'élément sélectionné, vous devez ajouter un champ masqué et définir le texte de l'élément sélectionné dans le champ masqué lors de la sélection par sélection déroulante:

public class MobileViewModel 
{          
    public List<tbInsertMobile> MobileList;
    public SelectList Vendor { get; set; }
    public string SelectVendor {get;set;}
    public string SelectedvendorText { get; set; }
}

utilisez jquery pour définir le champ caché:

<script type="text/javascript">
$(function(){
$("#SelectedVendor").on("change", function {
   $("#SelectedvendorText").val($(this).text());
 });
});
</script>

@Html.DropDownListFor(m=>m.SelectedVendor , Model.Vendor, "Select Manufacurer")
@Html.HiddenFor(m=>m.SelectedvendorText)
77
Ehsan Sajjad

Modèle

Modèle très basique avec champ Genre. GetGenderSelectItems() renvoie les éléments sélectionnés nécessaires pour remplir DropDownList.

public enum Gender 
{
    Male, Female
}

public class MyModel
{
    public Gender Gender { get; set; }

    public static IEnumerable<SelectListItem> GetGenderSelectItems()
    {
        yield return new SelectListItem { Text = "Male", Value = "Male" };
        yield return new SelectListItem { Text = "Female", Value = "Female" };
    }
}

Vue

Assurez-vous d’avoir enveloppé votre @Html.DropDownListFor dans une balise de formulaire.

@model MyModel

@using (Html.BeginForm("MyController", "MyAction", FormMethod.Post)
{
   @Html.DropDownListFor(m => m.Gender, MyModel.GetGenderSelectItems())
   <input type="submit" value="Send" />
}

Manette

Votre nom de vue .cshtml Razor doit être identique à celui du nom d'action du contrôleur et le nom du dossier doit correspondre au nom du contrôleur, par exemple Views\MyController\MyAction.cshtml.

public class MyController : Controller 
{
    public ActionResult MyAction()
    {
        // shows your form when you load the page
        return View();
    }

    [HttpPost]
    public ActionResult MyAction(MyModel model)
    {
        // the value is received in the controller.
        var selectedGender = model.Gender;
        return View(model);
    }
}

Aller plus loin

Maintenant rendons-le fortement typé et indépendant:

var genderSelectItems = Enum.GetValues(typeof(Gender))
    .Cast<string>()
    .Select(genderString => new SelectListItem 
    {
        Text = genderString,
        Value = genderString,
    }).AsEnumerable();
9
Andrei

MVC 5/6/Razor Pages  

Je pense que le meilleur moyen est d'utiliser un modèle fortement typé, car les Viewbags sont déjà trop sollicités :) 

MVC 5 exemple 

Votre action Get 

public async Task<ActionResult> Register()
    {
        var model = new RegistrationViewModel
        {
            Roles = GetRoles()
        };

        return View(model);
    }

Votre modèle de vue  

    public class RegistrationViewModel
    {
        public string Name { get; set; }

        public int? RoleId { get; set; }

        public List<SelectListItem> Roles { get; set; }
    }

Ta vue  

    <div class="form-group">
        @Html.LabelFor(model => model.RoleId, htmlAttributes: new { @class = "col-form-label" })
        <div class="col-form-txt">
            @Html.DropDownListFor(model => model.RoleId, Model.Roles, "--Select Role--", new { @class = "form-control" })
            @Html.ValidationMessageFor(model => model.RoleId, "", new { @class = "text-danger" })
        </div>
    </div>

Votre post action  

    [HttpPost, ValidateAntiForgeryToken]
    public async Task<ActionResult> Register(RegistrationViewModel model)
    {
        if (ModelState.IsValid)
        {
            var _roleId = model.RoleId,

MVC 6 Ça va être un peu différent

Get Action 

public async Task<ActionResult> Register()
    {
        var _roles = new List<SelectListItem>();
        _roles.Add(new SelectListItem
        {
           Text = "Select",
           Value = ""
        });
        foreach (var role in GetRoles())
        {
          _roles.Add(new SelectListItem
          {
            Text = z.Name,
            Value = z.Id
          });
        }

        var model = new RegistrationViewModel
        {
            Roles = _roles
        };

        return View(model);
    }

Votre Voir le modèle sera identique à MVC 5

Votre Voir sera comme 

<select asp-for="RoleId" asp-items="Model.Roles"></select>

Poste sera également identique

Pages Razor

Votre modèle de page

[BindProperty]
public int User User { get; set; } = 1;

public List<SelectListItem> Roles { get; set; }

public void OnGet()
{
    Roles = new List<SelectListItem> {
        new SelectListItem { Value = "1", Text = "X" },
        new SelectListItem { Value = "2", Text = "Y" },
        new SelectListItem { Value = "3", Text = "Z" },
   };
}

<select asp-for="User" asp-items="Model.Roles">
    <option value="">Select Role</option>
</select>

J'espère que ça peut aider quelqu'un :)

1
dnxit

Utilisez SelectList pour lier @HtmlDropdownListFor et spécifiez le paramètre selectedValue dans celui-ci.

http://msdn.Microsoft.com/en-us/library/dd492553(v=vs.108).aspx

Exemple: vous pouvez faire comme ceci pour obtenir venderid

@Html.DropDownListFor(m => m.VendorId,Model.Vendor)


   public class MobileViewModel 
   {          
    public List<tbInsertMobile> MobileList;
    public SelectList Vendor { get; set; }
    public int VenderID{get;set;}
   }
   [HttpPost]
   public ActionResult Action(MobileViewModel model)
   {
            var Id = model.VenderID;
1
Pranay Rana

Si vous cherchez quelque chose de léger, je vais ajouter un paramètre à votre action.

[HttpPost]
public ActionResult ShowAllMobileDetails(MobileViewModel MV, string ddlVendor)
{           
    string strDDLValue = ddlVendor; // Of course, this becomes silly.

    return View(MV);
}

Ce qui se passe dans votre code maintenant, c’est que vous passez le premier argument de chaîne de "ddlVendor" à Html.DropDownList, ce qui indique au framework MVC de créer un élément <select> avec une name de "ddlVendor". Lorsque l'utilisateur soumet le formulaire côté client, il contiendra une valeur pour cette clé.

Lorsque MVC essaie d'analyser cette demande dans MV, il recherchera MobileList et Vendor et ne le trouvera pas non plus, de sorte qu'il ne sera pas rempli. En ajoutant ce paramètre ou en utilisant FormCollection comme l'a suggéré une autre réponse, vous demandez à MVC de rechercher spécifiquement un élément de formulaire portant ce nom. Il doit donc renseigner la valeur du paramètre avec la valeur publiée.

1
Matthew Haugen

J'avais le même problème dans asp.NET rasoir C #

J'avais une ComboBox remplie de titres d'une EventMessage et je voulais montrer le contenu de ce message avec la valeur sélectionnée pour l'afficher dans une étiquette ou TextField ou toute autre Control...

Ma ComboBox était remplie comme ceci:

 @Html.DropDownList("EventBerichten", new SelectList(ViewBag.EventBerichten, "EventBerichtenID", "Titel"), new { @class = "form-control", onchange = "$(this.form).submit();" })

Dans ma EventController j'avais une fonction pour aller à la page, dans laquelle je voulais montrer ma ComboBox (qui est d'un type de modèle différent, j'ai donc dû utiliser une vue partielle)? 

La fonction pour aller d’index en page dans laquelle charger la vue partielle:

  public ActionResult EventDetail(int id)
        {

            Event eventOrg = db.Event.Include(s => s.Files).SingleOrDefault(s => s.EventID == id);
            //  EventOrg eventOrg = db.EventOrgs.Find(id);
            if (eventOrg == null)
            {

                return HttpNotFound();
            }
            ViewBag.EventBerichten = GetEventBerichtenLijst(id);
            ViewBag.eventOrg = eventOrg;
            return View(eventOrg);
        }

La fonction pour la vue partielle est ici:

 public PartialViewResult InhoudByIdPartial(int id)
        {
            return PartialView(
                db.EventBericht.Where(r => r.EventID == id).ToList());

        }

La fonction pour remplir EventBerichten:

        public List<EventBerichten> GetEventBerichtenLijst(int id)
        {
            var eventLijst = db.EventBericht.ToList();
            var berLijst = new List<EventBerichten>();
            foreach (var ber in eventLijst)
            {
                if (ber.EventID == id )
                {
                    berLijst.Add(ber);
                }
            }
            return berLijst;
        }

Le modèle partialView ressemble à ceci:

@model  IEnumerable<STUVF_back_end.Models.EventBerichten>

<table>
    <tr>
        <th>
            EventID
        </th>
        <th>
            Titel
        </th>
        <th>
            Inhoud
        </th>
        <th>
            BerichtDatum
        </th>
        <th>
            BerichtTijd
        </th>

    </tr>

    @foreach (var item in Model)
    {
        <tr>
            <td>
                @Html.DisplayFor(modelItem => item.EventID)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Titel)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Inhoud)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.BerichtDatum)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.BerichtTijd)
            </td>

        </tr>
    }
</table>

VIEUW: C'est le script utilisé pour obtenir ma sortie dans la vue

<script type="text/javascript">
    $(document).ready(function () {
        $("#EventBerichten").change(function () {
            $("#log").ajaxError(function (event, jqxhr, settings, exception) {
                alert(exception);
            });

            var BerichtSelected = $("select option:selected").first().text();
            $.get('@Url.Action("InhoudByIdPartial")',
                { EventBerichtID: BerichtSelected }, function (data) {
                    $("#target").html(data);
                });
        });
    });
            </script>
@{
                    Html.RenderAction("InhoudByIdPartial", Model.EventID);
                } 

<fieldset>
                <legend>Berichten over dit Evenement</legend>
                <div>
                    @Html.DropDownList("EventBerichten", new SelectList(ViewBag.EventBerichten, "EventBerichtenID", "Titel"), new { @class = "form-control", onchange = "$(this.form).submit();" })
                </div>

                <br />
                <div id="target">

                </div>
                <div id="log">

                </div>
            </fieldset>
1
Pieter Bollen

Si vous voulez utiliser @Html.DropDownList, suivez.

Manette:

var categoryList = context.Categories.Select(c => c.CategoryName).ToList();

ViewBag.CategoryList = categoryList;

Vue:

@Html.DropDownList("Category", new SelectList(ViewBag.CategoryList), "Choose Category", new { @class = "form-control" })

$("#Category").on("change", function () {
 var q = $("#Category").val();

console.log("val = " + q);
});
0
Guven Ozkurt

Merci - cela m’a aidé à mieux comprendre et résoudre un problème que j’avais ...

$(function () {
  $("#SelectedVender").on("change", function () {
   $("#SelectedvendorText").val($(**"#SelectedVender option:selected"**).text());
  });
});
0
Gil Yoktan