0

我可以查看特定诊所的详细内容和医生名单。医生列表有一个删除操作。我想使用 Ajax Helper 刷新诊所的详细信息（如更新面板），但正在加载完整的网页。

下面是我的网页：

在此处输入图像描述

我试过Ajax.Action，但它不起作用：

我的观点：

@model AddMore.Models.Clinics
@{
    ViewBag.Title = "Details";
}

<h2>Details</h2>
<div id ="divActions">
    <fieldset>
        <legend>My Details</legend>

        @Html.HiddenFor(model => model.Id)

        <div class="editor-label">
            @Html.LabelFor(model => model.Name)
        </div>
        <div class="editor-field">
            @Html.DisplayFor(model => model.Name)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.Contact)
        </div>
        <div class="editor-field">
            @Html.DisplayFor(model => model.Contact)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.Address)
        </div>
        <div class="editor-field">
            @Html.DisplayFor(model => model.Address)
        </div>
        <div class="editor-label">
            @Html.LabelFor(model => model.PinCode)
        </div>
        <div class="editor-field">
            @Html.DisplayFor(model => model.PinCode)
        </div>    

    </fieldset>

    <fieldset>
        <legend>Doctors</legend>

        @if (ViewBag.DoctorList != null)
        {
            <table>
                <tr>
                    <th>Doctor Name</th>
                    <th>Email Adress</th>
                    <th>Phone</th>
                    <th></th>
                </tr>
                @foreach (AddMore.Models.EditDoctors docs in ViewBag.DoctorList)
                {
                    <tr>
                        <td>@docs.DocName</td>
                        <td>@docs.DocEmail</td>
                        <td>@docs.DocHandphoneNumber</td>
                        <td>@if(docs.IsPrimary == false)
                            { 

@*@Html.ActionLink("Delete", "OtherDoctorDelete", new { id= docs.DocId, clinicid = Model.Id })*@

                            @Ajax.ActionLink("Delete", "OtherDoctorDelete", "Clinic", new { id= docs.DocId, clinicid = Model.Id}, new AjaxOptions
{
HttpMethod = "POST",
UpdateTargetId = "divActions",
Confirm = "Are you sure to delete?"
})

                        }</td>
                    </tr>
                }
            </table>
        }
    </fieldset>
    </div>
    <p>
        @Html.ActionLink("Edit", "Edit", new { id= Model.Id }) &nbsp;&nbsp; @Html.ActionLink("Back to list", "Index")
    </p>

我的行动：

   public ActionResult Details(int id = 0)
        {
            Clinics clinic = db.Clinic.Find(id);


            IList<Doctors> doctors = (from d in db.Doctor
                                      where d.ClinicId == id
                                      orderby d.Name descending
                                      select d).ToList();
            List<EditDoctors> doctorlist = new List<EditDoctors>();
            EditDoctors edoc;
            foreach (Doctors odoc in doctors)
            {
                edoc = new EditDoctors();
                edoc.ClinicId = odoc.ClinicId;
                edoc.DocId = odoc.Id;
                edoc.IsPrimary = odoc.IsPrimary;
                edoc.DocName = odoc.Name;
                edoc.DocHandphoneNumber = odoc.HandphoneNumber;
                edoc.DocEmail = odoc.Email;
                doctorlist.Add(edoc);
            }

            ViewBag.DoctorList = doctorlist;    

            return View(clinic);

        }

请告诉我我做错了什么。

抱歉英语不好！！

在马特的帮助下

我试过以下：

@if (ViewBag.DoctorList != null)
        {
            <table>
                <tr>
                    <th>Doctor Name</th>
                    <th>Email Adress</th>
                    <th>Phone</th>
                    <th></th>
                </tr>

               @using (Html.BeginForm())
{

                foreach (AddMore.Models.EditDoctors docs in ViewBag.DoctorList)
                {
                    <tr>
                        <td>@docs.DocName</td>
                        <td>@docs.DocEmail</td>
                        <td>@docs.DocHandphoneNumber</td>
                        <td>@if (docs.IsPrimary == false)
                            { 

                   <input type="Submit" id="@docs.DocId" value="Delete" class="btnDelete" />

                            <script>

                                $(document).ready(function () {
                                    $('.btnDelete').on('click', function () {
                                        var tr = $(this).closest('tr');
                                        $.ajax({
                                            url: '@(Url.Action("Delete", "OtherDoctorDelete", new {id= docs.DocId, clinicid = Model.Id }))',
            type: 'post',
            data: {
                Id: $(this).closest('tr').attr('id') //should be able to simplify this to tr.attr('id') but this will work
            },
            success: function (result) {
                //can just do a tr.remove but the link I posted above adds some style to it
                tr.css("background-color", "#FF3700");
                tr.fadeOut(400, function () {
                    tr.remove();
                });
            }
        });
    });
                            });
                            </script>
                            }</td>
                    </tr>
                }
               }
            </table>
        }

和

[HttpPost]
        public bool OtherDoctorDelete(int id, int clinicid)
        {
            Doctors doc = db.Doctor.Find(id);
            db.Doctor.Remove(doc);
            db.SaveChanges();
            return true;
            //return RedirectToAction("Details", new { id = clinicid });
        }

这些是脚本：

<script src="~/Scripts/jquery-1.7.1.min.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>

现在删除不起作用。我想我做错了什么，请帮忙。

4

1 回答 1

1

jquery 删除表行 Ok 首先进行 ajax 调用。只用按钮替换您的 html.actionlinks。在它们上放置一个类，您可以将其用作选择器。确保您在页面上引用了 jquery 并将其添加到您的脚本部分

$(document).ready(function(){
    $('.btnDelete').on('click', function(){
        var tr = $(this).closest('tr');
        $.ajax({
            url: '@(Url.Action("Delete", "OtherDoctorDelete"))',
            type: 'post',
            data: {
                Id: $(this).closest('tr').attr('id') //should be able to simplify this to tr.attr('id') but this will work
            },
            success: function (result) {
                //can just do a tr.remove but the link I posted above adds some style to it
                tr.css("background-color","#FF3700");
                tr.fadeOut(400, function(){
                    tr.remove();
                });
            }
        });
    });
});

在您的控制器上，确保您的删除方法上具有属性 httppost（上面行中的 [HttpPost]），并且它具有 Id 的输入参数。无论您如何称呼它，请确保在 ajax 调用中定义的内容完全匹配。然后根据查询结果返回 json 成功或错误（Asp.Net MVC3，返回成功 JsonResult）。您可能还想在此如何在 Jquery UI 对话框中实现“确认”对话框？ 如果您有任何问题，请告诉我。

于 2013-11-12T14:00:28.110 回答