ASP MVC - 引导部分视图问题答案

【问题标题】：ASP MVC - Bootstrap Partial View IssueASP MVC - 引导部分视图问题
【发布时间】：2016-03-27 22:11:29
【问题描述】：

我有一个局部视图，其中只有一个引导模式。
在页面中它被称为类似这样：

@Html.Partial("_PartialEnderecoEditModal", item) |

到我表的每个项目。
问题是当我选择任何项目时，它只显示第一个项目的信息...
我已经在浏览器上检查了生成的源并在看起来像这样：

   <tr>
                        <td style="display:none" id="id">
                            94
                        </td>
                        <td>
                            rua teste
                        </td>
                        <td>
                            123
                        </td>
                        <td>
                            dhaui&#39;
                        </td>
                        <td>
                            aiujasi
                        </td>
                        <td>
                            sososo
                        </td>
                        <td>
                            sp
                        </td>                        
                        <td>
                            18000000
                        </td>
                        <td>
                            <style>
    #btnEditar {
        padding: 0px;
    }
</style>
<a class="btn btn-link" id="btnEditar" href="#" role="button" data-toggle="modal" data-target="#ModalEnderecoEdit">Editar</a>
<!-- Modal -->
<div class="modal fade" id="#ModalEnderecoEdit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">Cadastro de Endereço</h4>
            </div>
            <div class="modal-body">
                <fieldset id="infoEndereco">
                    <div class="row">
                        <div class="col-md-8">
                            <input class="form-control input-sm text-box single-line" id="een_endereco" name="een_endereco" placeholder="Endereço" type="text" value="rua teste" />
                            <span class="field-validation-valid text-danger" data-valmsg-for="een_endereco" data-valmsg-replace="true"></span>
                        </div>
                        <div class="col-md-4">
                            <input class="form-control input-sm text-box single-line" id="een_numero" name="een_numero" placeholder="Numero" type="text" value="123" />
                            <span class="field-validation-valid text-danger" data-valmsg-for="een_numero" data-valmsg-replace="true"></span>
                        </div>
                    </div>
                    <br />
                    <div class="row">
                        <div class="col-md-12">
                            <input class="form-control input-sm text-box single-line" id="een_comple" name="een_comple" placeholder="Complemento" type="text" value="dhaui&#39;" />
                            <span class="field-validation-valid text-danger" data-valmsg-for="een_comple" data-valmsg-replace="true"></span>
                        </div>
                    </div>
                    <br />
                    <div class="row">
                        <div class="col-md-6">
                            <input class="form-control input-sm text-box single-line" id="een_bairro" name="een_bairro" placeholder="Bairro" type="text" value="aiujasi" />
                            <span class="field-validation-valid text-danger" data-valmsg-for="een_bairro" data-valmsg-replace="true"></span>
                        </div>
                        <div class="col-md-6">
                            <input class="form-control input-sm text-box single-line" id="een_cidade" name="een_cidade" placeholder="Cidade" type="text" value="sososo" />
                            <span class="field-validation-valid text-danger" data-valmsg-for="een_cidade" data-valmsg-replace="true"></span>
                        </div>
                    </div>
                    <br />
                    <div class="row">
                        <div class="col-md-6">
                            <input class="form-control input-sm text-box single-line" id="een_uf" name="een_uf" placeholder="Estado" type="text" value="sp" />
                            <span class="field-validation-valid text-danger" data-valmsg-for="een_uf" data-valmsg-replace="true"></span>
                        </div>
                        <div class="col-md-6">
                            <input class="form-control input-sm text-box single-line" id="een_cep" name="een_cep" placeholder="CEP" type="text" value="18000000" />
                            <span class="field-validation-valid text-danger" data-valmsg-for="een_cep" data-valmsg-replace="true"></span>
                        </div>
                    </div>
                </fieldset>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
                <button id="addEndereco" type="button" OnClick="gravarDetalheEndEdit(this);" class="btn btn-primary">Salvar</button>
            </div>
        </div>
    </div>
