Refresh A View/Partial View without using Ajax or Submit in MVC

Question

I have a ViewModel which contains Different Type of List

When first time page is loaded, I wanted to display the List of Data against the drop-down selected.

When the Drop-Down Changes then I want to display List of Data specific to that type.

But I don't want to go to my Controller, as in that Case I need to do the search/query, where as I already have all the types in my View at first.

How Can I Do that?

Any suggestions.

Thanks,

Amir Popovich · Accepted Answer · 2014-08-26 05:21:28Z

1

If you dont want to go to the server(ajax\submit) then you will need to download all the data(in the first response) and change the list using javascript.

When the select box's change occurs, you javascript will need to get the selected value and update the new list to work against it.

Here's an example:

HTML:

<select id="s1"></select>
<select id="s2"></select>

JS:

var currData = ["1", "2", "3"];
var otherData = [
    ["a", "b", "c"],
    ["d", "e", "f"],
    ["g", "h", "i"]
]


for (var i = 0; i < currData.length; i++) {
    var option = $('<option value="' + currData[i] + '">' + currData[i] + '</option>');
    $("#s1").append(option);
}
// s1 and s2 are the same when the page loads.
$('#s2').html($('#s1').html());

$('#s1').change(function () {
    var idx = currData.indexOf($(this).val());
    var newSelectData = otherData[idx]; // change s2 due to s1's selection
    $('#s2').children().remove(); // clear the s2 select box
    for (var i = 0; i < newSelectData.length; i++) {
        var option = $('<option value="' + newSelectData[i] + '">' + newSelectData[i] + '</option>');
        $("#s2").append(option);
    }
});

JSFIDDLE.

edited Aug 26, 2014 at 5:21

answered Aug 26, 2014 at 5:06

Amir Popovich

30.1k9 gold badges58 silver badges102 bronze badges

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

4 Comments

Arijit Mukherjee Over a year ago

You Mean display all data at first and hide the unwanted data? and use hide/show in jquery?

user3559349 Over a year ago

@ArijitMukherjee, That would be the only way without calling your controller, but why do you not want to do that?

Amir Popovich Over a year ago

I've edited and added a small example. I'm not sure this is exactly what you wanted but it will help you understand how you should do this.

Arijit Mukherjee Over a year ago

The problem is when I Use ajax, then I value does not persist from one view to another for more than once. one time it can be achieved using TempData.

Collectives™ on Stack Overflow

Refresh A View/Partial View without using Ajax or Submit in MVC

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related