FormBuilder Code Make More Genereic

Question

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.

<input id="btnLoad" type="button" value="LoadRegistrationTemplate"/>
<input id="btnDropDown" type="button" value="Load DropDown"/>
<input id="txtarea" type="button" value="Text Area"/>

    <br/>

    <!-- partial view container -->
    <div id="divPartialViewContainer" >
    </div>

    <script type="text/javascript">
        $(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) { }
                });
            });


        });

    </script>

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.

Answer 1

I would add "data-api" as an attribute to the buttons

<input type='button' data-api='Home/HtmlControlTest' />

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) { }
            });
        });