Insert partial view on current page rather than redirecting

Question

Basically I'm trying to return a partial view through an AJAX request. The issue is however the fact that the page gets redirected to the partial view rather than replacing the content on the current page.

Here's the view where I send the AJAX request:

@model MediaProfits.Models.DomainEntities.ProtectedPassword

@Scripts.Render("~/Scripts/CustomScripts/LeadChecker.js")
@{
    ViewBag.Title = "Unlock " + @Model.Name;
}

<h2>Unlock @Model.Name</h2>

<button onclick="StartCheckingLead('@Model.SubId');">Start Checking</button>

@using (Ajax.BeginForm("Lead", "Check", 
    new AjaxOptions() 
    { 
        HttpMethod = "get", 
        InsertionMode = InsertionMode.Replace, 
        UpdateTargetId = "password" 
    })) 
{
    @Html.HiddenFor(m => m.SubId) 
    <input type="submit" value="Check For Completion" />
}

@Html.Partial("_Password", "")

And here is the controller action that returns the partial view:

public PartialViewResult Lead(string subId)
    {
        var lead = db.Leads.Where(l => l.SubId == subId);
        if (lead.ToList().Count > 0)
        {
            return PartialView("~/Views/Passwords/_Password.cshtml", "unlocked...");
        }
        else
        {
            return PartialView("~/Views/Passwords/_Password.cshtml", "");
        }
    }

And here is the partial view (which the page now get's redirected to):

@model System.String
<div id="password">
    <label>Password:</label>
    <label>@Model</label>
</div>

Finally here is my BundleConfig.cs file:

using System.Web;
using System.Web.Optimization;

namespace MediaProfits
{
    public class BundleConfig
    {
        // For more information on Bundling, visit http://go.microsoft.com/fwlink/?LinkId=254725
        public static void RegisterBundles(BundleCollection bundles)
        {
            bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                        "~/Scripts/jquery-{version}.js"));

            bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
                        "~/Scripts/jquery-ui-{version}.js"));

            bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                        "~/Scripts/jquery.unobtrusive*",
                        "~/Scripts/jquery.validate*"));

            // Use the development version of Modernizr to develop with and learn from. Then, when you're
            // ready for production, use the build tool at http://modernizr.com to pick only the tests you need.
            bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                        "~/Scripts/modernizr-*"));

            bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css"));

            bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
                        "~/Content/themes/base/jquery.ui.core.css",
                        "~/Content/themes/base/jquery.ui.resizable.css",
                        "~/Content/themes/base/jquery.ui.selectable.css",
                        "~/Content/themes/base/jquery.ui.accordion.css",
                        "~/Content/themes/base/jquery.ui.autocomplete.css",
                        "~/Content/themes/base/jquery.ui.button.css",
                        "~/Content/themes/base/jquery.ui.dialog.css",
                        "~/Content/themes/base/jquery.ui.slider.css",
                        "~/Content/themes/base/jquery.ui.tabs.css",
                        "~/Content/themes/base/jquery.ui.datepicker.css",
                        "~/Content/themes/base/jquery.ui.progressbar.css",
                        "~/Content/themes/base/jquery.ui.theme.css"));
        }
    }
}

I want the partial view to be inserted on the current page - not redirect to it.

Answer 1

Make sure you have included the jquery.unobtrusive-ajax.js script to your page (after jquery):

<script type="text/javascript" src="@Url.Content("~/scripts/jquery.unobtrusive-ajax.js")"></script>

And since you are using bundles, you could just include the ~/bundles/jqueryval bundle in the scripts section in your view:

@section scripts {
    @Scripts.Render("~/bundles/jqueryval")
}

This obviously assumes that you have this scripts section defined in your Layout:

    ...
    @Scripts.Render("~/bundles/jquery")
    @RenderSection("scripts", required: false)
</body>