ASP.NET MVC - getting the value of a selected index in a Listbox

Question

I am trying to migrate my ASP.NET Webforms project into ASP.NET MVC (for learning purposes). I need to get the value of the selected index from a listbox in ASP.NET MVC and use this index for sorting strings in a textbox. It was extremely simple in my webforms project:

<asp:ListBox ID="ListBox1" runat="server" AutoPostBack="True" 
     Height="166px" Width="198px" 
     BackColor="Black" Font-Bold="True" ForeColor="White" Font-Size="Small"
     OnSelectedIndexChanged="ListBox1_SelectedIndexChanged">
</asp:ListBox>

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
        <asp:TextBox ID="TextBox1" runat="server" 
            Height="149px" Width="286px" 
            TextMode="MultiLine" OnTextChanged="TextBox1_TextChanged" 
            AutoPostBack="True" Font-Bold="True" ForeColor="#006600">
        </asp:TextBox>
    </ContentTemplate>
    <Triggers>
        <asp:AsyncPostBackTrigger ControlID="ListBox1" 
             EventName="SelectedIndexChanged" />                              
    </Triggers>
</asp:UpdatePanel>

And the code behind was:

protected void ListBox1_SelectedIndexChanged(object sender, EventArgs e)
{
     ...
     i = ListBox1.SelectedIndex;
     TextBox1.Text += ....// here is a string sorted based on the selected index i);
      ...                                        
}

But I have not found a way to receive the selected index in ASP.NET MVC despite a two-day search at IT forums.

I populated the listbox in a view in this way:

@Html.ListBoxFor(x => x.SelectedIndexes, new SelectList(Model.Entries, 
"Value", "Text"), new { id = "ListBox1", onchange = 
"selectedIndexChanged()", style = "width:198px; height:166px; color:white; 
background:black; font-weight:bold" })

A list of entries was created in a model and sent via a controller to the view. It works and the listbox is populated. But in ASP.NET MVC, there seems to be nothing like ListBox1.SelectedIndex. Is it possible to receive the value on the client side (JavaScript's statement: document.getElementById("ListBox1").selectedIndex ), but there seems to be no way to transfer this value to the server side.

Does anybody know how to extract the value of the selected index and transfer it into the model?

You need to use ajax to send the value to a server if you want to stay on the same page. What is it that you want to do when you select an option? — user3559349
– user3559349, Commented Nov 9, 2017 at 20:49
Yes, exactly, this is what I want to do (like in my webforms project - see the code above, at least I was told it was ajax). Having just been helped with the selected index, I have started to look how ajax is used with ASP.NET MVC and how selecting an item will trigger an event (now I use a submit button for testing purposes). Any help will be greatly appreciated, of course. — Miroslav Husťák
– Miroslav Husťák, Commented Nov 9, 2017 at 21:07
You still have not explained what your want to so when you select an option! $('#SelectedIndexes').change(function() { var selected = $(this).val(); $.post(your url, { id: selected }. function(data) { do somethng with the data you return }); }); — user3559349
– user3559349, Commented Nov 9, 2017 at 21:12
And get rid of onchange = "selectedIndexChanged()" (use Unobtrusive Javascritpt). And replace your style attribute with a class. And it already looks like Model.Entries` is IEnumerable<SelectList> so creating another identical one using new SelectList(..) in the view is pointless. — user3559349
– user3559349, Commented Nov 9, 2017 at 21:14
Sorry... I want to use the selected index to sort some string values in the model and then to show the values in the textbox. You can see the functionality in the original webforms project (it is only for my learning purposes, so do not take the texts there too seriously) specdictionary-001-site1.etempurl.com/ContactsEN.aspx , username:Klient, password: 1234 — Miroslav Husťák
– Miroslav Husťák, Commented Nov 9, 2017 at 21:21

san1127 · Accepted Answer · 2017-11-09 14:44:48Z

1

ListBoxFor() accepts IEnumerable<SelectListItem> as parameter, so you don't have to use SelectList here. you may use linq to generate the items, in your case, you can replace new SelectList(Model.Entries, "Value", "Text") with Model.Entries.Select((e, i) => new SelectListItem { Text = e.Text, Value = i.ToString() })

answered Nov 9, 2017 at 14:44

san1127

1532 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ismail Asghar · Accepted Answer · 2017-11-09 15:09:56Z

1

In MVC controller automatically binds values from HTML view to Model using name attribute of HTML. So, You should use same name in your receiving parameter Model and in your Razor syntax like (use property name="ListBox1" to make it understand by server itself):

@Html.ListBoxFor(x => x.SelectedIndexes, new SelectList(Model.Entries, 
    "Value", "Text"), new{ id ="ListBox1",name="ListBox1", 
     onchange="selectedIndexChanged()", 
     style = "your css" })

answered Nov 9, 2017 at 15:09

Ismail Asghar

368 bronze badges

4 Comments

Ismail Asghar Over a year ago

You question was confusing! That's what I understand it. specifically tell if you want to receive the selected value in Controller or you want to play with DOM on change dropdown?

Miroslav Husťák Over a year ago

I would like to receive the number of the selected index in the model where it will be used.

Ismail Asghar Over a year ago

So you can use my offered way to achieve it

Miroslav Husťák Over a year ago

Thanks a lot for your help :-). I had also some issues with the binding, but now it works.

Collectives™ on Stack Overflow

ASP.NET MVC - getting the value of a selected index in a Listbox

2 Answers 2

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related