ドロップダウンリストに応じてテキストボックスの内容を自動的にどのように変更するのですか？

Question

私はASP .Net MVC 2を初めて使っています。

私のサイトには2つのドロップダウンリストと2つのテキストボックスがあるフォームが表示されます。以下はビューです

ユーザーがいずれかのドロップダウンリストの選択を変更すると、プログラムは2つのテキストボックスのテキストをデータベースで自動的にチェックします（ドロップダウンリストで選択した値を使用） 。

どうすればよいですか？私はいくつかのJavaスクリプト（Ajax？）が必要であると推測しています。私はこのようなことは一度もしていないので、ウェブ上のチュートリアルへのリンクや、Googleを検索するために使用できるキーワードは大いにありがたく思っています！ JavaScriptの - - HTML DOM - JQueryの

種類はチュートリアルが を助けwww.w3schools.comで...読書の日の後

を

ボブ

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

について - Ajax（すべてではない）

以下はコントローラ例を見る。コントローラのIndexメソッドはビューを空のViewModelで呼び出しますが、これにはデータベースの値がいくつか入力されている必要があります。

ビューは、ユーザーが最初のドロップダウンを変更したときにコントローラのGetDataを呼び出します（スクリプトセクションのjQuery.ajaxを参照）。 2番目のドロップダウンに似ています。 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); 
    } 

そして、ここからの眺めは

<% @ページタイトル= "" 言語= "C＃の" MasterPageFile =」であります〜/ Views/Shared/Site.Master "Inherits =" System.Web.Mvc.ViewPage "％>

インデックス $（ドキュメント）.ready（関数（）{ $（ "＃1のページID"）。変更（機能（）{

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