ajax에서 데이터를 가져 오기 부모 뷰에서 사용할 부분 뷰

Question

사용자가 카테고리/하위 카테고리 구조를 탐색 한 다음 사용자가 새 카테고리를 추가 할 수 있도록하는 탐색 시스템을 구축하려고합니다. 여기

내 제어기는

...

여기

public ActionResult ManageCategories() 
    { 
     var categoryService = new CategoryService(_unitOfWork); 
     CategoryListViewModel model = categoryService.GetCategories(null); 
     return View("ManageCategories", model); 
    } 


    public PartialViewResult GetCategories(int? parentCategoryId) 
    { 
     var categoryService = new CategoryService(_unitOfWork); 
     CategoryListViewModel model = categoryService.GetCategories(parentCategoryId); 

     return PartialView("GetCategories", model); 
    } 

    [HttpPost] 
    public ActionResult AddNewCategory(string newCategoryName, int? parentCategoryId) 
    { 
     ...code to add new category to database... 

     // just redirect for now... 
     return RedirectToAction("ManageCategories", parentCategoryId); 
    } 

내 간체 도면이다 .. 여기서

 @model CategoryListViewModel 

     <ul id="category-explorer"> 
      @Html.Action("GetCategories", new { parentCategoryId = Model.ParentCategoryId }) 
     </ul> 

단지 주어진 하위 카테고리 목록을 표시하는 제 부분 단면도이다 상위 카테고리 ...

@model CategoryListViewModel 

@{ 

AjaxOptions ajaxOpts = new AjaxOptions 
{ 
    UpdateTargetId = "category-explorer", 
}; 

} 


@foreach(Category category in Model.Categories) 
{  
    <li>@Ajax.ActionLink(@category.Name, "GetCategories", new {parentCategoryId = category.CategoryId}, ajaxOpts)</li> 
} 

null의 카테고리는 최상위 카테고리를 의미합니다. 내 부분보기 내에서 아약스를 다시 사용하여 동일한 부분 뷰를 호출하지만 선택한 범주를 parentCategoryId로 전달하므로 재귀 구조가됩니다.

제 문제점은 내 ManageCategories보기가 사용자가 중첩 된 parentCategoryId의 최종 값을 얻는 방법입니다. 나는 그것이 'AddCategory'를 적절하게 호출 할 수 있도록이 값을 사용해야하는 양식을 기본보기에 가지고 있습니다.

아약스를 위로 설정하고보기가 정확하다고 생각합니다. 이것은 정적 변수를 저장하는 것에 의지하지 않고 깨끗하게 달성 할 수있는 방법에 다소 혼란 스러울뿐입니다.

Answer 1

컨트롤러가 각 HTTP 요청 사이에서 재구성되어 설정 한 개인 값이 손실되었다는 것을 알지 못하는 것처럼 보입니다. TempData 클래스를 사용하면 'GetCategories'작업 내에서 마지막으로 선택한 ID를 요청간에 저장할 수있었습니다.

Answer 2

asp.net의 Ajax 클래스로 돌아가는 대신 수동 JavaScript 프로그래밍을 수행하여이 문제를 해결할 수 있습니다. jQuery (또는 다른 라이브러리를 사용하여 jquery를 선호하기 때문에 널리 사용되며 대부분의 시간에 작업을 수행하기 때문에 jquery를 선호한다.) asp.net ajax를 사용하는 것만 큼 쉽게 Ajax 호출을 실행할 수있다. 물건.

당신은 당신의 부분보기 이제에서

<script type="text/JavaScript"> 
    var s_currentCategory = -1; 
    var loadCategory = function(categoryId){ 

     $.get("/GetCategories?parentCategoryId=" + categoryId, // hard coded url 
      function(data){ // Callback to handle the Ajax response 
       $("#category-explorer").html(data); 
       s_currentCategory = categoryId; 
      } 

     return false; // to cancel the link click event, preventing the browser to follow the link 

    } 

</script> 

아래에서 찾을 수있는 loadCategory 자바 스크립트 함수를 호출하는 브라우저의 원인이됩니다 링크를 클릭

@foreach(Category category in Model.Categories) 
{  
    <li><a href="#" onclick="return loadCategory('@category.CategoryId');">@category.Name</a></li> 
} 

이 넣어 시작할 수

이 시점에서 Ajax를 사용하여 마지막으로 검색된 categoryId에 대한 참조가 있습니다. 나는 이것이 당신이 원했던 것과 정확히 일치하지 않지만, 최소한 그것이 일반적인 방향으로 당신을 지적해야합니다.

이 코드를 사용하기 전에 jquery API를 읽는 것이 좋습니다. 전체 예제를 제공하지 않기 때문입니다. 예를 들어 Ajax 호출이 실패 할 경우 오류 처리기를 추가 할 수 있습니다. 당신이 당신의 AddCategory 기능을 후크 계획 방법을 보지 않고

http://api.jquery.com/

이 내가 할 수있는 최선이다. 정적 변수를 사용하지 않으려면 s_currentCategory이 합쳐질 수 있습니다. 좀 더 자세한 내용을 알려 주시면 기꺼이 조언 해 드리겠습니다.