Javascript 使用AJAX通过模态表单更新div

我在使用AJAX更新表单上的特定

div

时遇到问题。我使用的是一个模式表单，允许用户编辑现有信息并保存更改。一旦用户单击“保存”按钮，模态应该关闭并更新调用它的表单上的文本

当前更改保存到my DB中，但模式会使用包含新信息的HTML代码片段重定向到

http://localhost:56544/client/UpdateClientDetails

我想运行

UpdateClientDetails

操作，但保持在当前视图（Index.cshtml）上

自从我不熟悉这些技术以来，我一直在提到这些技术

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视图-仅显示所需的

div

<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>

客户Id:@Client.Id
@client.Address1、@client.Address2

@client.City、@client.Province

@客户端后代码

P:@client.PhoneNumber
改变

---

UpdateClientDetails.cshtml视图

@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

@使用ProductManager.Models
@模型客户端
@Model.Address1、@Model.Address2

@Model.City、@Model.Province

@型号。后代码

P:@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>
}

@model客户端
@使用ProductManager.Models
@{
var attributes=newdictionary（）；
添加（“类”、“形式水平”）；
AjaxOptions ajaxOpts=新的AjaxOptions
{
UpdateTargetId=“client-”+@Model.Id+“-info”，
Url=Url.Action（“UpdateClientDetails”）
};
}
@Model.Name-ID:@Model.ID
@使用（Ajax.BeginForm（null、null、ajaxOpts、attributes））
{
地址1
地址2
城市
省
@Html.DropDownListFor（model=>model.Province，（IEnumerable）ViewBag.ProvinceList，新的{@class=“form control”，@id=“clientProvince-”+@model.id}）
邮政编码
电话#
接近
保存更改
}

您包括了吗？@Jasen我想我包括了。到目前为止，我已经将：

到

Web.config

（在项目的根目录中找到）

和

包含在

/Views/Shared/\u Layout.cshtml

文件中（按照确切的顺序）。您不需要

@

这里

UpdateTargetId=“client-”+@Model.Id+“-info”

。在渲染的表单中它看起来像什么？@Jasen删除了@符号。在呈现的模态表单中，生成的表单标记看起来像

。该标记看起来类似于我的参考资料中显示的示例（

）。如果重定向，则表示脚本存在问题。有复本吗？e、 g.如果在

jquery.unobtrusive ajax.js

之后加载另一个

query-{version}.js

副本，那么它将无法工作。您是否包含了？@Jasen我相信我已经包含了。到目前为止，我已经将：

到

Web.config

（在项目的根目录中找到）

和

包含在

/Views/Shared/\u Layout.cshtml

文件中（按照确切的顺序）。您不需要

@

这里

UpdateTargetId=“client-”+@Model.Id+“-info”

。在渲染的表单中它看起来像什么？@Jasen删除了@符号。在呈现的模态表单中，生成的表单标记看起来像

。该标记看起来类似于我的参考资料中显示的示例（

）。如果重定向，则表示脚本存在问题。有复本吗？e、 g.如果在

jquery.unobtrusive ajax.js

之后加载另一个

query-{version}.js

副本，那么它将无法工作。