2

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>
Improve this question
4
  • How the redirect would be triggered? After the user has selected a client would click on a button or it would happen through JavaScript? Commented Apr 8, 2016 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. Commented Apr 8, 2016 at 18:26
  • @Crowcoder i can do it on a form submit but i want to do it when the user selects an item Commented Apr 8, 2016 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. Commented Apr 8, 2016 at 19:40

1 Answer 1

Reset to default
0

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.

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

5 Comments

thank you but how do you call that jquery script ? i practised once jquery but not with .net is it in the view page?
You can put that script inside your view ( inside @section Scripts block) or an external js file.
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?
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 answer.
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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.