드롭 다운 목록에 따라 텍스트 상자의 내용을 자동으로 변경하는 방법은 무엇입니까?

Question

ASP .Net MVC 2를 처음 사용했습니다.

내 사이트에는 2 개의 드롭 다운 목록과 2 개의 텍스트 상자가있는 양식이 표시됩니다. 아래 그림보기

사용자가 드롭 다운 목록 중 하나를 선택하면 프로그램은 자동으로 데이터베이스에서 드롭 다운 목록의 선택된 값을 사용하여 2 개의 텍스트 상자에 대한 텍스트를 확인합니다 .

어떻게하면됩니까? 나는 자바 스크립트 (Ajax)가 필요하다고 생각하고있다. 이런 일은 한번도 해본 적이 없으므로 웹에서의 자습서 링크 나 Google 검색에 사용할 수있는 키워드를 사용하시면 큰 도움이됩니다. 자바 스크립트 - - 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 (전부는 아님)

다음은 컨트롤러입니다. d보기. 컨트롤러 Index 메서드는 빈 ViewModel로 뷰를 호출하지만 데이터베이스의 일부 값으로 채워야합니다.

사용자가 첫 번째 드롭 다운을 변경할 때 뷰에서 컨트롤러의 GetData를 호출합니다 (스크립트 섹션의 jQuery.ajax 참조). 두 번째 드롭 다운과 유사합니다. 자바 스크립트는 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 (함수() { $ ("#의의 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>