refresh Json Partial View

Question

I would like to refresh Json Partial View. I am trying use this:

$('#example123').load('@Url.Action("Rejestracja", "Logowanie")');

but doesn't work correct.

$.ajax({
            url: '@Url.Action("Rejestracja", "Logowanie")',
            dataType: "json",
            type: "POST",
            async: false,
            error: function () {
            },
            success: function (data) {
                if (data.Success) {

                    var el1 = $('<div><strong style="color: black" id="example123">' + data.View + '</strong></div>');
                    $(el1).dialog(
                        {
                            modal: true,
                            title: '<div></div>',
                            minWidth: 340,
                            minHeight: 300,
                            buttons: {
                                'Zamknij': function () {
                                    $('#example123').load('@Url.Action("Rejestracja", "Logowanie")');
                                    $(this).dialog("destroy");


                                }
                            }
                        });
                }

            }
        });

JSON Partial View

[HttpPost]
        public JsonResult Rejestracja()
        {
            bool dataCahnged = true;
            var model = new Logowanie();
            object view = this.RenderPartialViewToString("Rejestracja", model);
            return Json(new { Success = true, dataCahnged, View = view });
        }

(this work only first time)

<script type="text/javascript">
    $('#bladReje').hide();
    $('#bladRejeText').hide();
    $('#poprawnieReje').hide();
    $('#poprawnieRejeText').hide();


    </script>

Example (this work only first time)

<div id="ex"></div>
<script type="text/javascript">
    $('#ex').text('sasasa');
    </script>

Answer 1

Any reason in particular why you're calling the ajax using "POST"?, you're not sending any information to the server, so this is the first thing that I would change. Try changing this to GET.

In second place, try to change your method to get your view html to return a string. I'm using this extension method and it works just fine:

public static class JsonHelper
{
    public static string RenderPartialView(this Controller controller, string viewName, object model)
    {
        if (string.IsNullOrEmpty(viewName))
            viewName = controller.ControllerContext.RouteData.GetRequiredString("action");

        controller.ViewData.Model = model;
        using (var sw = new StringWriter())
        {
            ViewEngineResult viewResult = ViewEngines.Engines.FindPartialView(controller.ControllerContext, viewName);
            var viewContext = new ViewContext(controller.ControllerContext, viewResult.View, controller.ViewData, controller.TempData, sw);
            viewResult.View.Render(viewContext, sw);

            return sw.GetStringBuilder().ToString();
        }
    }
}

And here's an example about how to use it:

 public ActionResult GetClientList()
 {
     List<ClientModel> clientList = ClientRepository.GetClients();
     return Json(new JsonMixedResult { Result = "success", ViewHtml = this.RenderPartialView("ClientList", clientList) }, JsonRequestBehavior.AllowGet);
 }

Finally, check the final parameter on the return Json statement. That allows your client code to access the returned data from you Controller. In this case, is a Json object that includes your view html.

Hope this helps

Answer 2

I don't see why you just don't return PartialView??? I mean your Json result returns your partial view with 2 additional properties indicating success and that data has changed I guess but those two look pointless to me. Why don't you just do this in your action:

[AjaxOnly]
public PartialViewResult Rejestracja()
{
    var model = new Logowanie();
    return PartialView("Rejestracja", model);
}

and then your ajax call would look like this:

$.ajax({
    url: '@Url.Content("~/Logowanie/Rejestracja")',
    dataType: "html",
    type: "GET",
    error: function () {
       // Handle errors here...    
    },
    success: function (html) {
        $("#someDivOnYourPage").html(html);
    }
});

this way the entire partial view will be placed in the div of your choice on the page...