</div>
 |
                            <a href="/entidades/Details/94">Details</a> |
                            <a onclick="excluirUpdateDetalhe(this, 'tabEndereco', 'D');">Excluir</a>
                        </td>
                    </tr>
                    <tr>
                        <td style="display:none" id="id">
                            95
                        </td>
                        <td>
                            rua teste2
                        </td>
                        <td>
                            151
                        </td>
                        <td>

                        </td>
                        <td>
                            jiojoij
                        </td>
                        <td>
                            joijo
                        </td>
                        <td>
                            ji
                        </td>                        
                        <td>
                            18000000
                        </td>
                        <td>
                            <style>
    #btnEditar {
        padding: 0px;
    }
</style>
<a class="btn btn-link" id="btnEditar" href="#" role="button" data-toggle="modal" data-target="#ModalEnderecoEdit">Editar</a>
<!-- Modal -->
<div class="modal fade" id="#ModalEnderecoEdit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">Cadastro de Endereço</h4>
            </div>
            <div class="modal-body">
                <fieldset id="infoEndereco">
                    <div class="row">
                        <div class="col-md-8">
                            <input class="form-control input-sm text-box single-line" id="een_endereco" name="een_endereco" placeholder="Endereço" type="text" value="rua teste2" />
                            <span class="field-validation-valid text-danger" data-valmsg-for="een_endereco" data-valmsg-replace="true"></span>
                        </div>
                        <div class="col-md-4">
                            <input class="form-control input-sm text-box single-line" id="een_numero" name="een_numero" placeholder="Numero" type="text" value="151" />
                            <span class="field-validation-valid text-danger" data-valmsg-for="een_numero" data-valmsg-replace="true"></span>
                        </div>
                    </div>
                    <br />
                    <div class="row">
                        <div class="col-md-12">
                            <input class="form-control input-sm text-box single-line" id="een_comple" name="een_comple" placeholder="Complemento" type="text" value="" />
                            <span class="field-validation-valid text-danger" data-valmsg-for="een_comple" data-valmsg-replace="true"></span>
                        </div>
                    </div>
                    <br />
                    <div class="row">
                        <div class="col-md-6">
                            <input class="form-control input-sm text-box single-line" id="een_bairro" name="een_bairro" placeholder="Bairro" type="text" value="jiojoij" />
                            <span class="field-validation-valid text-danger" data-valmsg-for="een_bairro" data-valmsg-replace="true"></span>
                        </div>
                        <div class="col-md-6">
                            <input class="form-control input-sm text-box single-line" id="een_cidade" name="een_cidade" placeholder="Cidade" type="text" value="joijo" />
                            <span class="field-validation-valid text-danger" data-valmsg-for="een_cidade" data-valmsg-replace="true"></span>
                        </div>
                    </div>
                    <br />
                    <div class="row">
                        <div class="col-md-6">
                            <input class="form-control input-sm text-box single-line" id="een_uf" name="een_uf" placeholder="Estado" type="text" value="ji" />
                            <span class="field-validation-valid text-danger" data-valmsg-for="een_uf" data-valmsg-replace="true"></span>
                        </div>
                        <div class="col-md-6">
                            <input class="form-control input-sm text-box single-line" id="een_cep" name="een_cep" placeholder="CEP" type="text" value="18000000" />
                            <span class="field-validation-valid text-danger" data-valmsg-for="een_cep" data-valmsg-replace="true"></span>
                        </div>
                    </div>
                </fieldset>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
                <button id="addEndereco" type="button" OnClick="gravarDetalheEndEdit(this);" class="btn btn-primary">Salvar</button>
            </div>
        </div>
    </div>
</div>

这是我的部分视图代码：

@model prjArqBuild.entidade_endereco
<style>
    #btnEditar {
        padding: 0px;
    }
