.net mvc select list handle on selected item event

Question

I am quite new to this net mvc thing. to understand what I am trying to do I will put an example.
Example
I have a list of clients that contains data and in my view I used a <select> with a foreach that goes through all the clients to show the data. What I am trying to do is, when a user selects a client name he would be redirected to another page where that page would get the client name as a parameter & do stuff with that.
I tried this but I am stuck in a part

<select>
    @foreach (var item in Model.clients)
    {
        <option>
            @Html.Encode(item.name)
        </option>
    }
</select>

I know how to redirect from page A to page B like this RedirectToAction(...)
what I want to do is handle that select action to call the method in my controller & use that method to send a parameter to page B

UPDATE

<script type="text/javascript">
    function Fct() {
        var v = arguments[0]; //get The ID in the parameter
        window.location.href = "@Url.Action("Index", "PageB")?client_id=" + v;
    }
</script>

I tried both lists and the one proposed by @Shyui is easier but i wanted to try something with this one

<select id="clients_list" onchange="Fct(this.value)">
    <option class="placeholder" selected disabled value="-1">Select Name</option> <!-- Can't be selected -->
    @foreach (var item in Model.clients)
    {
        <option value="@item.ID">
            @Html.Encode(item.name)
        </option>
    }
    <option value="0">New Client</option>
</select>

How the redirect would be triggered? After the user has selected a client would click on a button or it would happen through JavaScript? — Christos, Apr 08 '16 at 18:25
Your question is a bit too broad to give a definitive solution, but I can give you some tips. Since you want to go to page B, you will `submit` the form. Do you have your controls in a `form` with an action to Page B? You can trigger submit `onchange` of the list with javascript if that's how you want to handle it. — Crowcoder, Apr 08 '16 at 18:26
@Crowcoder i can do it on a form submit but i want to do it when the user selects an item — IKeepForgettingAccsMail, Apr 08 '16 at 18:45
@IKeepForgettingAccsMail, you can submit if you wire `onchange` of the list to `form.submit`. But if you don't need your whole Model, do like Shyju suggests. — Crowcoder, Apr 08 '16 at 19:40

score 1 · Accepted Answer · edited May 23 '17 at 12:25

1

Listen to the change event of the dropdown, get the selected option and redirect the user to the next action.

<select id="Clients">
    @foreach (var item in Model.clients)
    {
       <option value="@item.name">@Html.Encode(item.name)</option>
    }
</select>

Here is the javascript(using jQuery) to handle the change event

$(function(){
   $("#Clients").change(function(){
     var v=$(this).val();
     window.location.href="@Url.Action("Details","Clients")?clientName="+v;      
   });
});

I am using the Url.Action helper method to generate the correct relative path to the action method. This will work if your code is inside a razor view. But if it is inside an external js file, try the solution explained in this answer.

Assuming your Details action method in ClientsController accepts a client name

public ActionResult Details(string clientName)
{
  // to do : Return something
}

You might also consider using the html helper methods like Html.DropdownList to generate the dropdown element instead of doing a foreach.

@Html.DropDownList("Clients",new SelectList(Model.clients, "name", "name"))

Also you might consider passing the unique client Id(numeric) instead of the client name. There are limitations of query string value length in some browsers.

edited May 23 '17 at 12:25

Community

1
1

answered Apr 08 '16 at 18:36

Shyju

214,206
104
411
497

thank you but how do you call that jquery script ? i practised once jquery but not with .net is it in the view page? – IKeepForgettingAccsMail Apr 08 '16 at 18:46
You can put that script inside your view ( inside @section Scripts block) or an external js file. – Shyju Apr 08 '16 at 18:47
I have done the way you showed but when i select an item in the list the script is not triggered i placed the script inside a script section & check the link you provided am i missing something? – IKeepForgettingAccsMail Apr 08 '16 at 19:12
Check your browser console for any script errors. Also you need to place your page level scripts inside a scripts section and you should have a RenderSection for scripts as mentioned in [this](http://stackoverflow.com/questions/34147155/where-should-i-place-the-js-script-files-in-a-mvc-application-so-jquery-works-we/34147263#34147263) answer. – Shyju Apr 08 '16 at 20:12
there was an error & i fixed by changing it to a javascript function, i checked the function working through an `alert("msg")` & then changed it to make it work as i intent i will post the code i have in the view (or the important part). thanks for everythnig – IKeepForgettingAccsMail Apr 08 '16 at 20:54

.net mvc select list handle on selected item event

1 Answers1