How automatically change contents of a textbox depending on dropdownlist?

I'm new to ASP .Net MVC 2.

My site displays a form with 2 drop down lists, and then 2 text boxes. Below is the view

When the user changes the selection of either of the drop down lists, the program is to check automatically in the database (using the selected values in the drop down lists) for the text for the 2 text boxes.

How do I do this ? I am guessing I need some java script (Ajax ?). I have never done anything like this, so any links to tutorials on the web or keywords I can use to search Google would be greatly appreciated !

Kind regards

Bob

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<RM.Advertising.ViewModels.AdvertViewModel>" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
Index
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<h2>
    Index</h2>
<% using (Html.BeginForm())
   {%>
<%: Html.ValidationSummary(true) %>
<fieldset>
    <legend>Fields</legend>
    <div class="editor-label">
        <%: Html.LabelFor(model => model.PageId) %>
    </div>
    <div class="editor-field">
        <%= Html.DropDownListFor(model => model.PageId, (IEnumerable<SelectListItem>)ViewData["PageNameList"])%>
        <%= Html.ValidationMessageFor(model => model.PageId) %>
    </div>
    <div class="editor-label">
        <%: Html.LabelFor(model => model.PositionOnPageId) %>
    </div>
    <div class="editor-field">
        <%: Html.DropDownListFor(model => model.PositionOnPageId, (IEnumerable<SelectListItem>)ViewData["PositionList"])%>
        <%: Html.ValidationMessageFor(model => model.PositionOnPageId) %>
    </div>
    <div class="editor-label">
        <%: Html.LabelFor(model => model.Name) %>
    </div>
    <div class="editor-field">
        <%: Html.TextBoxFor(model => model.Name) %>
   开发者_如何转开发     <%: Html.ValidationMessageFor(model => model.Name) %>
    </div>
    <div class="editor-label">
        <%: Html.LabelFor(model => model.Url) %>
    </div>
    <div class="editor-field">
        <%: Html.TextBoxFor(model => model.Url) %>
        <%: Html.ValidationMessageFor(model => model.Url) %>
    </div>
    <p>
        <input type="submit" value="Save" />
    </p>
</fieldset>
<% } %>
<div>
    <%: Html.ActionLink("Back to List", "Index") %>
</div>
</asp:Content>

---

After a day of reading...

On www.w3schools.com the tutorials helped - JavaScript - HTML DOM - JQuery - Ajax (not all of it)

Below are the controller and view examples. The controller Index method calls the view with an empty ViewModel but this should be populated with some values from the database.

The view calls the controller's GetData when the user changes the first drop down (see script section with jQuery.ajax). Similar for the second drop down. The javascript uses jquery to collect the values on the form and pass them to GetData.

GetData returns a new ViewModel. The example uses dummy data. The method should get the values from the db.

I needed to switch off AdBlock for the code to work.

Regards

Bob

Here is the controller

/// <summary>
/// Controller to change adverts
/// </summary>
[Authorize]
public class AdvertController : Controller
{
    /// <summary>
    /// Default controller action.
    /// </summary>
    /// <returns></returns>
    public ActionResult Index()
    {
        ViewData["PageNameList"] = service.GetPageNameList();
        ViewData["PositionList"] = service.GetPositionList();

        return View(new AdvertViewModel());
    }

    [HttpPost]
    public ActionResult GetData(AdvertViewModel data)//FormCollection data)//int id)
    {
        AdvertViewModel result = new AdvertViewModel() { Name = "got data" };
        return Json(result);
    }

And here is the view

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %>

Index $(document).ready(function () { $("#PageId").change(function () {

            //$("#Name").val("something");

            var name = $("#Name").val();
            var url = $("#Url").val();
            var pageId = $("#PageId").val();
            var poisitionInPageId = $("#PositionOnPageId").val();

            jQuery.ajax({
                url: "/Advert/GetData",
                async: false,
                type: "POST",
                data: ({Name: name, Url: url, PageId: pageId, PositionOnPageId: poisitionInPageId}),
                dataType: "json",
                success: function (data) {
                    jQuery("#Name").val(data.Name);
                }
            });
        });
    });
</script>
<h2>
    Index</h2>
<% using (Html.BeginForm())
   {%>
<%: Html.ValidationSummary(true) %>
<fieldset>
    <legend>Fields</legend>
    <div>
        <input type="text" id="textbox" />
    </div>
    <div class="editor-label">
        <%: Html.LabelFor(model => model.PageId) %>
    </div>
    <div class="editor-field">
        <%= Html.DropDownListFor(model => model.PageId, (IEnumerable<SelectListItem>)ViewData["PageNameList"])%>
        <%= Html.ValidationMessageFor(model => model.PageId) %>
    </div>
    <div class="editor-label">
        <%: Html.LabelFor(model => model.PositionOnPageId) %>
    </div>
    <div class="editor-field">
        <%: Html.DropDownListFor(model => model.PositionOnPageId, (IEnumerable<SelectListItem>)ViewData["PositionList"])%>
        <%: Html.ValidationMessageFor(model => model.PositionOnPageId) %>
    </div>
    <div class="editor-label">
        <%: Html.LabelFor(model => model.Name) %>
    </div>
    <div class="editor-field">
        <%: Html.TextBoxFor(model => model.Name)%>
        <%: Html.ValidationMessageFor(model => model.Name) %>
    </div>
    <div class="editor-label">
        <%: Html.LabelFor(model => model.Url) %>
    </div>
    <div class="editor-field">
        <%: Html.TextBoxFor(model => model.Url) %>
        <%: Html.ValidationMessageFor(model => model.Url) %>
    </div>
    <p>
        <input type="submit" value="Save" />
    </p>
</fieldset>
<% } %>
<div>
    <%: Html.ActionLink("Back to List", "Index") %>
</div>