</style>
<a class="btn btn-link" id="btnEditar" href="#" role="button" data-toggle="modal" data-target="#ModalEnderecoEdit">Editar</a>
<!-- Modal -->
<div class="modal fade" id="#ModalEnderecoEdit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">Cadastro de Endereço</h4>
            </div>
            <div class="modal-body">
                <fieldset id="infoEndereco">
                    <div class="row">
                        <div class="col-md-8">
                            @Html.EditorFor(model => model.een_endereco, new { htmlAttributes = new { @class = "form-control input-sm", placeholder = "Endereço" } })
                            @Html.ValidationMessageFor(model => model.een_endereco, "", new { @class = "text-danger" })
                        </div>
                        <div class="col-md-4">
                            @Html.EditorFor(model => model.een_numero, new { htmlAttributes = new { @class = "form-control input-sm", placeholder = "Numero" } })
                            @Html.ValidationMessageFor(model => model.een_numero, "", new { @class = "text-danger" })
                        </div>
                    </div>
                    <br />
                    <div class="row">
                        <div class="col-md-12">
                            @Html.EditorFor(model => model.een_comple, new { htmlAttributes = new { @class = "form-control input-sm", placeholder = "Complemento" } })
                            @Html.ValidationMessageFor(model => model.een_comple, "", new { @class = "text-danger" })
                        </div>
                    </div>
                    <br />
                    <div class="row">
                        <div class="col-md-6">
                            @Html.EditorFor(model => model.een_bairro, new { htmlAttributes = new { @class = "form-control input-sm", placeholder = "Bairro" } })
                            @Html.ValidationMessageFor(model => model.een_bairro, "", new { @class = "text-danger" })
                        </div>
                        <div class="col-md-6">
                            @Html.EditorFor(model => model.een_cidade, new { htmlAttributes = new { @class = "form-control input-sm", placeholder = "Cidade" } })
                            @Html.ValidationMessageFor(model => model.een_cidade, "", new { @class = "text-danger" })
                        </div>
                    </div>
                    <br />
                    <div class="row">
                        <div class="col-md-6">
                            @Html.EditorFor(model => model.een_uf, new { htmlAttributes = new { @class = "form-control input-sm", placeholder = "Estado" } })
                            @Html.ValidationMessageFor(model => model.een_uf, "", new { @class = "text-danger" })
                        </div>
                        <div class="col-md-6">
                            @Html.EditorFor(model => model.een_cep, new { htmlAttributes = new { @class = "form-control input-sm", placeholder = "CEP" } })
                            @Html.ValidationMessageFor(model => model.een_cep, "", new { @class = "text-danger" })
                        </div>
                    </div>
                </fieldset>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
                <button id="addEndereco" type="button" OnClick="gravarDetalheEndEdit(this);" class="btn btn-primary">Salvar</button>
            </div>
        </div>
    </div>
</div>

如您所见，它呈现正确。但是当它被调用时，只会弹出第一个。
我认为那是因为 Modal ID，但我不确定。
有人知道吗？
如果您需要更多详细信息，请询问.

【问题讨论】：

@GiorgiNakeuri 页面中渲染的局部视图示例
是的，id 可能有问题。我不喜欢这样的页面上有两个具有相同 id 的元素的外观。你能在元素 id 后面加上一些可以唯一标识局部视图的每个实例的东西吗？这将是我的第一个猜测。
@stephen.vakil 我的主要问题是部分视图呈现在每个表行上。这就是我需要的。有没有办法动态更改 id 或类似的方法？
您的item 没有一个名为id 的属性可以用来生成它吗？例如类似id='@string.format("{0}#ModalEnderecoEdit", model.id)'
@stephen.vakil 谢谢！有效！我尝试过类似的方法，但没有奏效。但是这样问题就解决了。

标签： asp.net-mvc twitter-bootstrap partial-views bootstrap-modal

【解决方案1】：

您实际上是根据特定项目渲染了部分内容。单击其他项目不会神奇地更新该 HTML。您需要发出 AJAX 调用以重新获取所单击项目的部分内容，然后在显示之前将作为响应返回的 HTML 插入到模态的正文中。

【讨论】：

我不明白你的回答。他调用了partial 两次，将不同的item 传递给每个。然后有一个按钮来激活每个模式。他的示例输出中的两个项目的模态数据不同。

【解决方案2】：

感谢@stephen.vakil，通过动态更改id 解决了这个问题。
Partial View 看起来像这样：

...
    <a class="btn btn-link" id="btnEditar" href="#" role="button" data-toggle="modal" data-target="@string.Format("#{0}ModalEnderecoEdit", Model.een_id)">Editar</a>
    <!-- Modal -->
    <div class="modal fade" id="@string.Format("{0}ModalEnderecoEdit", Model.een_id)" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
...

【讨论】：