Pop-up JSON showing partial

Question

I would like to prepare pop-up using Ajax but I don`t know how to add Partial (there I have got error)

Problem

window.location = '@Url.RenderPartial("DodajTemat", Model)';

All example:

$("#dodajTemat_U").click(function () {
        $.ajax({
            url: '@Url.Action("DodajTemat", "StronaGlowna")', 
            dataType: "json",
            type: "POST",
            async: false,
            error: function () {
            },
            success: function (data) {
                if (data.Success) {
                    window.location = '@Url.RenderPartial("DodajTemat", Model)';
                }
            }
        });
    });

You can't set window.location = '@Url.RenderPartial("DodajTemat", Model)'- cause '@Url.RenderPartial("DodajTemat", Model)' return view not url address — , Mar 20 '13 at 11:50
when I write @Html.RenderPartial("DodajTemat", Model)' I get information -> Expression must to render value to render — Rafał Developer, Mar 20 '13 at 11:54
there is error and I send I don`t know how to implement partial. I check some ways. — Rafał Developer, Mar 20 '13 at 11:58
Try to append @Html.RenderPartial("DodajTemat", Model)' to some div — , Mar 20 '13 at 12:00
Why are you using 'Model' in @Url.RenderPartial("DodajTemat", Model)? Is that a variable or something? — Sharun, Mar 20 '13 at 12:02
Did you check this? http://stackoverflow.com/questions/1570127/render-partial-view-using-jquery-in-asp-net-mvc — Sharun, Mar 20 '13 at 12:11

Colin Bacon · Answer 1 · 2013-04-03T16:00:40.847

If you would like to display a popup/lightbox/overlay then I would suggest the correct approach is to use HTML and CSS to create this.

In terms of the partial view I would have this returned by the action method. Create an AjaxResult class that returns this.

public class AjaxResult
{
    public string Html { get; set; }
    public bool Success { get; set; }
}

Then your ajax result would look like this

$("#dodajTemat_U").click(function () {
    $.ajax({
        url: '@Url.Action("DodajTemat", "StronaGlowna")', 
        dataType: "json",
        type: "POST",
        async: false,
        error: function () {
        },
        success: function (data) {
            if (data.Success) {
                $('body').append(data.Html);
            }
        }
    });
});

score 2 · Accepted Answer · 2013-03-20T15:57:02.867

HTML

On your button click, you can declare the Action and it's corresponding Controller information in HTML. you can also set it hidden.

<div id="MyDiv" Control-Url = "@Url.Action("ActionName", "ControllerName")"
                Action-Url = "@Url.Action("ActionName", "ControllerName")">
</div>

JQuery

In the below code.

First Load the Control/Pop up.
Get the information for your control/Pop Up

$('#dodajTemat_U').click(function () {
    var MyDiv = $('#MyDiv');
    var url = MyDiv.attr('Control-Url');
    MyDiv.load(url, function () {
        url = MyDiv.attr('Action-Url');
        $.ajax({
            url: url,
            async: true,
            type: 'POST',
            beforeSend: function (xhr, opts) {
            },
            contentType: 'application/json; charset=utf-8',
            complete: function () { },
            success: function (data) {
            }
        });
    });
});

If you pay attention, to the above code, I am fetching two Url.

For the Pop Up/Partial View for load
For the Model and pass the Model information to PopUp.

You should send the Model information to the control from Action Method and not from the javaScript.

Controller Action for Partial View Load

//For loading the Pop-Up or for the Partial View
[HttpGet]
public PartialViewResult YourActionName()
{
    return PartialView("PartialViewName");
}

//For fetching the Model information and pass it to View.
public JsonResult ActionForGetInformation()
{
    return Json(Your Model Information goes here, JsonRequestBehavior.AllowGet);
}

Pop-up JSON showing partial

2 Answers2