Question

I have a MVC website. And in a page there is a dropdownlist, a detailinfo-view and several list-views.

The data comes from imported XML-files such like:

<?xml version="1.0" encoding="utf-8" ?>
<Items>
  <Item ID="1" Name="MVC" Country="Engeland" City="London" 
        Website="http://forums.asp.net" Genre="New" />
   ....
</Items>

Index.page

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <script type="text/javascript">
        function OnChange(text) {
            ...
        }
    </script>

    <form id="form1" runat="server">
        <br />
        <label>Select Name</label>
        <br />
        <%= Html.DropDownListFor(a => a.SelectedItem, 
                new SelectList(Model.Artists, "Value", "Text"), 
                new { onchange = "OnChange(this.Value);" })%>
        <br />
        <br />
        <%= Html.Action("DetailInfo") %><br />
        <br />
        <%= Html.Action("MemberList") %> <br />
        <br />
        <%= Html.Action("RelationsList") %><br />
        <br />
    </form>
</asp:Content>

My question is: How can I reuse Html.Actions after an OnChange event by selecting an item in a DropDownList?

I want to change the view data when the item of a dropdownlist has changed.

I hope to see on the webpage, detail information right under the DropDownList.

Country: England

City: London

Website: etc.

Then a list of Members and Relations.

Thank you for helping me

Wesley

Answer 1

So you mean I place an onchange event in my Controller

   <script type="text/javascript">
    $(document).ready(function() {
            var AID = 810000;
            function OnChange(action, value) {
                $.load( action, {AID: value});
        }
    });
    </script>

And in the Index.aspx do I write:

 <%using (Ajax.BeginForm("OnChange", "MainController",
          new AjaxOptions { HttpMethod = "Post" }))
         {%>
        <%= Html.DropDownListFor(a => a.SelectedID, 
                new SelectList(Model.Artiesten, "Value", "Text"),
        new
        {
            onchange = @"
            var form = document.forms[0]; 
            form.action='OnChange(../Controllers/MainController/OnChange, Value)' ;
            form.submit();"
        })%>
    <%} %> <br />

… and in the MainController there is a method

[HttpPost]
protected void OnChange(int? AID)
{
   int iID = AID ?? 810000;

   DetailInfo (AID);
   MemberList(AID);
   RelationsList(AID);
}