Calling a Partialview with table on the main view - asp.net-mvc

Question

I'm trying to call a partial view with details table for some items. However, the partial view does not show any record in the main view. How I can call the Patrial view successfully? the partial view as follows:
#model IDECOHealthInsurance.Models.Pharmacy
#using (Html.BeginForm("pharmacyDetials", "Pharmacy"))
{
<h4>تفاصيل الصيدلية</h4>
<div id="dvPatientNotice" class="MainGridContainer pb-5">
#if (Model.dtItemsDetails != null)
{
<table dir="rtl" id="Paitents" class="MainGrid">
<thead>
<tr style="text-size-adjust:auto">
<th>
رقم الموظف
</th>
<th>
التاريخ
</th>
<th>
الوقت
</th>
<th>
المستفيدون
</th>
<th>
ملاحظات
</th>
<th>
الباركورد
</th>
<th>
أسم العينة
</th>
<th>
الكمية
</th>
<th>
السعر
</th>
</tr>
</thead>
<tbody>
#foreach (System.Data.DataRow row in Model.dtItemsDetails.Rows)
{
<tr style="width:100%">
<td>
#row["EMPLOYEE_NUMBER"]
</td>
<td>
#row["ENTRY_DATE"]
</td>
<td>
#row["ENTRY_TIME"]
</td>
<td>
#row["BENEFICIARIES"]
</td>
<td>
#row["NOTE"]
</td>
<td>
#row["ITEM_CODE"]
</td>
<td>
#row["ITEM_NAME"]
</td>
<td>
#row["QTY"]
</td>
<td>
#row["PRICE"]
</td>
</tr>
}
</tbody>
</table>
}
</div>
}
The controller as follows:
[HttpGet]
public ActionResult pharmacyDetials(Pharmacy model)
{
var masterID = Convert.ToInt32(Session["login"]);
if (masterID == 0)
{
return RedirectToAction("Login");
}
else
{
Models.Pharmacy objPharamcyMode = new Pharmacy();
IDECOServiceReference.IdecoAPIServiceClient idecoAPI = new IDECOServiceReference.IdecoAPIServiceClient();
DataTable dataTable = idecoAPI.GETPHARMACYEMPLOYEEMASTER("", 1);
model.dtItemsDetails = dataTable;
return PartialView("_PharmacyDetails", model);
}
}
And the Main view as follows:
#model IDECOHealthInsurance.Models.Pharmacy
#{
ViewBag.Title = "PharmacyApplication";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<table style="height:680px; width:1280px; border:hidden">
<tr>
<td>
<div id="pDetail">
#Html.Partial("_PharmacyDetails", Model)
</div>
</td>
<td>
#using (Ajax.BeginForm("PharmacyApplication", "Pharmacy", new AjaxOptions { HttpMethod = "Post", UpdateTargetId = "updatePnl", InsertionMode = System.Web.Mvc.Ajax.InsertionMode.Replace, LoadingElementId = "Loading", OnBegin = "" }))
{
<div class="form-horizontal">
<div class="form-group">
#Html.LabelFor(model => model.PHARMACY_NAME, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.DisplayFor(model => model.PHARMACY_NAME)
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.EMPLOYEE_NUMBER, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.EMPLOYEE_NUMBER, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.EMPLOYEE_NUMBER, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.ENTRY_DATE, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.DisplayFor(model => model.ENTRY_DATE, new { htmlAttributes = new { #class = "form-control", #Value = DateTime.Today.ToString("dd/MM/yyyy"), #readonly = "readonly" } })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.ENTRY_TIME, new { htmlAttributes = new { #class = "form-control", #Value = DateTime.Today.ToString("HH:mm:ss"), #readonly = "readonly" } })
<div class="col-md-10">
#Html.DisplayFor(model => model.ENTRY_TIME)
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.BENEFICIARIES, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
زوجة #Html.RadioButtonFor(m => m.BENEFICIARIES, 1)
أبن #Html.RadioButtonFor(m => m.BENEFICIARIES, 2)
أبنة #Html.RadioButtonFor(m => m.BENEFICIARIES, 3)
الموظف #Html.RadioButtonFor(m => m.BENEFICIARIES, 4)
#Html.ValidationMessageFor(model => model.BENEFICIARIES, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.Note, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
<textarea name="NOTE" id="comments" style="font-family:'Times New Roman';font-size:1.2em; width: 280px; height:auto" placeholder="أكتب ملاحظاتك هنا"></textarea>
#Html.ValidationMessageFor(model => model.Note, "", new { #class = "text-danger" })
</div>
</div>
<div id="showPnl">
<input class="btn btn-default" type="button" value="تفاصيل الصيدلية" onclick="#("window.location.href='" + #Url.Action("pharmacyDetials", "Pharmacy") + "'");" />
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" id="panel" value="أضافة" class="btn btn-default" />
</div>
<input class="btn btn-default" type="button" value="خروج" onclick="#("window.location.href='" + #Url.Action("LogOut", "Pharmacy") + "'");" />
</div>
</div>
}
</td>
</tr>
</table>
<div id="updatePnl">
#Html.Partial("_PartialPharmacyDetails", Model)
</div>
<br />
<br />
<br />
<div id="pnlItemsDetails">
#Html.Partial("_PartialItemsDetails", Model)
</div>
When I click on the pharmacy details (in Arabic) = "تفصيل الصيدلية" button it redirects me to another page which contains the desired table that I want to show in the main view. However, I don't want this to happen I want to show the table without clicking on the button. Could you explain why this problem happened?
The Result at the run time appears as follows:
Result of the application at run time

Answer 1

If you want to prevent your page from redirecting, you've to use an ajax request. Replace below line :
<input class="btn btn-default" type="button" value="تفاصيل الصيدلية" onclick="#("window.location.href='" + #Url.Action("pharmacyDetials", "Pharmacy") + "'");" />
with :
<input class="btn btn-default" type="button" value="تفاصيل الصيدلية" onclick="getPharmacyDetails();" />
and in your javascript section, add below code :
function getPharmacyDetails()
{
$.ajax({
url : '#Url.Content("~/Pharmacy/pharmacyDetials")',
type: "GET",
success: function (result) {
$("#pDetail").html(result);
}
});
}
Also, replace below HTML :
<div id="pDetail">
#Html.Partial("_PharmacyDetails", Model)
</div>
With :
<div id="pDetail"></div>
The above ajax request will execute the partial view and fill the pDetial div with the required result. Try it and Let me know if you've any query.