I have a view which content Detail for particular clinic and list of doctors. List of doctors have a Delete action. I want to refresh detail of clinic (like update panel) using Ajax Helper but complete web page is loading.
Below is my web page:
I have tried Ajax.Action, but it is not working :
My View:
@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>
My Action:
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);
}
Please tell me what is I am doing wrong.
Sorry about bad English!!
After Matt's Help
I tried following:
@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>
}
and
[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 });
}
these are scripts:
<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>
Now delete is not working. I think I am doing something wrong, please help.
