I have a problem when I try to render a partial view in may main view - asp.net-mvc

I have the following partial view:
#model IDECOHealthInsurance.Models.Pharmacy
#using (Ajax.BeginForm("pharmacyDetials", "Pharmacy", new AjaxOptions { HttpMethod = "Get", UpdateTargetId = "pDetail", InsertionMode = System.Web.Mvc.Ajax.InsertionMode.Replace, LoadingElementId = "Loading", OnBegin = "" }))
{
<h4>تفاصيل الصيدلية</h4>
<div id="pDetail" 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>
}
And the follwing controller:
[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 following main view:
#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">
<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 try to render _PharmacyDetails in my main view it won't return any records. What is the problem? and how I can fix it? Please provide me with an explanation of how this problem occurs. What did I do wrong?

Instead of using Partial method to render the partial view I used Action method:
<tr>
<td>
<div id="pDetail" style="background-color:aliceblue" method="Get">
#Html.Action("pharmacyDetials", Model)
</div>
</td>
<td>

Related

keep the checkbox checked browsing through the paging (Using PagedList asp.net mvc)

I have a list of orders in a gridview with customer html which has paging using PagedList asp.net mvc. I have a checkbox for each order in the list. When I use "Check all" to check all orders it should keep the checkbox checked when I go to page 2-3-4. But I lose the checked status when I move to next page. Can anyone help please?
JavaScript code :
$(document).ready(
function () {
$('#selectAll').click(
function () {
$('#TabOrdre td input:checkbox').prop('checked', $(this).is(':checked'));
if ($(this).is(':checked')) {
$('#TabOrdre td input:checkbox').each(function () {
if ($.inArray($(this).val(), list) === -1)
list.push($(this).val());
});
getAll = true;
}
else {
list = [];
getAll = false;
}
}
);
View code :
<section class="panel panel-default">
<header class="panel-heading m-b-none">Liste des ordres</header>
<div class="row wrapper">
<div class="col-md-12 space20">
<div class="doc-buttons">
<a class="btn btn-s-md btn-warning ajout-container"> <i class="fa fa-plus"></i> Ajouter un ordre </a>
</div>
</div>
</div>
<div class="table-responsive">
<table class="table table-striped b-t b-light">
<thead>
<tr>
<th width="20">
<input type="checkbox" id="selectAll" value="-1">
</th>
<th style="white-space:nowrap">
EDA
</th>
<th style="white-space:nowrap">
<span class="th-sort">
Immediat
</span>
</th>
<th style="white-space:nowrap">
JNA
</th>
<th style="white-space:nowrap">
Date
</th>
<th style="white-space:nowrap">
Heure début
</th>
<th style="white-space:nowrap">
Heure fin
</th>
<th style="white-space:nowrap">
Puissance
</th>
<th style="white-space:nowrap">
RP
</th>
<th style="white-space:nowrap">
RS
</th>
<th style="white-space:nowrap">
Caractérisation
</th>
<th style="white-space:nowrap">
Commentaire
</th>
<th style="white-space:nowrap">
Source
</th>
<th style="white-space:nowrap">
Date de création
</th>
<th style="white-space:nowrap">
Refus
</th>
<th style="white-space:nowrap" class="th-sortable" data-toggle="class">
</th>
</tr>
</thead>
<tbody>
#if (Model.Count > 0)
{
foreach (var item in Model)
{
#Html.HiddenFor(model => item.ORD_ID)
<tr>
<td>
<input type="checkbox" value="#item.ORD_ID" id="chk_#item.ORD_ID" />
</td>
<td>
#Html.DisplayFor(model => item.EDA_NOM)
</td>
<td>
#(Convert.ToBoolean(item.EDA_IMMEDIAT) ? "Oui" : "Non")
</td>
<td>
#(Convert.ToBoolean(item.EDA_JNA) ? "Oui" : "Non")
</td>
<td>
#if (item.EDA_ORDRE_DATE_DEBUT != null)
{#Html.DisplayFor(model => item.EDA_ORDRE_DATE_DEBUT, "ShortDateTime")}
</td>
<td style="white-space:nowrap">
#if (item.EDA_ORDRE_DATE_DEBUT != null)
{#Html.DisplayFor(model => item.EDA_ORDRE_DATE_DEBUT, "ShortTimeString")}
</td>
<td>
#if (item.EDA_ORDRE_DATE_FIN != null)
{ #Html.DisplayFor(model => item.EDA_ORDRE_DATE_FIN, "ShortTimeString")}
</td>
<td>
#Html.DisplayFor(model => item.EDA_PUISSANCE)
</td>
<td>
#Html.DisplayFor(model => item.EDA_PUISSANCE_RP)
</td>
<td>
#Html.DisplayFor(model => item.EDA_PUISSANCE_RS)
</td>
<td>
#Html.DisplayFor(model => item.Eda_Caracterisation)
</td>
<td>
#Html.DisplayFor(model => item.COMMENTAIRE)
</td>
<td>
#Html.DisplayFor(model => item.SOURCE_NOM)
</td>
<td>
#if (item.EDA_DATE_RECUPEREE != null)
{ #Html.DisplayFor(model => item.EDA_DATE_RECUPEREE, "ShortDateTime")}
</td>
<td>
#Html.DisplayFor(model => item.VAL_REFUS)
</td>
<td >
#if (item.MODIFIABLE == 0)
{
<a class="btn btn-warning editor-container" data-id="#item.ORD_ID" data-toggle="modal"
><i class="fa fa-edit"></i></a>
}
</td>
</tr>
}
}
else
{
<tr>
<td class="text-center " colspan="16">
#VideResult
</td>
</tr>
}
</tbody>
</table>
</div>
<footer class="panel-footer">
<div class="row">
<div class="col-sm-4 ">
<button type="submit" class="btn btn-s-md btn-warning" id="Accepter">Accepter</button>
<button class="btn btn-s-md btn-default" id="Refuser">Refuser</button>
</div>
<div class="col-sm-4 text-center">
</div>
<div class="col-sm-4 text-right text-center-xs">
#Html.PagedListPager(Model, Page_No => Url.Action("Liste",
new
{
eda = ViewBag.eda,
Source = ViewBag.Source
,
datedeb = ViewBag.datedeb
,
datefin = ViewBag.datefin
,
refus = ViewBag.refus
,
page = Page_No
}),
PagedListRenderOptions.EnableUnobtrusiveAjaxReplacing(PagedListRenderOptions.ClassicPlusFirstAndLast
, new AjaxOptions()
{
HttpMethod = "GET",
UpdateTargetId = "TabOrdre",
LoadingElementId = "loader"
}))
</div>
</div>
</footer>
</section>

Not showing partial view result inside table body in asp.net MVC

I have written code to implement search using ajax in asp.net MVC. I have written an action inside my controller (Admincontroller) using partial view which is supposed to fetch data. I want to display the partial view result inside table body in my Index page.
The search function is working fine, but it is not displaying the result inside table body with id "searchresult" (Inside Index page). instead of that it is giving result. I wanted the result from search in table format. now result is displayed like below in http://localhost:1274/Admin/Search.
2786 Mens L/S 4000
here is my Index.cshtml
#model IEnumerable<TestEntityFramework.Models.trProducts>
#{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_AdminLayout.cshtml";
AjaxOptions ajax = new AjaxOptions
{
UpdateTargetId = "searchresult",
Confirm = "Are you sure to start search?",
InsertionMode = InsertionMode.Replace,
LoadingElementId="Loadhere"
};
}
<h2>Index</h2>
<script src="~/scripts/jquery.unobtrusive-ajax.js"></script>
<script src="~/scripts/jquery.unobtrusive-ajax.min.js"></script>
<div class="panel-heading">
<div>
#Html.ActionLink("Create New", "Create",null, new{ #class="btn btn- primary" })
</div>
</div>
<div class="panel-body">
<table class="table table-striped table-bordered table-condensed table- hover table-responsive">
<tr>
<th>
#Html.DisplayNameFor(model => model.prod_type)
</th>
<th>
#Html.DisplayNameFor(model => model.prod_name)
</th>
<th>
#Html.DisplayNameFor(model => model.prod_desc)
</th>
<th>
#Html.DisplayNameFor(model => model.prod_price)
</th>
<th>
#Html.DisplayNameFor(model => model.prod_qty)
</th>
<th>
#Html.DisplayNameFor(model => model.prod_category)
</th>
<th></th>
</tr>
#foreach (var item in Model) {
<tr>
<td>
#Html.DisplayFor(modelItem => item.prod_type)
</td>
<td>
#Html.DisplayFor(modelItem => item.prod_name)
</td>
<td>
#Html.DisplayFor(modelItem => item.prod_desc)
</td>
<td>
#Html.DisplayFor(modelItem => item.prod_price)
</td>
<td>
#Html.DisplayFor(modelItem => item.prod_qty)
</td>
<td>
#Html.DisplayFor(modelItem => item.prod_category)
</td>
<td>
#Html.ActionLink("Edit", "Edit", new {id=item.product_id}) |
#Html.ActionLink("Details", "Details", new { id=item.product_id }) |
#Html.ActionLink("Delete", "Delete", new { id=item.product_id })
</td>
</tr>
}
</table>
</div>
<div class="col-lg-8">
<table class="table table-bordered table-striped table-hover">
<thead>
<tr>
<th>
Product Id
</th>
<th>
Product Name
</th>
<th>
Price
</th>
<th>
</th>
</tr>
</thead>
<tbody id="searchresult">
#Html.Action("Search", new { pr_name = "" })
</tbody>
</table>
#using (Ajax.BeginForm("Search", ajax))
{
<div id="Loadhere">
#Html.TextBox("pr_name")
<button class="btn btn-primary">Search</button>
</div>
}
</div>
and my partialview Search.cshtml looks as below
#model IEnumerable<TestEntityFramework.Models.trProducts>
#foreach(var m in Model)
{
<tr>
<td>
#m.product_id
</td>
<td>
#m.prod_name
</td>
<td>
#m.prod_price
</td>
</tr>
}

how to center align contents of panel

I would like to centrally place the contents(dom elements) i.e label and dropdown inside the panel. Please kindly help me. Here is my code in cshtml.
I wanted to center align both the label for Region dropdown and the Region dropdown in same line.
#model IEnumerable<HuRIS.Models.Zone>
#{
ViewBag.Title = "Index";
}
<h2>Index</h2>
<p>
#Html.ActionLink("Create New", "Create")
</p>
<div class="panel panel-info">
<div class="panel-body">
<div class="form-group">
<div class="col-md-2"></div>
<label for="RegionID" class="col-md-1">Region:</label>
#Html.DropDownList("RegionID", null, htmlAttributes: new { #class = "form-control col-md-7" })
<div class="col-md-2"></div>
</div>
</div>
</div>
<table class="table">
<tr>
<th>
#Html.DisplayNameFor(model => model.devregion.RegionName)
</th>
<th>
#Html.DisplayNameFor(model => model.ZoneCode)
</th>
<th>
#Html.DisplayNameFor(model => model.ZoneName)
</th>
<th>
#Html.DisplayNameFor(model => model.isActive)
</th>
<th></th>
</tr>
#foreach (var item in Model)
{
<tr>
<td>
#Html.DisplayFor(modelItem => item.devregion.RegionName)
</td>
<td>
#Html.DisplayFor(modelItem => item.ZoneCode)
</td>
<td>
#Html.DisplayFor(modelItem => item.ZoneName)
</td>
<td>
#Html.DisplayFor(modelItem => item.isActive)
</td>
<td>
#Html.ActionLink("Edit", "Edit", new { id = item.ZoneID }) |
#Html.ActionLink("Details", "Details", new { id = item.ZoneID }) |
#Html.ActionLink("Delete", "Delete", new { id = item.ZoneID })
</td>
</tr>
}
</table>
Try this (assuming Bootstrap 3):
<div class="form-group center-block">
<label for="RegionID" class="control-label">Region:</label>
#Html.DropDownList("RegionID", null, htmlAttributes: new { #class = "form-control" })
</div>
Similar fiddle http://jsfiddle.net/tzhben/bpqmx8vd/

How to Delete Multiple Record using Checkbox?

I'm creating a project for my institute. Using Asp.net MVC, I need multiple delete option with selected checkbox.
I have added a check in my view, but not delete multiple Raw. I don't want to use third party plugin. Please help me.
<table class="table table-striped table-condensed table-bordered">
<tr>
<th>
Select
</th>
<th>
#Html.ActionLink("Book Id", "Index", new { sortOrder = ViewBag.IdSortParm, currentFilter = ViewBag.CurrentFilter })
</th>
<th>
#Html.ActionLink("Title", "Index", new { sortOrder = ViewBag.NameSortParm, currentFilter = ViewBag.CurrentFilter })
</th>
<th>
#Html.ActionLink("Date", "Index", new { sortOrder = ViewBag.DateSortParm, currentFilter = ViewBag.CurrentFilter })
</th>
<th>
Price
</th>
<th>
Category
</th>
<th class="text-center">
Photo
</th>
<th>
User
</th>
<th>Edit</th>
<th>Delete</th>
</tr>
#foreach (var item in Model)
{
<tr>
<td>
<input type="checkbox" name="deleteInputs" value="#item.BookId" />
</td>
<td>
#Html.DisplayFor(modelItem => item.BookId)
</td>
<td>
#Html.ActionLink(item.BookTitle, "Details", new
{
id = item.BookId
})
</td>
<td>
#Html.DisplayFor(modelItem => item.PublishDate)
</td>
<td>
#Html.DisplayFor(modelItem => item.Price)
</td>
<td>
#Html.DisplayFor(modelItem => item.Category)
</td>
<td class="text-center">
<img class="img-thumbnail" width="50" height="50" src="~/ContentImages/Full/#item.Photo" />
</td>
<td>
#Html.DisplayFor(modelItem => item.UserName)
</td>
<td>
#Html.ActionLink("Edit", "Edit", new { id = item.BookId })
</td>
<td>
#Html.ActionLink("Delete", "Delete", new { id = item.BookId })
</td>
</tr>
}
</table>
This could be a way to achieve it:
First embed the table within a named form, that executes the batch delete action, like so:
#{ Html.BeginForm("BatchDelete", "Book", FormMethod.Post, new { name = "tableForm" }); }
<table class="table table-striped table-condensed table-bordered">
<tr>
<th>
Select
</th>
<th>
#Html.ActionLink("Book Id", "Index", new { sortOrder = ViewBag.IdSortParm, currentFilter = ViewBag.CurrentFilter })
</th>
<th>
#Html.ActionLink("Title", "Index", new { sortOrder = ViewBag.NameSortParm, currentFilter = ViewBag.CurrentFilter })
</th>
<th>
#Html.ActionLink("Date", "Index", new { sortOrder = ViewBag.DateSortParm, currentFilter = ViewBag.CurrentFilter })
</th>
<th>
Price
</th>
<th>
Category
</th>
<th class="text-center">
Photo
</th>
<th>
User
</th>
<th>Edit</th>
<th>Delete</th>
</tr>
#foreach (var item in Model)
{
<tr>
<td>
<input type="checkbox" name="deleteInputs" value="#item.BookId" />
</td>
<td>
#Html.DisplayFor(modelItem => item.BookId)
</td>
<td>
#Html.ActionLink(item.BookTitle, "Details", new
{
id = item.BookId
})
</td>
<td>
#Html.DisplayFor(modelItem => item.PublishDate)
</td>
<td>
#Html.DisplayFor(modelItem => item.Price)
</td>
<td>
#Html.DisplayFor(modelItem => item.Category)
</td>
<td class="text-center">
<img class="img-thumbnail" width="50" height="50" src="~/ContentImages/Full/#item.Photo" />
</td>
<td>
#Html.DisplayFor(modelItem => item.UserName)
</td>
<td>
#Html.ActionLink("Edit", "Edit", new { id = item.BookId })
</td>
<td>
#Html.ActionLink("Delete", "Delete", new { id = item.BookId })
</td>
</tr>
}
</table>
<!-- Section for buttons -->
<div class="actions">
<a href="javascript:(function(){document.tableForm.submit();return void(0);})()">
Delete selected books
</a>
</div>
#{ Html.EndForm(); }
Note that after the table, before ending the form, I added a link that executes the submit of the form.
Now, on the controller side, asumming its name is "BookController":
public class BookController : Controller
{
// ...
[HttpPost]
public ActionResult BatchDelete(int[] deleteInputs)
{
// You have your books IDs on the deleteInputs array
if (deleteInputs != null && deleteInputs.Length > 0)
{
// If there is any book to delete
// Perform your delete in the database or datasource HERE
}
// And finally, redirect to the action that lists the books
// (let's assume it's Index)
return RedirectToAction("Index");
}
// ...
}
Notice that:
The first two parameter of the Html.BeginForm method, are the action name and controller name (without the "Controller" suffix).
The last parameter of the same method include the name of the form. The name is used in the javascript of the link, in order to indicate which form are you going to submit.
First, you need a different Id for each checkbox so you know which record is to be deleted. Second, if you implement "delete" as a link then the browser will perform a GET action instead of a POST. Assuming you are not using AJAX then you will need a form so you can POST to the controller action which handles the delete.

