如何在局部视图中加载模态？

Question

I'm having a problem to load a modal in a partial view,

$(".create").click(function () {
            debugger;
            $("#modalTipoPedido").load("ControllerNamePartialView/ActionNamePartialView", function () {
                $("#modalTipoPedido").modal();
            })
        });

When I activate this function, in the method load is added the name of the Controller of the view that my partial view is in, then i got a Non Found Error like this:

GET http://localhost:2328/ControllerView/ControllerPartialView/ActionNamePartialView 404 (Not Found)

How to not add the name of the Controller of the view in load method ?

Answer 1

I recommend to use a code similar than this:

<script>
    $(function(){
        $("#mydialog").dialog({
            modal: true,
            width: "800px",
            autoOpen: false
        });

        $(".create").on("click", function () {
            $("#mydialog").dialog("open");
        });

    });
</script>

And in your cshtml file (your View), you can use something like:

<span class="create">
    @Ajax.ActionLink("This is the link",
        "ActionNamePartialView",
        "ControllerNamePartialView",
        new { id = 123 },
        new AjaxOptions
        {
            HttpMethod = "GET",
            InsertionMode = InsertionMode.Replace,
            UpdateTargetId = "mydialog"
    })
</span>

Now, In your controller you must have something like:

public ActionResult ActionNamePartialView()
{
    var model = //Code to get your model;
    return PartialView(model);
}

And in your Partial View :

@model YourProject.YourModel

<p>All the code that you want to display in your modal</p>

Hope works to you