MVC partial view renders without master page

Question

I am creating an umbraco MVC page that has a template that renders a partial view with 2 dropdown lists and a google map. When i load the page it has the master template with a partial view and it shows everything fine.

When i select an item from the dropdown list i pass the value to the controler and return to the partial view other data. The problem is that the return of the partial view shows only the partial view without the master template.

This is the code in the controller that fires when the page is loaded for the first time and this shows everything:

   public ActionResult RenderForm()
{
    MapFunction MF = new MapFunction ();

    MF=SetDropDown();
    MF.JSON= SetMarkers();


    return PartialView(Partial_View_Folder + "_MapFunction .cshtml", MF);
}

This is the code that fires when the dropdown is selected:

   public ActionResult ChangeATM(MapFunction mapFunction)
{
    MapFunction MF = new MapFunction ();


    mapFunction= ddlATMChange(mapFunction.PTT.ToString());
    MF = SetDropDown();

    mapFunction.Branch = MF.Branch;
    mapFunction.ATM = MF.ATM;

    return PartialView(Partial_View_Folder + "_MapFunction.cshtml", mapFunction);

}

My partial view code with the ddl:

 @using (Html.BeginUmbracoForm("ChangeATM", "MapFunction", FormMethod.Post))
{
            @Html.DropDownListFor(m => m.PTT, Model.Branch, "Chose...", new { onchange = "this.form.submit();" })
 }

I just want to refresh the partial view without loosing my master page and with new data.

score 0 · Answer 1 · answered Jul 27 '18 at 06:42

The problem was the BeginUmbracoForm in the PartialView.

I changed it to:

         @using (Ajax.BeginForm("ChangeATM", "MapFunction", null, new AjaxOptions
            {
                HttpMethod = "Post",
                InsertionMode = InsertionMode.Replace,
                UpdateTargetId = "Parent"
            }))
            {
                @Html.DropDownListFor(m => m.PTT, Model.Branch, "Choose...", new { onchange = "$(this.form).submit();", id = "use-ajax1" })
            }

Also you need to add the folowing script to the master page:

<script type="text/javascript">
$(document).on("change", ".use-ajax1", function (e) {
    e.preventDefault();
    var form = $(this).closest('form');
    $(form).submit();
});

The script prevents default actions and submits form using AjaxCall.

MVC partial view renders without master page

1 Answers1