MVC multiple forms on single view not working

I have 2 forms on a single razor view that open in seperate dialog boxes. The forms are submitted using jquery post..
First form works perfectly but the second form isnt recognised at all and when I try to serializr the data it returns an empty string.
Code below:
#using (Html.BeginForm("SaveElectricReading", "Store", FormMethod.Post, new { id = "frmSaveElectricReading" }))
{
<div id="electricDialog" style="display: none;" title="Electric Readings">
<p>
Please ensure the electric readings have been entered!
</p>
<table width="100%">
<tr>
<th>
Serial:
</th>
</tr>
<tr>
<td>
<input type="text" name="Serial" />
</td>
</tr>
<tr>
<th>
Reading:
</th>
</tr>
<tr>
<td>
<input type="text" name="Reading" />
</td>
</tr>
<tr>
<th>
Comment:
</th>
</tr>
<tr>
<td>
<div class="textwrapper">
<textarea rows="5" cols="10" name="Comment"></textarea>
</div>
</td>
</tr>
</table>
</div>
}
#using (Html.BeginForm("SaveWaterReading", "Store", FormMethod.Post, new { id = "myform" }))
{
<div id="waterDialog" style="display: none;" title="Water Readings">
<p>
Please ensure the water readings have been entered!
</p>
<table width="100%">
<tr>
<th>
Serial:
</th>
</tr>
<tr>
<td>
<input type="text" name="WaterSerial" />
</td>
</tr>
<tr>
<th>
Reading:
</th>
</tr>
<tr>
<td>
<input type="text" name="WaterReadingsdfsdf" />
</td>
</tr>
<tr>
<th>
Comment:
</th>
</tr>
<tr>
<td>
<div class="textwrapper">
<textarea rows="5" cols="10" name="WaterComment"></textarea>
</div>
</td>
</tr>
</table>
</div>
}
function showWaterDialog() {
var $dialog = $('#waterDialog').dialog({
autoOpen: false,
modal: true,
width: 400,
height: 400,
buttons: {
Submit: function () {
// $('#frmCreateStore').submit();
var data = $('#frmSaveWaterReading');
$.post("/Store/SaveWaterReading",
$("#frmSaveWaterReading").serialize(),
function () {
$("#waterDialog").dialog("close");
});
//$(this).dialog("close");
},
Cancel: function () {
$(this).dialog("close");
}
}
});
$dialog.dialog('open');
}
In the jquery function for showing the dialog with the form in it, I needed to add that dialog content to the second form on the page as follows:
$("#waterDialog").parent().appendTo($("form").eq(1)[0]);

Resources