CODEWITHSUNDEEP
c#javascripthtmlasp.net-mvcasp.net-mvc-3
Tom
Tom

Reputation: 143

Dynamically Changing View from selected dropdownlist item from Model Data in MVC

I'm not sure I have my head wrapped around this problem right, so bear with me if the explanation seems lacking. I'm still somewhat new at MVC-3.

I have an MVC page that I'm not certain what the best way to generate the View from the Model with the correct behavior would be. The model contains a list of text fields classes, each one containing a set of text fields to be displayed in the view (things like "HeadlineText", "ButtonText", "ColorText", etc.) The list of text field classes is for each unique language that is setup by the user, so that they can create a set of text fields for each different language.

In the view there is a drop-down-list that contains each language/object in the list of text field classes, and I want to change the displayed text fields in the view based on which language option is selected in the drop-down-list (and have this change dynamically accordingly).

My original plan was to generate the html in the view from the model for all objects in the list and just use javascript to hide/unhide the set of text fields that don't belong to the selected language in the drop-down-list. I don't really like the idea of generating a bunch of extra html on the page just so it's all available for changing through javascript, but I don't see any other way around updating the view without reloading/regenerating the view (I'm trying to make it look asynchronous, without post backs).

UPDATE:

The suggestion about partial views seems to be what I want, but I'm still wondering about something that the other commenters didn't have input on. Namely, if I wanted to do the partial views I still need the text fields to be bound to the data in the parent model, and (maybe with editor templates) still be able to modify them and be saved when the parent view/model/form is submitted for saving.

I read some other things over on bit.ly/N5DY5a and bit.ly/SVYqdT . If I understand them correctly, I should be able to pass the text field list object, or the parent model, to the partial view such that the view will generate editor templates for the correct fields and still tie those to the parent model, so that they get saved when the parent form is submitted? I haven't gotten anything to work yet, but I'm still trying...

Upvotes: 0

Views: 5255

Answers (2)

GG.
GG.

Reputation: 21864

Solution

Use a view to render the page the first time.

Then when your selected value change, use ajax to get the new content.

Now use a partial view to render the part of the page which is modified.

Your partial view contains the same markup that your view, but just the part modified.

Example

In the Controller :

//get data

if (!Request.IsAjaxRequest())
{
    return View(data);
}
else
{
    return PartialView("myPartialView", data);
}

In the View :

HTML :

...    
<div id="partialView"></div>
...

jQuery :

<script type="text/javascript">
    $(function () {
        $('#myDropdownlist').change(function () {
            $.get('/controller/action' + $(this).find(':selected').val(), function (data) {
                $('#partialView').html(data);
            }
        });
    });
</script>

Upvotes: 3

keshav
keshav

Reputation: 876

You can use partial view with Ajax to accomplish this.

Create a partial view for each language and then depending on the user selection do an Ajax call to update/replace the a segment of the page with a partial view.

more about partial views

Upvotes: 1

Related Questions