mvc3에서 런타임에 텍스트 상자 추가 및 제거

내 페이지에는 기본적으로 텍스트 상자 하나와 그 옆에 추가 버튼이 있습니다. 사용자가 추가 버튼을 클릭하면 다른 텍스트 상자를 추가해야합니다. 새로 추가 된 텍스트 상자 옆에는 추가 및 제거라는 두 개의 단추가 있어야합니다. 그리고 동일한 과정이 진행됩니다. 즉, 사용자는 추가 버튼을 사용하여 텍스트 박스를 추가하고 제거 버튼을 사용하여 텍스트 상자를 제거 할 수 있습니다.mvc3에서 런타임에 텍스트 상자 추가 및 제거

나는 mvc 3을 처음 사용하므로 진행 방법이 혼란 스럽다. 우리가 런타임에 컨트롤을 추가 할 수 있도록 asp.net에 자리 표시 자와 같은 방법이 있습니까?

어떤 제안 및 아이디어는 나에게 도움이 될 것입니다 당신은 당신이 좋아하는 방법 새 텍스트 상자를 추가 할 수없는 것, 그래서

출처

2012-09-12 Nhuren

MVC는 웹 양식에 비해 매우 "손 - 오프"프레임 워크입니다. "컨트롤"은 MVC에 존재하지 않습니다.

이

가 모델 : 여기

내가 그것을 할 거라고 방법

<% for(int i=0;i<Model.MultipleTextBoxes.Count;i++) { %> 
<%= Html.TextBoxFor(m => m.MultipleTextBoxes[i]) /* this might look like magic to you... */ %> 
<% } %> 
<button type="submit" name="AddNewTextbox" value="true">Add New Textbox</button> 
<button type="submit">Submit form</button>

class MyModel { 
    public Boolean AddNewTextBox { get; set; } 
    public List<String> MultipleTextBoxes { get; set; } // this stores the values of the textboxes. 
}

보기 (필자는 웹 양식 엔진을보기 좋아, 나는 면도기의 팬이 아니에요)

컨트롤러 :

[HttpPost] 
public ActionResult MyAction(MyModel model) { 
    if(model.AddNewTextBox) model.MultipleTextBoxes.Add("Yet another"); 

    else if(ModelState.IsValid) { 
     // your regular processing 
    } 
}

당신이 할 수있는 또한 자바 스크립트와 함께 텍스트 상자를 추가하고 완벽하게 잘 작동합니다. 중요한 것은 HTML 입력 요소입니다. 숨겨진 viewstate가 없습니다. MVC는 무국적자입니다.

<button type="submit">을 사용했기 때문에 Internet Explorer 6-8에서 필자의 예제가 안정적으로 작동하지 않는다는 것을 알았지 만, 부작용없이 <input type="submit">으로 바꿀 수 있습니다.

출처

2012-09-12 01:52:39 Dai

다음은 일부 Javascript/JQuery가 필요합니다. 다음은 스케치이지만 일반적인 접근 방식으로 유용 할 것입니다.

당신은 제거를 위해 자신의 용기를 타겟팅 할 수 있습니다 버튼을 렌더링 할 버튼

제거합니다.

<script> 
    function removeItem(element) { 
     // get the parent element with class "item-container" and remove it from the DOM 
     $(element).find(".item-container").remove(); 
    } 
</script>

는 버튼

당신은 부분 뷰를 사용할 수 있습니다 중 하나를 추가

<div class="item-container"> 
    <input type="button" onclick="removeItem(this)" /> 
</div>

그리고 removeItem에 대한 자바 스크립트 :이를 위해, 몇 가지 같은 마크 업을 사용 Ajax를 사용하거나 똑바로 Javascript를 사용하십시오. 어느 쪽이 가장 적합한지는 새 항목을 작성하기 위해 서버로 왕복해야하는지 여부에 달려 있습니다. 새 ID 또는 다른 것을 생성하기 위해 서버로 가야한다고 가정 해 봅시다.

먼저 부분보기과 해당 컨트롤러 동작을 만듭니다. 위와 같이 제거 버튼과 텍스트 상자 및 버튼을 포함해야합니다.

이제

, 당신은 이 추가를 클릭 할 때 호출됩니다 메인 페이지에 아약스 양식을 작성 :

<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script> 

@using (Ajax.BeginForm("New", new AjaxOptions() { UpdateTargetId="ajaxTarget", HttpMethod = "GET" })) { 
    <input type='submit' value='Add New' /> 
} 

<div id="ajaxTarget"></div>

이 코드는 (현재 컨트롤러의 동작 새로운에서) 당신의 부분보기를 가져와 결과를 ajaxTarget 요소에 추가합니다.

_{주 아약스 양식이 필요 당신이 Nuget를 통해 설치할 수 있습니다 아약스, 겸손한 : Install-Package JQuery.Ajax.Unobtrusive.}

출처

2012-09-12 02:26:21 McGarnagle

mvc3에서 런타임에 텍스트 상자 추가 및 제거

답변

관련 문제