如何根據下拉列表自動更改文本框的內容？

Question

我是新來的ASP。NET MVC 2.

我的網站顯示一個2下拉列表，然後2個文本框的形式。以下是視圖

當用戶更改任一下拉列表的選擇時，程序將在數據庫中自動檢查（使用下拉列表中的選定值）2個文本框的文本。

我該怎麼做？我猜我需要一些Java腳本（Ajax？）。我從來沒有做過這樣的事情，所以任何鏈接到網頁上的教程或我可以用來搜索谷歌的關鍵字將不勝感激！

親切的問候

鮑勃

<%@ 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

讀了一天之後...

在www.w3schools.com教程幫助 - JavaScript的 - HTML DOM - JQuery的 - Ajax（不是全部）

下面是控制器d視圖示例。控制器Index方法使用一個空的ViewModel調用視圖，但應該使用數據庫中的某些值填充該視圖。

當用戶更改第一個下拉列表時，該視圖調用控制器的GetData（請參閱jQuery.ajax腳本部分）。第二個下拉類似。 JavaScript使用jquery收集表單上的值並將它們傳遞給GetData。

GetData返回一個新的ViewModel。該示例使用虛擬數據。該方法應該從db獲取值。

我需要關閉AdBlock以使代碼正常工作。

問候

鮑勃

這裏是控制器

/// <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); 
    } 

這裏是視圖

<％@頁標題= 「」 LANGUAGE = 「C＃」 的MasterPageFile =」 〜/ Views/Shared/Site.Master「Inherits =」System.Web.Mvc.ViewPage「％>

指數 $（文件）。就緒（函數（）{ $（ 「＃的PageId」）。變化（函數（）{

  //$("#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>