CODEWITHSUNDEEP
asp.netasp.net-mvcajax
Sergio
Sergio

Reputation: 9927

How to handle AJAX driven website in asp.net MVC (lots of views and partialviews)?

I am in the process of putting a new site together which will make use of AJAX to pull through page content should the user have javascript enabled.

So, I am in the situation whereby every Action Method requires a check to see if the request was through AJAX or not, which is straightforward. If the request was through AJAX then I can return a partialview, if not then a full view can be returned.

With this pattern though, I'll need to create a View and a PartialView for every page on the site. The only real difference between them is going to the inclusion of the masterpage.

Am I missing a trick here is is this doubling up of views the only way to go?

Thanks

EDIT - a bit more info

Lets say I had a page that could get accessed through /site/test. Somewhere in my JS I would add a hash to the url like so #/site/test. JS would then watch for any hash changes and load the partial views as needed. If JS was not available though, an entire view would need to be returned.

So for each page I would need the view, which would then include a call to RenderPartial which would load up the partial view which would actually contain the page content. So, for every page there are two files. It just seems there should be a cleaner way of doing this.

Upvotes: 1

Views: 262

Answers (1)

jim tollan
jim tollan

Reputation: 22485

Sergio, yes you are missing a trick!!

You should organise your page so that the static content in it is just that - static. This static page then calls the partial(s) that give the dynamic content. this would typically be used in the main page as such (i'm using jquery as per microsofts adopted stance on ajax now):

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <h2>My Header</h2>
    <%--lots of stuff omitted--%>
    <div id="dynamicList"><%Html.RenderPartial("List"); %></div>
    <%--also lots missed out here--%>
    <input type="button" id="btnRefresh" value="refresh" />
</asp:Content>

this means that the partial would always be rendered in the initial request. subsequent refreshes would call the partial method in the controller and repopulate the 'dynmaicList' div along the lines of:

<script type="text/javascript">
    // you might have a click or similar here to invoke the partial refresh
    $(function() {
         //click event (or some other 'change' event)
         $('#btnRefresh').click(function() {
             dynamicList();
         });
    });

    function dynamicList() {
        // where action/controller retruns a partialview result
        var url = '<%= Url.Action("List", "MyController") %>';
        // this is merely a wrapper method around jquery $ajax
        SendAjax(url, formParams(), beforedynamicListQuery, dynamicListResponse);
    }

    function beforedynamicListQuery() {
        $("#dynamicList").fadeTo('slow', 0.5);
    }

    function dynamicListResponse(data) {
        if (data.length != 0) {
            if (data.indexOf("ERROR:") >= 0) {
                $("#dynamicList_errmsg").html(data);
            }
            else {
                var selector = "#dynamicList";
                $(selector).fadeTo('slow', 1, function() {
                    $(this).html(data);
                });
            }
        }
    }
</script>

anyway, that's my take on it!! ;)

Upvotes: 4

Related Questions