Question

我目前有一个html表，其中包含我存储在数据库中的许多客户端。我有一个设置，我可以在同一个屏幕上创建一个模态的客户端。这非常有效。我还放了一支小铅笔和＃34; x＆＃34;每行末尾的图标。我希望能够在单击铅笔时编辑行并在单击X时删除行。我有它工作，当我点击图标时，相应的模态打开，但我不知道如何保持跟踪需要编辑或删除的行。我想在单击铅笔并打开模态时加载编辑模式中的表单信息。如果我没有使用模态，我知道我可以简单地使用@Html.ActionLink并传递行的ID，但我不知道如何从模态中获取它。

我知道那里已经有类似的问题，其中许多我已经尝试过无济于事。以下是我认为相关的所有代码。我也使用来自https://www.twitterbootstrapmvc.com/

的Twiiter Bootstrap MVC辅助方法

<div class="row">
<div class="col-md-12">
    @using (var table=Html.Bootstrap().Begin(new Table().Striped()))
    {            
        <tr>
            @foreach (SelectListItem field in ViewBag.Fields)
            {
                <th>@field.Text</th>
            }
            <th>Edit</th>
            <th>Delete</th>
        </tr>
        foreach(CPS.Models.Client client in ViewBag.Clients)
        {
            <tr>
                <td>@client.firstName</td>
                <td>@client.lastName</td>
                <td>@client.mobileNumber</td>
                <td>@client.homeNumber</td>
                <td>@client.email</td>
                <td>
                    <a href="@Href("#EditModal")" role="button" data-toggle="modal" data-id="@client.id">
                        <img src="@Url.Content("~/Content/images/Edit.png")">
                    </a> 
                </td>
                <td>
                    <a href="@Href("#DeleteModal")" role="button" data-toggle="modal" data-id="@client.id" >
                        <img id="img_logo" alt="Logo" src="@Url.Content("~/Content/images/Delete.png")"/>
                    </a>                   
                </td>
            </tr>
        }
    }
</div>
</div>
@*Modals*@
@using (var modal = Html.Bootstrap().Begin(new         Modal().Id("CreateClientModal").Closeable()))
{
    @modal.Header("Create New Client")
    <div class="col-md-2"></div>
    using (modal.BeginBody())
    {
    using (var f = Html.Bootstrap().Begin(new Form().LabelWidthLg(3).LabelWidthSm(1)))
    {
        @Html.ValidationSummary()

        @f.FormGroup().TextBoxFor(m => m.firstName)
        @f.FormGroup().TextBoxFor(m => m.lastName)
        @f.FormGroup().TextBoxFor(m => m.mobileNumber)
        @f.FormGroup().TextBoxFor(m => m.homeNumber)
        @f.FormGroup().TextBoxFor(m => m.email)
        using (modal.BeginFooter())
        {
            @f.FormGroup().CustomControls(Html.Bootstrap().SubmitButton())
        }
    }
}

}

@using (var modal = Html.Bootstrap().Begin(new Modal().Id("EditModal").Closeable()))
{
    @modal.Header("Edit Client")
    using (modal.BeginBody())
    {
        using (var f = Html.Bootstrap().Begin(new Form().LabelWidthLg(3).LabelWidthSm(1)))
        {
        @Html.ValidationSummary()

        @f.FormGroup().TextBoxFor(m => m.firstName)
        @f.FormGroup().TextBoxFor(m => m.lastName)
        @f.FormGroup().TextBoxFor(m => m.mobileNumber)
        @f.FormGroup().TextBoxFor(m => m.homeNumber)
        @f.FormGroup().TextBoxFor(m => m.email)
        using (modal.BeginFooter())
        {
            @f.FormGroup().CustomControls(Html.Bootstrap().SubmitButton())
        }
    }
}
}

@using (var modal = Html.Bootstrap().Begin(new Modal().Id("DeleteModal").Closeable()))
{

    @modal.Header(" Client")
    using (modal.BeginBody())
    {
        <p>Are you sure you want to delete the selected client?</p>
    }
    using (modal.BeginFooter())
    {
        @Html.Bootstrap().ActionLinkButton("Yes","Clients")
    }
}

我真的很感激这方面的一些帮助。

如何在模式中编辑/删除数据库中的行

0 个答案: