2010-12-08 3 views
0

룸이 포함 된 시설 클래스를 편집 할 수있는 SPARK 웹 양식이 있습니다. 시설을 편집 할 때 편집을 위해 모든 회의실이 나열됩니다. 양식은 편집을 위해 잘 작동하지만 기존의 것 아래에 새로운 빈 공간을 추가하는 버튼 "Add Room"을 포함하고 싶습니다. 이것이 어떻게 이루어 졌는지 모든 아이디어? ASP.net MVC 2 SPARK - 스파크 페이지에 "새 항목 추가"링크를 만듭니다.

현재 내 SPARK 페이지에서이 일을하고있다 :

[All the Facility editing stuff...] 
<p>Room</p> 
<div class="small">Enter the rooms associated with this facility.</div> 
    <div class="add"> 
    <div id="room"> 
     <AddFacilityRoom each="var roomModel in Model.FacilityRooms" RoomModel="roomModel" Index="roomModelIndex" /> 
    </div> 
    <a id="addRoom" class="add" href="events/room/add.mvc">Add a room</a> 
    </div> 

AddFacilityRoom 방을 편집하기위한 HTML 요소가 포함되어 있습니다.

add.mvc를 사용하여 새로운 빈 Room 클래스를 만들고 기존의 것 아래에 새로운 동일한 (그러나 비어있는) 컨트롤을 삽입하고 싶습니다. 현재 "Add a Room"버튼을 클릭하면 새 페이지가 열립니다.

+0

다음과 같이 할 수 있습니다. <% = Html.ActionLink ("Add Room", "add", "room", new {id = "1"}, null) %> 페이지도. 이것을 위해 Ajax를 사용해야합니까? – Ian

+0

나는 대신 이것을 시도했다 : <% = Ajax.ActionLink ("Add Room", "Add", "Room", 새로운 {id = Model.Id}, 새로운 AjaxOptions {UpdateTargetId = "ajaxReplace"}) %>. 이것은 또한 새로운 페이지에서 열립니다. – Ian

답변

0

좋아, 알아 냈어. JQuery 지식을 이해하지 못했습니다. 아래의 기능 :

$('#addRoom').click(function() { 
    var a = $(this); 
    a.addClass('loading'); 
    $.ajax({ 
     url: a.attr('href'), 
     cache: false, 
     success: function (html) { 
      $('#room').append(html); 
      a.removeClass('loading'); 
     } 
    }); 
    return false; 
}); 

또한, 다음과 같은 HTML :

<div id="room"> 
<a id="addRoom" class="add" href="events/room/add.mvc">Add a room</a> 
</div> 

트릭을 수행합니다.

0

당신의 솔루션은 좋지만 스파크를 사용하고 있기 때문에 드물게 언급되는 자바 스크립트 템플릿을 고려할 수 있습니다. AddMvc에서 _AddFacilityRoom.spark의 마크 업을 복제 할 필요가 없다는 이점이 있습니다. 또한 json 요청이 필요하지 않습니다 (새 룸에 필요한 데이터가없는 경우).

나는 슬프게도 작동 방법을 정확히 잊어 버린 것,하지만 단계가 같은 위치 :

  1. 는 새로운 액션 추가 {반환 )

    공공 ActionResult AddRoomScript를 (새 JavascriptViewResult {view 이름 = "_AddFacilityRoom"}}; SRC = "(AddRoomScript")} "

  2. 그런 다음 몇 가지 JS 전화 및 설정 : }

  3. 함께 스크립트 태그를 추가 {Url.Action!" VAR HTML = Spark.Shared._AddFacilityRoom. RenderView ({RoomModel = {}); $ ('# room'). append (html);

올바르게 작동하려면 몇 가지 연구가 필요하지만 흥미로운 옵션입니다.