양식에 DropDownList에 항목을 동적으로 추가하십시오.

Question

질문이 있습니다. 누군가 최상의 해결책을 찾도록 도와 줄 수 있습니다. 사용자가 드롭 다운 목록에 양식을 동적으로 추가 할 수 있기를 바랍니다. 텍스트 상자 및 드롭 다운 목록이있는 양식이 있으며 사용자가 찾을 수없는 경우 드롭 다운 목록에 항목을 추가 할 수있게하려고합니다. 텍스트 상자를 드롭 다운 목록으로 만들지 만 이름을 일관되게 유지하려고합니다. 양식의 예는 사용자가 이름을 입력 한 다음 색상 및 모양에 대한 목록을 드롭 다운하게하는 것입니다. 사용자가 드롭 다운에서 색상을 볼 수 없다면 드롭 다운 옆에있는 링크를 클릭하고 이름이나 색상을 입력 할 수 있기를 원합니다. 드롭 다운 목록에 도형을 추가하는 또 다른 링크입니다.

MVC 면도기 환경에서이 작업을 수행하려고합니다. 부분 뷰를 사용하여 부분 뷰의 모달 상자를 열어서 부분 뷰를 사용하여 이름을 입력하려고 시도했지만 폼 내에 폼이 있고 내부 폼을 전송할 수 없습니다. 이름을 입력하기 위해 작은 창을 열면 텍스트 상자에 이미 입력 한 내용을 잃지 않고 원래의 부모 창 형식으로 다시 추가하는 방법은 무엇입니까? 거기에 좋은 해결책이 있어야한다는 것을 알고 있습니다.

Answer 1

나중에 사용할 수 있도록 사용자가 새 입력을 저장하려면 Ajax를 사용하여 데이터베이스에 새 데이터를 제출 한 다음 컨트롤러가 새 드롭 다운으로 부분보기를 반환하도록 할 수 있습니다.

public PartialViewResult Dropdown() 
{ 
    var model = new DropdownModel() 
    { 
     Data = yourdata; 
    } 
    return PartialView("Dropdown.cshtml", model) 
} 

그리고 다음과 같이 보일 것이다 새로운 데이터를 삽입하는 액션 : 그래서 bascially

public PartialViewResult AddDataToDropdown(string data) 
{ 
    var newDropdown = repository.AddData(data); 

    var model = new DropdownModel() 
    { 
     Data = newDropdown; 
    } 
    return PartialView("Dropdown.cshtml", model) 
} 

, 당신의 HTML을 resplace 수

그래서 당신의 드롭 다운은이처럼 행동 할 것 Ajax와 함께 드롭 다운을 포함하는 div :

$(".someButton").on("click", function() { 


     var newData = ("$someTextbox").val(); 


     $.ajax({ 
      url: "/YourController/AddDataToDropdown", 
      type: "GET", 
      data: { data: newData} 
     }) 
      .success(function (partialView) { 
       $(".someDiv").html(partialView); 
      }); 

    }); 

이렇게하면 데이터 전체를 새로 고치지 않고 드롭 다운을 새로 고칩니다.