MVC : Loading an array, depending of the selection client side of a drop down list

I would like to do the following thing : - Loading an array (meaning using EF to filter the result of a request) on my aspx page, depending of the selection, client-side, of my drop down list (containing the id to pass in parameter in my request result).

I suppose Ill have to pass by jquery or something Like that.

I have began to search a solution, like this. I'm not sure Im on the good way to find a solution. I am quite begginer on MVC and Client side script, so I'm open to any other kind of solution, or any good tutorial, explaining the result of my question.

<script type="text/javascript" src="/Scripts/jquery-1.5.2.js"></script>
&l开发者_Python百科t;script type="text/javascript" src="/Scripts/jquery-ui-1.8.11.custom.js"></script>
<script type="text/javascript">
        $(function() {
           $("#FK_MET_ID").change(function() {
              $.get("/Provider/UpdateListProvider", function(data) {
              // something must be written here ?
              $("#ResultProvider").toggle(); // the div, containing my generated result ? 
                });
            });
        });
</script>

<% using (Html.BeginForm("Action", "Post")){%>    

<div id="ResultProvider"></div>

<%= Html.DropDownList("FK_MET_ID"); %>
<% } %> 

(I used the following tutorial to start coding this part of code : http://www.dotnetcurry.com/ShowArticle.aspx?ID=443)

You are on the right way, you have to add some script to get it working. You need to pass in the selected value, you should add the controller code to the question. Maybe it's more a post than a get but it's out of the scope of this question. What is the datat you return? I think you should use jquery template to show your data.

$(function() {
           $("#FK_MET_ID").change(function() {
              $.get("/Provider/UpdateListProvider/" + $(this).val(), function(data) {

                if (data) {
                    $("#contractsTemplate").tmpl(data).appendTo('#contracts');
                }

                });
            });
        });

EDIT :

The best way is to work with Json, in youre controller you need a method like this one :

[HttpPost]
public virtual JsonResult GetContracts(string nameOfTheVariable)
        {
            var contracts = _session.All<Contract>();//add restriction with the variable
            return Json(contracts);
        }

In youre view you can work with jquery template :

<script id="contractsTemplate" type="test/x-jquery-tmpl">
    <li><a href="/contract/${Id}/version/${Version}/edit">${Filename}</a>&nbsp;&nbsp;&nbsp;<span>${Status}</span></li>
</script>

<script type="text/javascript" src="@Links.Content.javascript.jquery_tmpl_min_js"></script>
<script type="text/javascript">

    $(function () {
        GetContracts();
    });

    function GetContracts() {
        $.ajax({
            type: "POST",
            url: "/API/GetContracts",
            dataType: "json",
            success: function (data) {
                $('#contracts').empty();
                if (data) {
                    $("#contractsTemplate").tmpl(data).appendTo('#contracts');
                }
            }
        });
    }
</script>

You need to add a custom route in your global.ascx that will point to your controller with the action you want and the param nameOfTheVariable you need or can you can also do it as query parameter yoururl.com$action?nameOfTheVariable="value"

Let me know if you need more help!