Question

Say I want to create a form that allows you to add elements dynamically through javascript…
for example, a project with many tasks…

$("#add_task").click(function () {
            $('#tasks').append('@Html.Raw(Html.Partial("_task_fields").ToHtmlString())');
        });

I seem to be having problems with this approach cause the javascript isnt encoded…
and using HttpUtility.JavaScriptStringEncode adds extra quotation marks to the elements that have attributes like class”someClass” for instance.

my task_fields partial is something like this

<tr>
     <td>
         Task
     </td>
     <td>
        <input type="text" name="task[name]" />
     </td>
</tr>

I just want the add_task link to work properly.

Please help.

Answer 1

Have a look at jquery the jquery template plugin. It’s a different but IMO much cleaner approach for this scenario.

Apart from using a jquery template only approach, you could also render the partial into a jquery template block and combine both technologies this way if you want.