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/
Related
I am trying to add a checkbox so I can selects a row from my list and from there use that row to generate a letter.
I was wondering how I would be able to add a checkbox and bind it to the data I have tried a few ways using something similar to:
checkbox(m => m[i].Lesson)
However it would never accept the i in brackets and come up with an error. below is the layout of my index for the lessons model currently.
Here is the Lessons Index:
#model IEnumerable<FinalMusicApp.Models.Lesson>
#{
ViewBag.Title = "Index";
}
<h2>Lessons</h2>
<p>
#Html.ActionLink("Create New", "Create")
</p>
#using (Html.BeginForm("Index", "Students", FormMethod.Get))
{
//Search options
<b>Search Options: </b> #Html.RadioButton("Option", "Instrument")<text>Instrument</text>#Html.RadioButton("Option", "Tutor")<text>Tutor</text>#Html.RadioButton("Option", "Term")<text>Term</text>#Html.TextBox("Search")
<input type="submit" name="submit" value="Search" />
}
<form method="post">
<table class="table">
<tr>
<th>
#Html.DisplayNameFor(model => model.IsChecked)
</th>
<th>
#Html.DisplayNameFor(model => model.LessonDate)
</th>
<th>
#Html.DisplayNameFor(model => model.LessonTime)
</th>
<th>
#Html.DisplayNameFor(model => model.Duration.TimeTaken)
</th>
<th>
#Html.DisplayNameFor(model => model.Instrument.InstrumentName)
</th>
<th>
#Html.DisplayNameFor(model => model.Letter.Paid)
</th>
<th>
#Html.DisplayNameFor(model => model.Student.FullName)
</th>
<th>
#Html.DisplayNameFor(model => model.Tutor.TutorName)
</th>
<th>
CRUD
</th>
<th>
Make a letter
</th>
</tr>
#foreach (var item in Model)
{
<tr>
<td>
#Html.CheckBoxFor(modelItem => item.IsChecked)
</td>
<td>
#Html.DisplayFor(modelItem => item.LessonDate)
</td>
<td>
#Html.DisplayFor(modelItem => item.LessonTime)
</td>
<td>
#Html.DisplayFor(modelItem => item.Duration.TimeTaken)
</td>
<td>
#Html.DisplayFor(modelItem => item.Instrument.InstrumentName)
</td>
<td>
#Html.DisplayFor(modelItem => item.Letter.Paid)
</td>
<td>
#Html.DisplayFor(modelItem => item.Student.FullName)
</td>
<td>
#Html.DisplayFor(modelItem => item.Tutor.TutorName)
</td>
<td>
#Html.ActionLink("Edit", "Edit", new { id = item.LessonId }) |
#Html.ActionLink("Details", "Details", new { id = item.LessonId }) |
#Html.ActionLink("Delete", "Delete", new { id = item.LessonId })
</td>
<td>
#Html.ActionLink("Generate Letter", "Create", "Letters")
</td>
</tr>
}
</table>
</form>
I am trying to add a checkbox so I can selects a row from my list
Do you want something like below?
In the view add a checkbox, for example I use the property CourseName in my model instead, you can use your property:
#Html.CheckBox("CourseName", new { value = item.CourseName })
#Html.DisplayFor(modelItem => item.CourseName)
Then in the controller, we can get CourseName value, and get other property value accord to the CourseName, but we need load the list again, we cannot send the full list from view to controller :
var courserow = model.FirstOrDefault(m => m.CourseName == CourseName);
result:
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>
This is a demo of CRUD(Create,Update,Delete) MVC 5 app + Entity Framework + Reactjs
I'm trying to convert the tags below into reactjs components and render whole page but the problem is the razor lines. When rendering it just shows the text.
What should I do?
Customer View Index:
<h2>Index</h2>
<div id="root">
</div>
<p>
#Html.ActionLink("Add New Customer", "Create")
</p>
<table class="table">
<tr>
<th>
#Html.DisplayNameFor(model => model.Name)
</th>
<th>
#Html.DisplayNameFor(model => model.Address)
</th>
<th></th>
</tr>
#foreach (var item in Model)
{
<tr>
<td>
#Html.DisplayFor(modelItem => item.Name)
</td>
<td>
#Html.DisplayFor(modelItem => item.Address)
</td>
<td>
#Html.ActionLink("Edit", "Edit", new { id = item.Id }) |
#Html.ActionLink("Details", "Details", new { id = item.Id }) |
#Html.ActionLink("Delete", "Delete", new { id = item.Id })
</td>
</tr>
}
Reacjs.jsx
class Table extends React.Component {
render() {
return (
<div className="Table">
#Html.ActionLink("Add New Customer", "Create")
</div>
);
}
}
ReactDOM.render(
<Table />, document.getElementById('root')
);
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>
}
This question already has answers here:
The model item passed into the dictionary is of type .. but this dictionary requires a model item of type
(7 answers)
Closed 5 years ago.
This is my ActionResult
public ActionResult mytry()
{
Empoyee ee = new Empoyee();
ee.Address = "address1";
ee.Email = "email1";
ee.FirstName = "fname";
ee.Id = 23;
ee.LastName = "lname1";
ee.MiddleName = "";
ee.Salary = 20000;
db.Empoyees.Add(ee);
db.SaveChanges();
return View(ee);
}
View is
#model IEnumerable<trydbconnectMvc.Models.Empoyee>
#{
ViewBag.Title = "mytry";
}
<h2>mytry</h2>
<p>
#Html.ActionLink("Create New", "Create")
</p>
<table class="table">
<tr>
<th>
#Html.DisplayNameFor(model => model.FirstName)
</th>
<th>
#Html.DisplayNameFor(model => model.LastName)
</th>
<th>
#Html.DisplayNameFor(model => model.MiddleName)
</th>
<th>
#Html.DisplayNameFor(model => model.Address)
</th>
<th>
#Html.DisplayNameFor(model => model.Salary)
</th>
<th>
#Html.DisplayNameFor(model => model.Email)
</th>
<th></th>
</tr>
#foreach (var item in Model) {
<tr>
<td>
#Html.DisplayFor(modelItem => item.FirstName)
</td>
<td>
#Html.DisplayFor(modelItem => item.LastName)
</td>
<td>
#Html.DisplayFor(modelItem => item.MiddleName)
</td>
<td>
#Html.DisplayFor(modelItem => item.Address)
</td>
<td>
#Html.DisplayFor(modelItem => item.Salary)
</td>
<td>
#Html.DisplayFor(modelItem => item.Email)
</td>
<td>
#Html.ActionLink("Edit", "Edit", new { id=item.Id }) |
#Html.ActionLink("Details", "Details", new { id=item.Id }) |
#Html.ActionLink("Delete", "Delete", new { id=item.Id })
</td>
</tr>
}
</table>
I am getting error
" The model item passed into the dictionary is of type 'trydbconnectMvc.Models.Empoyee', but this dictionary requires a model item of type 'System.Collections.Generic.IEnumerable`1[trydbconnectMvc.Models.Empoyee]'."
I am new to mvc. How to solve this?
It seems you're returning only one entity, not a IEnumerable. Just change it in your view:
#model trydbconnectMvc.Models.Empoyee
#{
ViewBag.Title = "mytry";
}
<h2>mytry</h2>
<p>
#Html.ActionLink("Create New", "Create")
</p>
<table class="table">
<tr>
<th>
#Html.DisplayNameFor(model => model.FirstName)
</th>
<th>
#Html.DisplayNameFor(model => model.LastName)
</th>
<th>
#Html.DisplayNameFor(model => model.MiddleName)
</th>
<th>
#Html.DisplayNameFor(model => model.Address)
</th>
<th>
#Html.DisplayNameFor(model => model.Salary)
</th>
<th>
#Html.DisplayNameFor(model => model.Email)
</th>
<th></th>
</tr>
<tr>
<td>
#Html.DisplayFor(modelItem => #Model.FirstName)
</td>
<td>
#Html.DisplayFor(modelItem => #Model.LastName)
</td>
<td>
#Html.DisplayFor(modelItem => #Model.MiddleName)
</td>
<td>
#Html.DisplayFor(modelItem => #Model.Address)
</td>
<td>
#Html.DisplayFor(modelItem => #Model.Salary)
</td>
<td>
#Html.DisplayFor(modelItem => #Model.Email)
</td>
<td>
#Html.ActionLink("Edit", "Edit", new { id=#Model.Id }) |
#Html.ActionLink("Details", "Details", new { id=#Model.Id }) |
#Html.ActionLink("Delete", "Delete", new { id=#Model.Id })
</td>
</tr>
}
</table>
or if you want, just change in your Controller:
public ActionResult mytry()
{
Empoyee ee = new Empoyee();
ee.Address = "address1";
ee.Email = "email1";
ee.FirstName = "fname";
ee.Id = 23;
ee.LastName = "lname1";
ee.MiddleName = "";
ee.Salary = 20000;
db.Empoyees.Add(ee);
db.SaveChanges();
var list = new List<Empoyee>(){ ee };
return View(list );
}
and keep your current view.
If you must use an IEnumerable, you can make a List<> and pass it in
public ActionResult mytry()
{
Empoyee ee = new Empoyee();
ee.Address = "address1";
ee.Email = "email1";
ee.FirstName = "fname";
ee.Id = 23;
ee.LastName = "lname1";
ee.MiddleName = "";
ee.Salary = 20000;
db.Empoyees.Add(ee);
db.SaveChanges();
List<Employee> employees = new List<Employee>();
employees.add(ee);
return View(employees);
}