MVC 4将数据传递给Bootstrap Modal表单

时间:2013-04-10 13:18:00

标签: c# jquery asp.net-mvc twitter-bootstrap

我正在使用ASP.NET MVC4和Entity Framework开发一个Intranet Web应用程序。我有一个视图,它列举了我在数据库中的所有“人”,我可以编辑或删除它们。我正在尝试使用模态表单来确认删除操作(以便使用我的操作“删除”)。但是,为了做到这一点,我必须检索我想要删除的人的ID。

阅读了示例和文档后,我无法找到正确的方法来解除我想要删除的人的ID,以便将其用于我的行动。

我的删除操作:

public ActionResult Delete(long id)
    {
        Person person = db.Persons.Single(p => p.Id_Person == id);
        if (person == null)
        {
            return HttpNotFound();
        }

        db.Persons.DeleteObject(person);
        db.SaveChanges();

        return RedirectToAction("Index");
    }

我的观点(和模态):

    @model IEnumerable<BuSIMaterial.Models.Person>

@{
    ViewBag.Title = "Index";
}

@using PagedList.Mvc;
@using PagedList;

<link href="/Content/PagedList.css" rel="stylesheet" type="text/css" />


<h2>Index</h2>

<br />

<div class="group">
    <div class ="btn-group">
        <input type="button" value="New person" class="btn" onclick="location.href='@Url.Action("Create")';return false;"/>
        <input type="button" value="Download report" class="btn" onclick="location.href='@Url.Action("PersonReport")';return false;"/>
    </div>
</div>


@using (Html.BeginForm("SelectedPersonDetails", "Person"))
{  
    <form class="form-search">
        <label for="person">Search an employee : </label>
        <input type="text" id="tbPerson" name="tbPerson" class="input-medium search-query">
        <button type="submit" class="btn">Search</button>
    </form>
}


<br />

@Html.PagedListPager((IPagedList)ViewBag.PageOfPersons, page => Url.Action("Index", new { page }))

<br />

<table class="table table-striped">
<thead>
    <tr>
        <th>
            First Name
        </th>
        <th>
            Last Name
        </th>
        <th>
            National Number
        </th>
        <th>
            Start Date
        </th>
        <th>
            End Date
        </th>
        <th>
            Actions
        </th>
    </tr>
</thead>

<tbody>
@foreach (BuSIMaterial.Models.Person item in ViewBag.PageOfPersons)
{
    <tr>
        <td>
            @item.FirstName
        </td>
        <td>
            @item.LastName
        </td>
        <td>
            @item.NumNat
        </td>
        <td>
            @item.StartDate.ToShortDateString()
        </td>
        <td>
            @if (item.EndDate.HasValue)
            {
                @item.EndDate.Value.ToShortDateString()
            }
        </td>
        <td>
            <div class="btn-group">
                    <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
                        Actions
                        <span class="caret"></span>
                    </a>
                    <ul class="dropdown-menu">
                        @{

                            <li>@Html.ActionLink("Edit", "Edit", new { id = item.Id_Person })</li>
                            <li>@Html.ActionLink("Details", "Details", new { id = item.Id_Person })</li>
                            <li>@Html.ActionLink("Desactivate", "Desactivate", new { id = item.Id_Person })</li>
                            <li><a href="#myModal" data-toggle="modal" data-id="@item.Id_Person">Delete</a></li>
                        }
                    </ul>
             </div>
        </td>
    </tr>
}
</tbody>
<tfoot>
    <tr>
        <th>
            First name
        </th>
        <th>
            Last name
        </th>
        <th>
            National number
        </th>
        <th>
            Start date
        </th>
        <th>
            End date
        </th>
        <th>
            Actions
        </th>
    </tr>
</tfoot>
</table>

<div>@Html.PagedListPager((IPagedList)ViewBag.PageOfPersons, page => Url.Action("Index", new { page }))</div>

    <div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3 id="myModalLabel">Deleting an employee</h3>
        </div>
        <div class="modal-body">
        <p>Are you sure you want to delete this person? All the concerned data also will be deleted.</p>
        </div>
        <div class="modal-footer">
        <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
        <button class="btn btn-primary">Delete</button>
        </div>
    </div>


@section Scripts
{
    @Scripts.Render("~/bundles/jqueryval")
    @Scripts.Render("~/bundles/jqueryui")
    @Styles.Render("~/Content/themes/base/css")

    <script type="text/javascript" language="javascript">
        $(document).ready(function () {
            $('#tbPerson').autocomplete({
                source: '@Url.Action("AutoComplete")'
            });
        })

        $('#myModal').modal(options)

    </script>
}

我可以通过data-id ="@item.Id_Person"来获取ID,但我不知道如何使用它来最终调用我的动作。伙计们好吗?

1 个答案:

答案 0 :(得分:1)

我不确定您是否想使用jQuery之类的东西执行Ajax删除 - 或者如果您只想使用ASP.NET MVC。

如果您想使用Javascript,您将从data-id中提取Id,并使用$.ajax向控制器发送删除请求。

如果你想使用MVC和Ajax,我想你可能需要一个Ajax.ActionLink

如果您只想删除RedirectToAction,那么只需要正常的HTML.ActionLink