Wie ändert man automatisch den Inhalt einer Textbox abhängig von der Dropdown-Liste?

Question

Ich bin neu in ASP .Net MVC 2.

Meine Website zeigt ein Formular mit 2 Dropdown-Listen und dann 2 Textfelder. Unten ist die Ansicht

Wenn der Benutzer die Auswahl einer der Dropdown-Listen ändert, wird das Programm automatisch in der Datenbank (mit den ausgewählten Werten in den Dropdown-Listen) für den Text für die 2 Textfelder überprüfen .

Wie mache ich das? Ich vermute, ich brauche ein Java-Skript (Ajax?). Ich habe noch nie so etwas getan, daher werden Links zu Tutorials im Web oder Keywords, mit denen ich Google durchsuchen kann, sehr geschätzt.

Mit freundlichen Grüßen

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> 

Answer 1

Nach einem Tag des Lesens ...

Auf www.w3schools.com die Tutorials half - JavaScript - HTML DOM - JQuery - Ajax (nicht alles)

Unten sind die Controller an d Beispiele ansehen. Die Controller-Indexmethode ruft die Ansicht mit einem leeren ViewModel auf, aber dieses sollte mit einigen Werten aus der Datenbank gefüllt werden.

Die Ansicht ruft die GetData des Controllers auf, wenn der Benutzer das erste Dropdown ändert (siehe Skriptabschnitt mit jQuery.ajax). Ähnlich für den zweiten Drop-Down. Das Javascript verwendet jquery, um die Werte im Formular zu sammeln und an GetData zu übergeben.

GetData gibt ein neues ViewModel zurück. In diesem Beispiel werden Dummy-Daten verwendet. Die Methode sollte die Werte von der db beziehen.

Ich musste AdBlock ausschalten, damit der Code funktioniert.

Grüße

Bob

Hier ist der 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); 
    } 

Und hier ist der Ansicht

<% @ Page title = "" Language = "C#" Masterpagefile =“ ~/Ansichten/Shared/Site.Master "Inherits =" System.Web.Mvc.ViewPage "%>

Index $ (document) .ready (function() { $ ("# PageId"). Änderung (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>