特定のクリニックの詳細と医師のリストを表示するビューがあります。医師のリストには削除アクションがあります。Ajax Helper を使用してクリニックの詳細 (更新パネルなど) を更新したいのですが、完全な Web ページがロードされています。
以下は私のウェブページです：
私は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 }) @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>
現在、削除は機能していません。私は何か間違ったことをしていると思います、助けてください。