FormBuilder Code Make More Genereic I want to construct a form builder for an internal project in mvc4. I am using partial views to load the various controls. However I feel that having ten or 20 action-results in my HomeController would not be the best way to go.
So I am wondering how I could do the following more efficiently.

As you see here I have three different posts happening for three partials views anyway to get this down to one. And what way would be best to save the form generated below. I was thinking of putting each of the actions in a POCO class, which would store the names of the controls etc.

&lt;input id="btnLoad" type="button" value="LoadRegistrationTemplate"/&gt;
&lt;input id="btnDropDown" type="button" value="Load DropDown"/&gt;
&lt;input id="txtarea" type="button" value="Text Area"/&gt;

    &lt;br/&gt;

    &lt;!-- partial view container --&gt;
    &lt;div id="divPartialViewContainer" &gt;
    &lt;/div&gt;

    &lt;script type="text/javascript"&gt;
        $(document).ready(function () {

            $('#btnLoad').click(function () {

                $.ajax({
                    url: '/Home/HtmlControlTest/',
                    type: 'POST',
                    contentType: 'application/html',
                    //data: JSON.stringify(model),
                    success: function (content) {
                        $('#divPartialViewContainer').append(content);
                    },
                    error: function (e) { }
                });
            });

            $('#txtarea').click(function () {

                $.ajax({
                    url: '/Home/textArea/',
                    type: 'POST',
                    contentType: 'application/html',
                    //data: JSON.stringify(model),
                    success: function (content) {
                        $('#divPartialViewContainer').append(content);
                    },
                    error: function (e) { }
                });
            });


            $('#btnDropDown').click(function () {

                $.ajax({
                    url: '/Home/DropDown/',
                    type: 'POST',
                    contentType: 'application/html',
                    //data: JSON.stringify(model),
                    success: function (content) {
                        $('#divPartialViewContainer').append(content);
                    },
                    error: function (e) { }
                });
            });


        });

    &lt;/script&gt;


And also the same case in my HomeController I have the same three different Result Partials.

    [HttpPost]
    public ActionResult HtmlControlTest()
    {
        return PartialView("HtmlControlTest");
    }

    [HttpPost]
    public ActionResult DropDown()
    {
        return PartialView("DropDown");
    }

    [HttpPost]
    public ActionResult TextArea()
    {
        return PartialView("TextArea");
    }


I feel that this would be best method to go by as under each actionresult I could store the control info in a class. But I don't know how I would pass variables to the actionresult.
I would add "data-api" as an attribute to the buttons

&lt;input type='button' data-api='Home/HtmlControlTest' /&gt;


Then you could do this with the js

$('input[data-api]').click(function () {

            $.ajax({
                url: $(this).attr('data-api'),
                type: 'POST',
                contentType: 'application/html',
                //data: JSON.stringify(model),
                success: function (content) {
                    $('#divPartialViewContainer').append(content);
                },
                error: function (e) { }
            });
        });