ASP MVC - Bootstrap部分视图问题

时间:2015-12-21 18:50:09

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

我的部分视图中只有 一个引导模式。
在页面中它被称为lilke this:

@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但我不确定。
有没有人有任何想法?
如果您需要更多详情请问。

2 个答案:

答案 0 :(得分:0)

您根据特定项目完全呈现了部分内容。单击其他项目不会神奇地更新该HTML。您需要发出一个AJAX调用来重新获取所单击项目的部分,然后在显示之前将您作为响应的HTML插入到模态的主体中。

答案 1 :(得分:0)

感谢@ stephen.vakil通过更改id dinamically来解决问题。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">
...