4
\$\begingroup\$

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.

\$\endgroup\$
4
  • 1
    \$\begingroup\$ A few things. First off, welcome to Code Review! Second. I edited your post for grammar and stuff. Please check that I didn't break anything or change the intent of your question. Thirdly. Is this code your actual working code? From reading closely now it doesn't seem to be working. also you seem to have cut down your view heavily. Please clarify in a comment ;) \$\endgroup\$ Commented Jul 31, 2014 at 12:09
  • \$\begingroup\$ Yes I did not no what the rules here where in posting lengthy code so I wanted to see has first its loading the dropdown boxes and all fine but I was wanting a better way to switch between the partial views that I would be loading into the div \$\endgroup\$ Commented Jul 31, 2014 at 15:48
  • \$\begingroup\$ as I can't read your mind, but seem to need another coffee to understand the second part of your sentence, I'll just leave that the way it is.. Concerning long questions. We don't have problems with long questions. In fact the more context you can provide, the better answers are possible. Keep in mind that anything you post here is under CC-BY-SA license ;) \$\endgroup\$ Commented Jul 31, 2014 at 15:53
  • \$\begingroup\$ Also to save you some time, it looks like you are getting ready to use JSON.Stringify with a content-type of "application/html". I am fairly certain if you do that you will need to change the content-type to "application/json". \$\endgroup\$ Commented Jul 31, 2014 at 16:42

1 Answer 1

Reset to default
1
\$\begingroup\$

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

You must log in to answer this question.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.