Updating a div via Modal form using AJAX

Question

I am having trouble updating a specific div on a form using AJAX. I'm using a modal form that allows the user to edit existing information and save their changes. Once the user clicks on a 'save' button, the modal should close and update the text on the form from which it was called.

Currently the changes are saved into my DB but the modal redirects with the HTML code fragment that contains the new information to http://localhost:56544/client/UpdateClientDetails.

I want to run the UpdateClientDetails action but stay on the current view (Index.cshtml).

I have been referring to Apress's Pro ASP.NET MVC 5 so far since I am new to these technologies.

ClientController.cs

public ActionResult EditClientDetails(int id)
{
    Client temp_client = _clientService.GetClientInfo(id);

    ViewBag.ProvinceList = PopulateProvinceList(temp_client.Province);

    return PartialView(temp_client);
}

public ActionResult UpdateClientDetails(Client newClientDetails)
{
    _clientService.UpdateClient(newClientDetails);
    return PartialView(newClientDetails);
}

---

Index.cshtml View - desired div shown only

<div class="panel-body" id="client-@id-info">
    <label>Client Id: @client.Id</label>
        <address>
            @client.Address1, @client.Address2<br>
            @client.City, @client.Province<br>
            @client.PostalCode<br>
            <abbr title="Phone">P:</abbr> @client.PhoneNumber
        </address>
    <div><button value="@id" type="button" class="btn btn-primary btn-update-client">Change</button></div>
</div>

---

UpdateClientDetails.cshtml View

@using ProductManager.Models
@model Client

@Model.Address1, @Model.Address2<br>
@Model.City, @Model.Province<br>
@Model.PostalCode<br>
<abbr title="Phone">P:</abbr> @Model.PhoneNumber

---

EditClientDetails.cshtml

@model Client
@using ProductManager.Models

@{
    var attributes = new Dictionary<string, object>();
    attributes.Add("class", "form-horizontal");
    AjaxOptions ajaxOpts = new AjaxOptions
    {
        UpdateTargetId = "client-" + @Model.Id + "-info",
        Url = Url.Action("UpdateClientDetails")
    };
}

<div class="modal-header" id="EditClientDetails">
    <h4 class="modal-title" id="exampleModalLabel">@Model.Name - ID: @Model.Id</h4>
</div>
@using (Ajax.BeginForm(null, null, ajaxOpts, attributes))
{
    <div class="modal-body">
        <div class="form-group">
            <label for="clientAddress1" class="col-xs-3 control-label">Address 1</label>
            <div class="col-xs-9">
                <input type="text" class="form-control" id="clientAddress1-@Model.Id" name="Address1" value="@Model.Address1">
            </div>
        </div>
        <div class="form-group">
            <label for="clientAddress2" class="col-xs-3 control-label">Address 2</label>
            <div class="col-xs-9">
                <input type="text" class="form-control" id="clientAddress2-@Model.Id" name="Address2" value="@Model.Address2">
            </div>
        </div>
        <div class="form-group">
            <label for="clientCity" class="col-xs-3 control-label">City</label>
            <div class="col-xs-9">
                <input type="text" class="form-control" id="clientCity-@Model.Id" name="City" value="@Model.City">
            </div>
        </div>
        <div class="form-group">
            <label for="clientProvince" class="col-xs-3 control-label">Province</label>
            <div class="col-xs-9">
                @Html.DropDownListFor(model => model.Province, (IEnumerable<SelectListItem>)ViewBag.ProvinceList, new { @class = "form-control", @id = "clientProvince-" + @Model.Id })
            </div>
        </div>
        <div class="form-group">
            <label for="clientPostalCode" class="col-xs-3 control-label">Postal Code</label>
            <div class="col-xs-9">
                <input type="text" class="form-control" id="clientPostalCode-@Model.Id" name="PostalCode" value="@Model.PostalCode">
            </div>
        </div>
        <div class="form-group">
            <label for="clientPhoneNumber" class="col-xs-3 control-label">Phone #</label>
            <div class="col-xs-9">
                <input type="text" class="form-control" id="clientPhoneNumber-@Model.Id" name="PhoneNumber" value="@Model.PhoneNumber">
            </div>
        </div>
        <div>
            <input type="hidden" id="clientName-@Model.Id" name="Name" value="@Model.Name">
        </div>
        <div>
            <input type="hidden" id="clientID-@Model.Id" name="Id" value="@Model.Id">
        </div>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="submit" class="btn btn-primary">Save changes</button>
    </div>
}