Join the Stack Overflow Community
Stack Overflow is a community of 6.8 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote 0 down vote favorite

I have about 15 partial views that I need to display based upon user's menu tab selection. Basically I have these 15 menu tabs on the side and based on user click for these tabs, I will be displaying the content for that tab on the page.

Also I am using Knockout here.

So I have these 15 Knockout observables (self.tab_A(), self.tab_B(), ...self.tab_N()) populated when the page first loads.

The code I have is something like this. Here is the view.

<ul id="tabs">
    <li>
        <a data-bind="click: function(){ $root.ShowHideDiv(tab_A.id); }" style="cursor: pointer;">
           Tab A
        </a>
    </li>

    <li>
        <a data-bind="click: function(){ $root.ShowHideDiv(tab_B.id); }" style="cursor: pointer;">
         Tab B
        </a>
    </li>
    ...
    ...
</ul>

The partial views are pre-loaded but hidden from from user's view.

<ul>
    <li id="tab_A" style="display: none" class="hiddenDivs">
        @{Html.RenderPartial("~/Views/Claims/FroiReport/_Insurer.cshtml");}
    </li>

    <li id="tab_B" style="display: none" class="hiddenDivs">
        @{Html.RenderPartial("~/Views/Claims/FroiReport/_Insurer.cshtml");}
    </li>
</ul>

Displaying div using script on click event.

 self.ShowHideDiv = function (tabToShow) {
        console.log(tabToShow);
        $('.hiddenDivs').html('');
        $('#' + tabToShow).show();
    };

Now, the problem is that the UI using this code is working fine for 3-4 views but the design is breaking for the remaining views possibly because there are too many divs which are being hidden (I am not sure here).

So, I was looking into other options where I will load the specific view at run-time only. When user clicks on a tab, get the partial view and load it.

Hence, I tried something like this:

self.ShowHideDiv = function (tabToShow) {
    $('.hiddenDivs').html('');
    var view = getValueFromDict(dict, tabToShow); //gets the needed view from a dictionary in "~/Views/Products/CoolProducts/_ItemOne.cshtml" format
    $('.hiddenDivs').load('/Claims/ReturnPartialView/?partialViewName=' + view);
};

But this doesn't work since I do not have any Action/Controller associated with these views, I am unable to load the view directly using javascript/jquery.

Another option I have tried is creating a controller that returns a partial view.

public ActionResult ReturnPartialView(string partialViewName)
        {
            return PartialView(partialViewName);
        }

and calling it like this:

self.ShowHideDiv = function (tabToShow) {
    $('.hiddenDivs').html('');
    var view = getValueFromDict(dict, tabToShow);
    $('.hiddenDivs').load('/MyController/ReturnPartialView/?partialViewName=' + view);
}

Now this loads the view that I need but the KnockOut observable associated with the view is coming as null doing this.

I heard that KO templates can be used for my scenario but have not yet tried KO templates to solve this (which I am going to look into next). I would like to see if anyone has solution to my problem without using the KO templates.

Thanks much for your patience to trying to understand this.

share|improve this question
    
You have to hit controller through ajax get/post method and then return a partial view. – Muhammad Ashikuzzaman Dec 30 '15 at 11:53
    
So if there is no Action that is calling this View then I can not load it using javascript/ajax? – pso Dec 30 '15 at 11:59
    
You have to hit action of controller .. – Muhammad Ashikuzzaman Dec 30 '15 at 12:11
    
Other option is to load the partialview on page load, and then hide it using CSS. Then you can show or many copies of the hidden partialview through jquery. If you dont want to take this route, then you have to hit the action and return the partialview. – ramiramilu Dec 30 '15 at 12:13
    
@ramiramilu he may need to change the content of partial view after loading. That is why he is hitting the action by ajax/javascript. – Muhammad Ashikuzzaman Dec 30 '15 at 12:15
up vote 2 down vote

You can do this with jQuery in two steps.First from your view hit the desired controller action after the dom is ready or when an event is occurred. I have call controller here after the dom is ready. You can hit action get or post method as you wish.
Here in $.ajax I have used ( async: false ) so that the statement now I am calling has to be completed before the next statement in the function can be executed.

<script>
    $(document).ready(function () { 
        $.ajax({
            url: '/Controller/ActionNAme',
            type: 'POST',
            async: false,
            data: { ModelField: value},
            success: function (result) {
                $("#your_desired_div_id").html(result);
            }
        });
    });
</script>

Here is the action. The action return a view model as result to ajax.post function and in the ajax post function your your_desired_div_id content is changed with the partial view's contents.

 [HttpPost]
        public ActionResult ActionNAme  (ModelName ModelField)
        {
            var dBList= (from myTable in db.tableModel where myTable .column == ModelField.column  select  myTable).ToList();
                 return PartialView("_PartialView", dBList) 

        }
share|improve this answer
up vote 0 down vote

Same has been explained here..

https://cmatskas.com/update-an-mvc-partial-view-with-ajax/

share|improve this answer
    
Rather you can put a code that will be better. – Muhammad Ashikuzzaman Dec 30 '15 at 11:56
    
@Arasu, I looked at the link you provided but it is not the same scenario. The link is showing example for a view which is called through an Action from the controller unlike my case. – pso Dec 30 '15 at 12:00
    
@pso Okay. As like Muhammed mentioned in comment, you have to hit controller action from jquery/ajax. – Arasu RRK Dec 30 '15 at 12:04
up vote 0 down vote

You should have a controller action which returns the partial view. 

public ActionResult MyPartialView()
    {
        return PartialView("_MyPartialView", new MyPartialViewModel());
    }

You can call this controller method from javascript. Make sure the partial view exists in Views folder under the folder which matches your controller name.

Hope it helps!

share|improve this answer
    
Thanks @Amanvir but I am looking for a way to load it without hitting the Controller/Action. – pso Dec 30 '15 at 12:26

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.