2014-07-10 5 views
1

여기에 설명 된 방법과 마찬가지로 드롭 다운 목록 선택시 부분 뷰를로드합니다 : Load partial view depending on dropdown selection in MVC3. 내 코드는 다음과 같습니다부분보기가 ASP NET에서 변경되면 양식을 업데이트 된 값을 제출하는 방법?

보기 :

@....ParentModel 

@using (Html.BeginForm("Method", "Controller", FormMethod.Post)) 
{ 
    @Html.AntiForgeryToken() 
    @Html.ValidationSummary(true) 

    <div id="info"> 
     <div id="info-selection"> 
      @Html.LabelFor(m => m.SavedInfo) 
      @Html.DropDownListFor(m => m.SavedInfo , infoListItems, new { @id = "info-dropdown" }) 
     </div> 
     <div id="info-describtion"> 
      @Html.EditorFor(m => m.ChildModel) 
     </div> 
    </div> 
    <input type="submit" id="confirm_btn" value="Go!" /> 
} 

<script> 
    $('#info-dropdown').change(function() { 
    var id = $(this).val(); 

    $.get('/Cart/SelectInfo/' + id, function (data) { 
     $('#info-describtion').html(data); 
     //$('#info-describtion').fadeIn('fast'); 
    }); 
    }); 
</script> 

PartialView :

@model ...Info 

@{ 
    List<SelectListItem> listMetroItems = new List<SelectListItem>(); 

    listMetroItems.Add(new SelectListItem 
    { 
     Text = "no metro", 
     Value = "NoMetroAvailable", 
     Selected = true 
    }); 
} 

<ul id="info-left"> 
    <li> 
     @Html.LabelFor(m => m.Undegraund) 
     @Html.DropDownListFor(m => m.Undegraund, listMetroItems) 
    </li> 
    <li> 
     @Html.LabelFor(m => m.House) 
     @Html.TextBoxFor(m => m.House) 
    </li> 
    <li> 
     @Html.LabelFor(m => m.Flat) 
     @Html.TextBoxFor(m => m.Flat) 
    </li> 
    <li> 
     @Html.LabelFor(m => m.Floor) 
     @Html.TextBoxFor(m => m.Floor) 
    </li> 
</ul> 

<ul id="info-right"> 
     <li> 
     @Html.LabelFor(m => m.Street) 
     @Html.TextBoxFor(m => m.Street) 
     </li> 
     <li> 
      @Html.LabelFor(m => m.Building) 
      @Html.TextBoxFor(m => m.Building) 
     </li> 
     <li> 
      @Html.LabelFor(m => m.Porch) 
      @Html.TextBoxFor(m => m.Porch) 
     </li> 
     <li> 
      @Html.LabelFor(m => m.IntercomCode) 
      @Html.TextBoxFor(m => m.IntercomCode) 
    </li> 
    </ul> 

컨트롤러 : 내가 얻을 수

public ActionResult SelectInfo(int id) 
    { 
     Info partialViewModel = new Info(id); 

     return PartialView("~/Views/Shared/EditorTemplates/InfoModel.cshtml", partialViewModel); 
    } 

한 가지가 제대로 작동하려면 : 부분 볼 수있는대로로드하는보기는 폼의 일부입니다. 드롭 다운의 양식 내용 업데이트가 완벽하게 변경됩니다. 그러나 양식의 제출 단추를 클릭하면 SelectInfo() 메서드로 대체 된 것이 아닌 더 이상 사용되지 않는 데이터가 게시됩니다! 나는 전체 뷰의 ParentModel이 부분 뷰 업데이트를 할 때 업데이트되지 않는다는 사실 때문에 생각합니다. 이 문제를 해결하기위한 선택은 무엇입니까?

+0

부분보기는 무엇입니까? – PaulBinder

+0

폴 루빈 der, 질문에 – Starter

+0

을 추가하면 parentmodel, info model 및 child model도 제공 할 수 있습니까? – PaulBinder

답변

1

이것이 내가 생각하는 것입니다. 먼저 드롭 다운을 선택하기 전에 페이지를로드하고 소스를 봅니다. 다른 입력의 Name 속성을 주목하십시오. 그들은 같은 것입니다

<input class="text-box single-line" id="Info_House" name="Info.House" type="text" value=""> 

이름을 적어 둡니다. 정보 하우스. 이름은 MVC ASP.net에서 모델 바인딩을 구동하는 것입니다. 이제 부분 뷰는 Info 모델을 직접 사용합니다. 부모 모델이 아닙니다. 따라서 드롭 다운 항목을 선택하고 부분보기가 채워지면 다음과 같은 입력을 갖게됩니다.

<input id="House" name="House" type="text" value="House"> 

이제 새 이름을 기록해 두십시오. 제작 된 html이 "House"라는 속성에 직접 바인딩하려고 시도하고 있습니다. 그래서 당신의 모델은 Model.House와 같은 것을 가정합니다. 그러나 부모 모델은 그렇지 않습니다. 그것은 Model.Info.House 있습니다

그럼 당신이해야 할 일은 다음과 같습니다. 컨트롤러에서

는 컨트롤러

public ActionResult SelectInfo(int id) 
{ 
    Info info = new Info(id); 
    var parentModel = new ParentModel { Info = info}; 

    return PartialView("~/Views/Shared/EditorTemplates/InfoModel.cshtml", parentModel); 
} 

지금 당신의 부분보기에 당신은

부분보기이 (부분보기 이제 ParentModel합니다주의 할 것입니다. 아니 아이 모델.

@model MvcApplication1.Models.ParentModel 
@{ 
    List<SelectListItem> listMetroItems = new List<SelectListItem>(); 

    listMetroItems.Add(new SelectListItem 
    { 
     Text = "no metro", 
     Value = "NoMetroAvailable", 
     Selected = true 
    }); 
} 

<ul id="info-left"> 
    <li> 
     @Html.LabelFor(m => m.Info.Undergraund) 
     @Html.DropDownListFor(m => m.Info.Undergraund, listMetroItems) 
    </li> 
    <li> 
     @Html.LabelFor(m => m.Info.House) 
     @Html.TextBoxFor(m => m.Info.House) 
    </li> 
    <li> 
     @Html.LabelFor(m => m.Info.Flat) 
     @Html.TextBoxFor(m => m.Info.Flat) 
    </li> 
    <li> 
     @Html.LabelFor(m => m.Info.Floor) 
     @Html.TextBoxFor(m => m.Info.Floor) 
    </li> 
</ul> 

<ul id="info-right"> 
     <li> 
     @Html.LabelFor(m => m.Info.Street) 
     @Html.TextBoxFor(m => m.Info.Street) 
     </li> 
     <li> 
      @Html.LabelFor(m => m.Info.Building) 
      @Html.TextBoxFor(m => m.Info.Building) 
     </li> 
     <li> 
      @Html.LabelFor(m => m.Info.Porch) 
      @Html.TextBoxFor(m => m.Info.Porch) 
     </li> 
     <li> 
      @Html.LabelFor(m => m.Info.IntercomCode) 
      @Html.TextBoxFor(m => m.Info.IntercomCode) 
    </li> 
    </ul> 
+0

PaulBinder, 그것을 설명하기위한 고맙습니다. 나는이 모든 것이 엘리먼트의 이름 변경으로 인한 것이라는 것을 이해했다. 좀 더 쉽게 해결하기로 결정했다. 부분 뷰를 업데이트 할 때 jquery로 요소 이름을 바꾼다. – Starter