ASP.net MVC 2 SPARK - Create "Add New Item" link in spark page

I have a web form in SPARK which allow the editing of a Facility class that contains Rooms. When editing the Facility all the Rooms are listed for editing too. The form works fine for editing, but I would like to include a button "Add Room" that adds a new blank room below the existing ones. Any idea how this is accomplished?

Currently I am doing this in my SPARK page:

[All the Faci开发者_如何学JAVAlity 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 contains the html elements for editing a room.

I would like add.mvc to create a new empty Room class and inject a new identical (but empty) control below the existing ones. Currently, though it opens a new page when the "Add a Room" button is clicked.

Ok, I figured this out. I was missing the JQuery knowledge to understand this. The function below:

$('#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;
});

Plus, the following HTML:

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

Does the trick.

Your solution looks nice, but since you are using Spark, you could consider the rarely mentioned Javascript templates. The advantage of this being that the markup in _AddFacilityRoom.spark would not need to be duplicated in add.mvc. Nor would a json request be required (if no data needed for new room).

I'll sadly forgotten exactly how they work, but the steps are something like:

1. Add a new action:

   public ActionResult AddRoomScript() { return new JavascriptViewResult { ViewName = "_AddFacilityRoom" }; }

2. Add a script tag with: src="!{Url.Action("AddRoomScript")}"

3. Then some js to call and set: var html = Spark.Shared._AddFacilityRoom.RenderView( { RoomModel = {} ); $('#room').append(html);

Some research would be needed to get that working correctly, but it's an interesting option.