HOWTO: implement a jQuery version of ASP.Net MVC "Strongly Typed Partial Views"

Question

I am working on a multi-page assessment form where the questions/responses are database driven. Currently I the basic system working with Html.BeginForm via standard ASP.Net MVC.

At this point in time, the key to the whole system is the 'Strongly Typed Partial Views'. When the question/response is read from the database, the response type determines which derived model is created and added to the collection. The main view it iterates through the collection and uses the 'Strongly Typed Partial Views' system of ASP.Net MVC to determine which view to render the correct type of response (radio button, drop down, or text box).

I would like to change this process from a Html.BeginForm to Ajax.BeginForm. The problem is I don't have a clue as to how to implement the dynamic creation of the question/response in the JavaScript/jQuery world. Any thoughts and/or suggestions?

Extra info:

The reason for the change is the complex real time skip-pattern (validation) which needs to happen. Some questions trigger skip-patterns. The skip-patterns determine the accessibility and values of other questions. When a user changes a question that triggers a skip-pattern, all the current answers need to be sent back to the server to be run through the rule engine.

One issue is that when an ASP.Net MVC input is set to read-only, it's value is not posted back. The solution is a hidden input with the current value. This hidden value needs to be managed by JavaScript in both the case the value is changed by the user or by the rule engine.

All in all, it seems very complex to manage. It seems more logical that the ASP.Net MVC code simply provide a JSON model and jQuery simply builds the forms in the browser and then calls either the save action or the skip-pattern validation action, passing it the JSON model. Seems to remove one layer of head-ache:)

Here is the current code to generate the dynamic form:

@using (Html.BeginForm(new { mdsId = @Model.MdsId, sectionId = @Model.SectionId }))
{
    <div class="SectionTitle">
        <span>Section @Model.SectionName - @Model.SectionDescription</span>
        <span style="float: right">@Html.CheckBoxFor(x => x.ShowUnansweredQuestions) Show only unaswered questions</span>
    </div>

    @Html.HiddenFor(x => x.PrevSectionId)
    @Html.HiddenFor(x => x.NextSectionId)

    for (var i = 0; i < Model.answers.Count(); i++)
    {
        @Html.EditorFor(m => m.answers[i]);
    }   
}

Darin Dimitrov · Accepted Answer · 2012-06-18 14:32:36Z

2

You could send an AJAX request to a controller action which will return a partial view containing the correct markup using strongly typed partial view and inject this partial into the DOM. Steven Sanderson has a nice blog post on this topic: http://blog.stevensanderson.com/2010/01/28/editing-a-variable-length-list-aspnet-mvc-2-style/

answered Jun 18, 2012 at 14:32

Darin Dimitrov

1.0m276 gold badges3.3k silver badges3k bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Sam Carleton Over a year ago

Nice blog, but he is simply adding the html to the end of what he already there and still using the traditional post back. My situation is a bit more complex, which I will explain in the main post due to space and formatting in the comments:)

Darin Dimitrov Over a year ago

He uses AJAX to fetch the markup of the element being dynamically added.

Sam Carleton Over a year ago

Darin, I understand what he is doing, but what I am doing is actually more advanced than I initially posted. I just added more details on what I am doing exactly. All in all, Steven Sanderson is on the right path, I just need a lot more than that. I am fully per-paired for there to be a far better solution than what I just purposed in the original question.

Collectives™ on Stack Overflow

HOWTO: implement a jQuery version of ASP.Net MVC "Strongly Typed Partial Views"

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related