2010-01-01 2 views
2

드롭 다운 목록의 값에 따라 추가 필드를 추가 할 형식이 있습니다. 그들은 필드의 집합이 될 것이고 나는 부분적으로 원하는 부분으로 PartialView를 렌더링하는 부분에서 html로 div의 내용을 동적으로 변경하려고 생각하고있었습니다.ASP.NET MVC 및 jQuery의 드롭 다운 목록 선택에 따라 추가 뷰를 어떻게 추가 할 수 있습니까?

는 지금 드롭 다운 목록에 대한 코드는 다음

<p> 
     <label for="CatalogItem.Type"> Type: </label> 
     <%=Html.DropDownList("CatalogItem.Type",Model.Types, "Choose Type") %> 
    </p> 

    <div id = "ExtraInfo"> 

    </div> 

입니다 그리고 나는 ExtraInfo 사업부에 여분의 물건을 (필드 유형에 대한 전문) 넣고 싶다. 이것을 위해 jQuery 코드가 무엇입니까?

감사합니다.

<script language=”javascript” type=”text/javascript” > 

     function addtoDiv() 
     { 
     $(document).ready(function() { 

     var myval=$(”#mydropdown”).val(); // get value of dropdown 


     if (myval == "somevalue") // check myval value 
     { 
      $("#ExtraInfo").html("add html code inside div here"); // add code based on   value 
     } 

     }} 
    </script> 
+0

정답을 줄 사람을 선택하기가 어려웠습니다. 두 사람 모두 내게 그 부분을 주었지만 jquery 스크립트와 관련하여 대부분의 답을 게시 했으므로 @Tony에 제공하기로 결정했습니다. @DM 당신은 아약스 호출에 +1을받습니다. 왜냐하면 그것이 내가 원했던 것이기 때문입니다. –

답변

1

먼저 당신의 드롭 다운에 CSS 클래스 선택기를 추가, 지금

사용하여 이런 일을 위해 'mydropdown'을 호출 할 수 있습니다 ".html ("div 안에 html 코드를 여기에 추가하십시오. ")에 html을 삽입하면 아약스 호출을 원할 수 있습니다. 그렇게하면 사용자는 html을 다운로드하지 않고 보지 못할 수도 있습니다. 그래서 같은

뭔가 :

if (myval == "someValue") 
{ 
    $("#ExtraInfo").load("/dynamic-stuff/1") 
} 
else if (myval == "someOtherValue") 
{ 
    $("#ExtraInfo").load("/dynamic-stuff/2") 
} 

이것은 또한 "/ 동적 재료/2"와 같은 URL을 처리하도록 설정된 경로를 가정하고 정확한 부분보기로 응답합니다.

3

@Tony 올바른 접근 방식을 가지고 있지만 대신하여 RenderPartial를 넣어 :

0

필드를 동적으로 추가해야합니까? 다음을 수행하여 JQuery로 필드를 추가 할 수 있습니다.

$ (""). attr ("id", "test") addClass ("FormLabel") .appendTo ("# parentElement");$ (""). attr ("id", "testinput"). attr ("type", "text"). appendTo ("# parentElement");

이렇게하면 프로그래밍 방식으로 필드를 만들 수 있습니다.

대신 JQuery 부분 뷰를 생성 할 수 있습니다. 내가 사용하는 경향이 있지만, 그것은 쉽게 당신은 UI를 렌더링하는 서버 측 논리에 의존 할 수 있기 때문에 수

$.get("/<controller>/<actiontoreturnpartialview>", function(data) { 
    $("#ExtraInfo").html(data); 
}); 

를 사용하여 해당 작업 방법을이 부분보기의 인스턴스를 반환하는 액션 메소드를 만들고 전화 클라이언트 측 접근법.

또는이 모든 작업을 수행 할 수있는 고유 한 HTML 도우미를 만들 수 있지만 많은 작업이 필요합니다.

HTH.

관련 문제