Rendering a partial view with jquery

Question

The problem;

I have a view with two partial views one view to handle client side msgs and a gridview.

the gridview is a form and can delete update items. When deleting or updating error/success msgs are generated in tempdata however only the grid partialview is being rendered from the actionresult functions.

I need a way to simply render the messages partial view without posting anything or redirecting it to the controller since the data already exists in tempData.

View:

<div id="page-KnownRecipient">   

    @Html.Partial("ClientSideMessages")

    @Html.Partial("_TabsPartial")

    @if(Model != null)
    {
        using (Html.BeginForm())
        {
            @Html.Partial("_EditModePartial", Model);//Grid
        }
    }

</div>

All callback routing from the gridview just returns partialview EditModePartial and since the VIEW is never reloaded the messages that should be displayed in "ClientSideMessages" partial is never rendered after delete/ update callbacks. So accordingly I need a way to render the "ClientSideMessages" partialview using jquery, no new data is needed only the actual rendering of the partialview.

//---- Ended up using something like this;

View;

    <div id="detailsDiv">
        @Html.Partial("ClientSideMessages")
    </div>

Controller;

public ActionResult StatusMessages()
{
    return PartialView("ClientSideMessages");
}

JS;

function getStatusMessages() {
    var sURL = "/Home/StatusMessages"; // Just put the function in some base controller
    var $detailDiv = $('#detailsDiv');

    $.get(sURL, function (data) {
        $detailDiv.html(data);
    });
}

Thanks for tips and pointers tho !

Your question isn't very clear. Do you just want to hide and show markup that has already been rendered? — Ant P
– Ant P, Commented Apr 14, 2014 at 8:52
No the data is "new" so to say from the update/ delete functions on the grid. so an actual re-rendering of the msgs partial is needed.! — SomeRandomName
– SomeRandomName, Commented Apr 14, 2014 at 9:10

szpic · Accepted Answer · 2014-04-14 08:53:45Z

2

If You only want to render

@Html.Partial("ClientSideMessages")

using Jquery You can :

<div id="target">
    @Html.Partial("ClientSideMessages")
</div id="target">

and use ajax:

$.ajax({
        url: "/{Controle}/ClientSideMessages",
        type: "POST",
        contentType: "application/json; charset=utf-8",
        data: {Your data},
        error: function (data) {
            {error message};
        },
        success: function (data) {
                $('#target').html(data); // loading partialView into div
        }
    });

answered Apr 14, 2014 at 8:53

szpic

4,50815 gold badges56 silver badges90 bronze badges

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

Comments

K D · Accepted Answer · 2014-04-14 09:17:53Z

2

To do this you have to create one Action at your Controller which will just return the Client Message Partial View. Once you do that you have to do the following.

<div id="page-KnownRecipient">   

    <div id="clientMessages">
    @Html.Partial("ClientSideMessages")
    </div>
    @Html.Partial("_TabsPartial")

    @if(Model != null)
    {
        using (Html.BeginForm())
        {
            @Html.Partial("_EditModePartial", Model);//Grid
        }
    }

</div>

And then you can use following function to render client message in any callback.

<script type="text/javascript>
$(function(){
   var renderClientMessage = function(){
   $("#clientMessages").load("ClientMessageAction_URL");
};
});
</script>

edited Apr 14, 2014 at 9:17

answered Apr 14, 2014 at 8:54

K D

6,0191 gold badge25 silver badges36 bronze badges

3 Comments

szpic Over a year ago

You forgot about selector # in $("clientMessages")

SomeRandomName Over a year ago

i made a function in the controller like this; public ActionResult loadmsg() { return PartialView("ClientSideMessages"); } and the js; $(function refreshM(){ var renderClientMessage = function(){ $("#clientMessages").load("Settings/loadmsg"); }; }); however the messages partial is not being rendered.

K D Over a year ago

check the URL you have provided first, you should provide the correct path. With the help of Devloper Tools check in the network if the request is getting sent to server and you are getting the correct output from it.

Collectives™ on Stack Overflow

Rendering a partial view with jquery

2 Answers 2

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related