Load partial view after button click

Question

I have this issue, have search a lot but with now correct answer.

I have a contact form in the footer, on my _Layout page, but when I clicked the button the partial view is open in a new page.

I have remember to include the jquery.unobtrusive-ajax.js. Here is what I have.

Controller :

[HttpGet]
    public ActionResult Call()
    {
        return PartialView("_PartialFooter");
    }

    [HttpPost]
    [ValidateAntiForgeryToken]
    public ActionResult Call(CallMe callMe)
    {
        if(ModelState.IsValid)
        {

        }
        return PartialView("_PartialFooter");
    }

_Layout the scripts is above the Body tag in the bottom

 @using (Ajax.BeginForm("Call", "Home", new AjaxOptions { UpdateTargetId = "result" }))
                            {
                                <div id="result" class="margin-bottom-5">
                                    @Html.Action("Call", "Home")
                                </div>
                                <button class="btn btn-common-small margin-bottom-10 pull-right" type="submit">Send</button>
                            }

@Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @Scripts.Render("~/bundles/myscripts")
    @RenderSection("scripts", required: false)
@section Scripts {
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>

}

_PartialFooter (the partial view)

@model servicemadsen.Models.CallMe


@Html.AntiForgeryToken()
    <div class="row">
        <div id="result" class="margin-bottom-5">


            <div class="col-md-6">
                @Html.EditorFor(model => model.Name, new { htmlAttributes = new { @class = "form-control", @placeholder = "Navn" } })
            </div>
            <div class="col-md-6">
                @Html.EditorFor(model => model.Phone, new { htmlAttributes = new { @class = "form-control", @placeholder = "Telefon" } })
            </div>
            <div class="col-md-12">
                @Html.TextAreaFor(model => model.CallMeMessage, new { @class = "form-control", @placeholder = "Besked", @cols = 80, @rows = 7 })
            </div>
            <div class="col-md-12">
                @Html.ValidationMessageFor(model => model.Name, string.Empty, new { @class = "field-validation-error" })
                @Html.ValidationMessageFor(model => model.Phone, string.Empty, new { @class = "field-validation-error" })
                @Html.ValidationMessageFor(model => model.CallMeMessage, string.Empty, new { @class = "field-validation-error" })
            </div>

        </div>
      </div>

Hope someone could help, its probaly some dummy thing that I need

If your redirecting, it means that jquery.unobtrusive-ajax.js is not loaded correctly. Having @section Scripts { in a Layout makes no sense (and that part contains a 2nd copy of jquery). Move the jquery.unobtrusive-ajax.js file to after @Scripts.Render("~/bundles/myscripts") (or better use the jqueryval bundle, and delete the @section Scripts { — user3559349
– user3559349, Commented Dec 7, 2016 at 21:03

manu_rit · Accepted Answer · 2016-12-07 21:12:06Z

2

have you installed the microsoft jquery unobstrusive ajax? if not try with that. i do some tests with your code and works.

EDIT : i also change some code for the tests

[HttpPost]
    [ValidateAntiForgeryToken]
    public ActionResult Call(CallMe callMe)
    {
        if (ModelState.IsValid)
        {
            ModelState.Clear();
            callMe.CallMeMessage = callMe.CallMeMessage + " i was on the server";
        }
        return PartialView("_PartialFooter", callMe);
    }

and

            @using (Ajax.BeginForm("Call", "Home", new AjaxOptions { UpdateTargetId = "result", InsertionMode = InsertionMode.Replace}))
        {
            <div id="result" class="margin-bottom-5">
                @Html.Action("Call", "Home")


            </div>
            <button class="btn btn-common-small margin-bottom-10 pull-right" type="submit">Send</button>
            }

so you can see the changes.

edited Dec 7, 2016 at 21:12

answered Dec 7, 2016 at 20:55

manu_rit

545 bronze badges

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

5 Comments

tinaw25 Over a year ago

Yes in nuget I have installed Microsofr.jQuery.Unobtrusive.Ajax by microsoft

manu_rit Over a year ago

@tinaw25 and you add the script in the layout?

manu_rit Over a year ago

@tinaw25 this is my tests, i hope it helps you. github.com/Manuel-Iriarte/stackoverflow-20161207

tinaw25 Over a year ago

Thank you so much!!! You are my true hero :-). It is working now, I just copy some of your code in mine

manu_rit Over a year ago

glad to help!! ;)

Collectives™ on Stack Overflow

Load partial view after button click

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related