Dynamically appending partial view in razor

Question

I am trying to append a table with a partial view (which is a tr) in a onclick event of a button.

Here is the button:

<input id="AddRow" type="button" value="Add Row" onclick="AddRowDynamic();" />

Here is the action method

function AddRowDynamic() {
    $('#EntryTable tr:last').after('@{Html.RenderPartial("WeeklyResourceAllocationPerProject");}'); 
}

And here is the partial view:

    <tr>
        @using (Html.BeginForm()) {
            @Html.ValidationSummary(true)
            <td>
                @Html.EditorFor(model => model.ProjectId)
            </td>

            <td class="AllocationEntry">
                @Html.EditorFor(model => model.Saturday)
            </td>
               ...
               ...
    }
    </tr>

But the javascript is showing error:

Webpage error details

Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/4.0; GTB7.1; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; InfoPath.2; .NET4.0C; .NET4.0E)
Timestamp: Tue, 25 Oct 2011 04:09:19 UTC


Message: Unterminated string constant
Line: 45
Char: 39
Code: 0
URI: http://localhost:65180/

Here is the source of the page where the error is occurring:

function AddRowDynamic() {
        $('#EntryTable tr:last').after('<tr>        ------------>Line 45
<form action="/" method="post">     <td>

Any idea how to solve the problem?

Answer 1

You should get your partial information by Ajax Post, instead of trying to render it from a PartialView.

By using this method, your model will be also updated and you will be able to get the information in your controller