Using AJAX to load a partial view not working

Question

Forgive me, I am new to MVC and AJAX.

Currently I am simply submitting a form, and I want to use the data from the form to update a table in a partial view using ajax.

My _UserInfo partial view looks like this:

@model IEnumerable<Dashboard.Models.UserInfo>
<table>
    <tr>
        <th>
           Firstname
        </th>
        <th>
           Lastname
        </th>
        <th>
            EmailAddress
        </th>
        <th>
        </th>
    </tr>
@foreach (var item in Model) {
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.firstName)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.surname)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.emailAddress)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.SAMuserName)
        </td>
    </tr>
}
</table>

My main User view looks like this:

@model Dashboard.Models.User
@Scripts.Render("~/bundles/jqueryval")

@using (Ajax.BeginForm("_UserInfo", "User", new AjaxOptions()
                        {
                            HttpMethod = "GET",
                            UpdateTargetId = "results",
                            InsertionMode = InsertionMode.Replace
                        }))
{

    <fieldset>
    //...My Form 

        <p>
            <input type="submit" value="Find" />
        </p>
    </fieldset>
}

<div id="results">
</div>

And last this is my UserController:

public PartialViewResult UserResults(User person)
{
    UserInfo personInfo = new UserInfo();

    //....Doing stuff

    return PartialView("_userInfo", personInfo);
}

---

Now I know this probably isnt good. But this is the best attempt I have tried with my little knowledge.

When I click the button on the User view, I am getting a 404 error saying that _UserInfo cannot be found.

I believe that the source of all of my issues is in

 @using (Ajax.BeginForm("_UserInfo", "User", new AjaxOptions()
                        {
                            HttpMethod = "GET",
                            UpdateTargetId = "results",
                            InsertionMode = InsertionMode.Replace
                        }))

But with my knowledge, I don't know what is wrong.

---

*EDIT:*As it has been pointed out to me, I was creating my HTML form incorrectly. I have since changed it to

@using (Ajax.BeginForm("UserResults", "User", new AjaxOptions(){...}

My action is now being called! However, my partial view is not being loaded onto the screen.

Answer 1

The code looks good. Is necessary add the script:

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

@model Dashboard.Models.User
@Scripts.Render("~/bundles/jqueryval")

@using (Ajax.BeginForm("_UserInfo", "User", new AjaxOptions()
                        {
                            HttpMethod = "GET",
                            UpdateTargetId = "results",
                            InsertionMode = InsertionMode.Replace
                        }))
{

    <fieldset>
    //...My Form 

        <p>
            <input type="submit" value="Find" />
        </p>
    </fieldset>
}

<div id="results">
</div>

Now, your code could works.

Answer 2

For your specific overload, the first two strings are ActionName and ControllerName MSDN. As such, it should mirror your controller like so:

@using (Ajax.BeginForm("userResults", "User", new AjaxOptions()
                    {
                        HttpMethod = "GET",
                        UpdateTargetId = "results",
                        InsertionMode = InsertionMode.Replace
                    }))

In addition, it's worth noting that in following naming conventions, userResults SHOULD be renamed to UserResults

EDIT: Make sure that you are using both Ajax.BeginForm (see update) and that you also have included the ajax unobtrusive script into your bundle. In BundleConfig.RegisterBundles, you should have the follow bundle addition.

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

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

And in your HTML, make sure both bundles are called.

@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jqueryval")

Answer 3

U need to use Ajax.BeginForm instead of Html.BeginForm

@using (Ajax.BeginForm("userResults", "User", new AjaxOptions()
                {
                    HttpMethod = "GET",
                    UpdateTargetId = "results",
                    InsertionMode = InsertionMode.Replace
                }));