#model IEnumerable<WIMMPortalServer.BAL.DTO.GlobalCodeDTO>
#foreach (var item in Model)
{
if (#item.GlobalCodeCategoryValue == "115")
{
<div class="form-group">
#*<h6 >PICTURE FORMAT:</h6>*#
<h6>#item.GlobalCodeCategoryName</h6>
<div class="checkboxs round">
<div class="element">
<label id="lblcolor">
#*COLOR*#
#item.GlobalCodeName
<input type="checkbox" name="closed" value="closed">
<span class="checkmark"></span>
</label>
</div>
#*<div class="element dark">
<label id="lblbw">
COLOR + B/W
<input type="checkbox" name="closed" value="closed">
<span class="checkmark"></span>
</label>
</div>*#
#*<div class="element">
<label id="lblwhite">
BLACK & WHITE
<input type="checkbox" name="closed" value="closed">
<span class="checkmark"></span>
</label>
</div>*#
</div>
</div>
}
}
I want to use where condition with foreach loop instead of if condition but unable to do that. Kindly help me with the solution as I am stuck at this point.
You can use where in Model as
#foreach (var item in Model.Where(c=>c.GlobalCodeCategoryValue == "115"))
{
<div class="form-group">
#*<h6 >PICTURE FORMAT:</h6>*#
<h6>#item.GlobalCodeCategoryName</h6>
<div class="checkboxs round">
<div class="element">
<label id="lblcolor">
#*COLOR*#
#item.GlobalCodeName
<input type="checkbox" name="closed" value="closed">
<span class="checkmark"></span>
</label>
</div>
#*<div class="element dark">
<label id="lblbw">
COLOR + B/W
<input type="checkbox" name="closed" value="closed">
<span class="checkmark"></span>
</label>
</div>*#
#*<div class="element">
<label id="lblwhite">
BLACK & WHITE
<input type="checkbox" name="closed" value="closed">
<span class="checkmark"></span>
</label>
</div>*#
</div>
</div>
}
Related
I am trying out Bootstrap 5 and am having difficulty lining up my checkboxes and their labels. The code is:
<div class="row col-lg-3 col-md-2 col-sm-2 col-xs-6">
<label class="col-lg-12 col-md-12 col-sm-12 col-xs-12" for="state"><b>Branch</b></label>
<div class="form-check">
<div class="checkbox">
<label>ACT</label>
<input type="checkbox" value="" id="act" name="state[]">
</div>
<div class="checkbox">
<label><input type="checkbox" value="" id="nsw" name="state[]">NSW</label>
</div>
<div class="checkbox">
<input type="checkbox" value="" id="nt" name="state[]">
<label>NT</label>
</div>
<div class="checkbox">
<label class="pull-right"><input type="checkbox" value="" id="qld" name="state[]">QLD</label>
</div>
<div class="checkbox">
<label class="pull-left"><input type="checkbox" value="" id="sa" name="state[]">SA</label>
</div>
<div class="checkbox">
<label><input type="checkbox" value="" id="tas" name="state[]">TAS</label>
</div>
<div class="checkbox">
<label><input type="checkbox" value="" id="vic" name="state[]">VIC</label>
</div>
<div class="checkbox">
<label><input type="checkbox" value="" id="wa" name="state[]">WA</label>
</div>
</div>
</div>
And the result is:
As you can see I have tried three variations.
From the edited first answer - this results:
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
<label class="col-lg-12 col-md-12 col-sm-12 col-xs-12" for="state"><b>Branch</b></label>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="act" name="state[]">
<label class="form-check-label">ACT</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="nsw" name="state[]">
<label class="form-check-label">NSW</label>
</div>
</div>
</div>
</div>
Gives:
I have tried adding:
.big-checkbox {
width: 30px;
height: 30px;
}
This just increases the height of the check (it is still long).
The "custom check" html composition is changed in Bootstrap 5. Now each checkbox should look the follows (along with parent containers):
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-2 col-sm-2 col-xs-6">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="act" name="state[]" />
<label class="form-check-label" for="act">ACT</label>
</div>
</div>
</div>
</div>
Bootstrap 5 Check CodePen
i want to pass All Input values of View to My Partial View(Passing User Order to Show Order Summary) but all values got null in partial View Below is My Code.
Submit
<div id="myModal_#Model.CustRef" class="modal fade" role="dialog">
<div class="modal-dialog" style="position:absolute; left:10%;">
<!-- Modal content-->
<div class="modal-content" style="width:80vw;">
<div class="modal-header ">
<h4 class="modal-title"><i class="fas fa-shopping-cart"></i> Order Summary</h4>
<button type="button" class="close" data-dismiss="modal">Back</button>
</div>
<div class="modal-body">
...Disabled Inputs...
</div>
</div>
</div>
</div>
My Create Order View
<form asp-action="Create">
....
#*<partial name="~/Views/Order/OrderSummary.cshtml" model="Model" />*#
#await Html.PartialAsync("~/Views/Order/OrderSummary.cshtml", new OrderViewModel() { cus_name = Model.cus_name, cus_phone = Model.cus_phone, CustRef = Model.CustRef, Phoneid = Model.Phoneid, modelId = Model.modelId, Quantity = Model.Quantity, Address = Model.Address, CityId = Model.CityId, Date = Model.Date, store_id = Model.store_id })
</form>
Second Question
My Second Question is i have large data to pass to View(Admin Dashboard) to Complete Statistics but its taking too much time. Please tell me any other Efficient way to increase performance.
You need to pass the current input model to the controller through ajax and return
to render the new partial view.
Please refer to the following code:
Controller:
public class OrderController : Controller
{
public IActionResult Index()
{
OrderViewModel orderView = new OrderViewModel();
return View(orderView);
}
public PartialViewResult ShowParitalView(OrderViewModel orderView)
{
return PartialView("OrderSummary", orderView);
}
}
Index view:
#using WebApplication_core_mvc.Models;
#model OrderViewModel
#{
ViewData["Title"] = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}
#section Scripts{
<script>
$(function () {
$("a").click(function () {
event.preventDefault();
$("div .modal").attr("id", "myModal_" + $("#cus_name").val());
$("a").attr("data-target", "#myModal_" + $("#cus_name").val());
$.ajax({
type: "POST",
url: "/Order/ShowParitalView",
data: $("form").serialize(),
success: function (data) {
$('#partial').html(data);
$("#myModal_" + $("#cus_name").val()).modal('show');
}
})
})
});
</script>
}
<form asp-action="Create">
<div class="form-group">
<label asp-for="cus_name" class="control-label"></label>
<input asp-for="cus_name" class="form-control" />
<span asp-validation-for="cus_name" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="cus_phone" class="control-label"></label>
<input asp-for="cus_phone" class="form-control" />
<span asp-validation-for="cus_phone" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="CustRef" class="control-label"></label>
<input asp-for="CustRef" class="form-control" />
<span asp-validation-for="CustRef" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Phoneid" class="control-label"></label>
<input asp-for="Phoneid" class="form-control" />
<span asp-validation-for="Phoneid" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="modelId" class="control-label"></label>
<input asp-for="modelId" class="form-control" />
<span asp-validation-for="modelId" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Quantity" class="control-label"></label>
<input asp-for="Quantity" class="form-control" />
<span asp-validation-for="Quantity" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Address" class="control-label"></label>
<input asp-for="Address" class="form-control" />
<span asp-validation-for="Address" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="CityId" class="control-label"></label>
<input asp-for="CityId" class="form-control" />
<span asp-validation-for="CityId" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Date" class="control-label"></label>
<input asp-for="Date" class="form-control" />
<span asp-validation-for="Date" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="store_id" class="control-label"></label>
<input asp-for="store_id" class="form-control" />
<span asp-validation-for="store_id" class="text-danger"></span>
</div>
<a href="#" data-toggle="modal" data-target="#myModal_#Model.CustRef"
style="border-radius: 1.5rem; margin-right:8%; margin-top: 1%; border: none;
padding:10px 2%; background: #0062cc; color: #fff; font-weight: 600; width:20%;
cursor: pointer; text-align:center; font-weight:bolder;">
Submit
</a>
<div id="myModal_#Model.CustRef" class="modal" role="dialog">
<div class="modal-dialog" style="position:absolute; left:10%;">
<!-- Modal content-->
<div class="modal-content" style="width:80vw;">
<div class="modal-header ">
<h4 class="modal-title"><i class="fas fa-shopping-cart"></i> Order Summary</h4>
<button type="button" class="close" data-dismiss="modal">Back</button>
</div>
<div class="modal-body">
<div id="partial">
</div>
</div>
</div>
</div>
</div>
</form>
OrderSummary Partial View:
#using WebApplication_core_mvc.Models;
#model OrderViewModel
<div class="form-group">
<label asp-for="cus_name" class="control-label"></label>
<input asp-for="cus_name" class="form-control" disabled/>
</div>
<div class="form-group">
<label asp-for="cus_phone" class="control-label"></label>
<input asp-for="cus_phone" class="form-control" disabled/>
</div>
<div class="form-group">
<label asp-for="CustRef" class="control-label"></label>
<input asp-for="CustRef" class="form-control" disabled/>
</div>
<div class="form-group">
<label asp-for="Phoneid" class="control-label"></label>
<input asp-for="Phoneid" class="form-control" disabled/>
</div>
<div class="form-group">
<label asp-for="modelId" class="control-label"></label>
<input asp-for="modelId" class="form-control" disabled/>
</div>
<div class="form-group">
<label asp-for="Quantity" class="control-label"></label>
<input asp-for="Quantity" class="form-control" disabled/>
</div>
<div class="form-group">
<label asp-for="Address" class="control-label"></label>
<input asp-for="Address" class="form-control" disabled/>
</div>
<div class="form-group">
<label asp-for="CityId" class="control-label"></label>
<input asp-for="CityId" class="form-control" disabled/>
</div>
<div class="form-group">
<label asp-for="Date" class="control-label"></label>
<input asp-for="Date" class="form-control" disabled/>
</div>
<div class="form-group">
<label asp-for="store_id" class="control-label"></label>
<input asp-for="store_id" class="form-control" disabled/>
</div>
Here is the result:
For the second question, there are too many SQL query statements in your code, you can try to improve performance by referring to this.
I am just trying to have a horizontal form with labels on top. keep in mind I am going to add validation so grouping is important
I am looking for something like this
Name email ID
Mike Mike#hotmail.com something
code
<div class="col-lg-12">
<div class="row">
<div class="page-content">
<div class="panel panel-primary">
<form name="searchform" role="form" >
<fieldset>
<legend></legend>
<div class="form-horizontal">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
</div>
<div class="form-horizontal">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-horizontal">
<label for="exampleInputPassword1">Employee ID</label>
<input type="text" class="form-control" id="exampl">
</div>
</fieldset>
</form>
</div>
</div>
</div>
</div>
this worked for me...let me know if there is a better solution
<form name="searchform" role="form" novalidate>
<fieldset>
<legend></legend>
<div class="col-lg-12">
<div class="row">
<div class="form-group col-xs-3 col-md-3">
<label for="Name" class="control-label"> Name</label>
<input type="text" value='' class="form-control" id="Name" placeholder="Name">
</div>
<div class="form-group col-xs-3 col-md-3">
<label for="associateID" class="control-label">Associate ID</label>
<input type="text" value='' class="form-control" id="associateID" placeholder="Associate ID">
</div>
<div class="form-group col-xs-3 col-md-3">
<label for="ID" class="control-label">ID</label>
<input type="text" value='' class="form-control" id="ID" placeholder="Racf ID">
</div>
<div class="form-group col-xs-3 col-md-3">
<label for="Role" class="control-label">Gateway Role</label>
<p-autoComplete [(ngModel)]="RoleVal" [suggestions]="iRole" name="gatewayRole" placeholder="Gateway Role" (completeMethod)="searchRole($event)" [style]="{'width':'85%'}" [inputStyle]="{'width':'85%'}" field="name" dataKey="id" [dropdown]="true"></p-autoComplete>
</div>
</div>
<div class="row">
<div class="form-group col-xs-3 col-md-3">
<label for="Name" class="control-label">Location</label>
<input type="text" value='' class="form-control" id="Name" placeholder=" Name">
</div>
<div class="form-group col-xs-3 col-md-3">
<label for="associateID" class="control-label">Associate ID</label>
<input type="text" value='' class="form-control" id="associateID" placeholder="Associate ID">
</div>
<div class="form-group col-xs-3 col-md-3">
<label for="racfID" class="control-label">ID</label>
<input type="text" value='' class="form-control" id="ID" placeholder="ID">
</div>
<div class="form-group col-xs-3 col-md-3">
<label for="gatewayRole" class="control-label">Role</label>
<p-autoComplete [(ngModel)]="RoleVal" [suggestions]="iRole" name="Role" placeholder="Role" (completeMethod)="searchyRole($event)" [style]="{'width':'85%'}" [inputStyle]="{'width':'85%'}" field="name" dataKey="id" [dropdown]="true"></p-autoComplete>
</div>
</div>
</div>
</fieldset>
</form>
I am working in .NET, VB Razor MVC4 with JQueryMobile.
My issue is in trying to get the #Html.RadioButtonFor to generate properly formatted HTML to get picked up by the JQuery Mobile.
This code:
#For Each fqi In Model.Options
#<label for="#fqi.Id">#fqi.Text</label>
#<input type="radio" name="#fqi.Name" id="#fqi.Id" value="#fqi.Value" checked="#fqi.Checked"/>
Next
Generates:
<div class="ui-radio">
<label class="ui-btn ui-radio-off ui-corner-left ui-btn-up-d" for="rb-yes_8e3b50fa-5d47-4d42-8c0c-dba8f840fedb" data-theme="d">
<span class="ui-btn-inner ui-corner-left">
<span class="ui-btn-text">Yes</span>
</span>
</label>
<input id="rb-yes_8e3b50fa-5d47-4d42-8c0c-dba8f840fedb" type="radio" checked="False" value="Yes" name="8e3b50fa-5d47-4d42-8c0c-dba8f840fedb">
</div>
<div class="ui-radio">
<label class="ui-btn ui-radio-off ui-corner-right ui-controlgroup-last ui-btn-up-d" for="rb-no_8e3b50fa-5d47-4d42-8c0c-dba8f840fedb" data-theme="d">
<span class="ui-btn-inner ui-corner-right ui-controlgroup-last">
<span class="ui-btn-text">No</span>
</span>
</label>
<input id="rb-no_8e3b50fa-5d47-4d42-8c0c-dba8f840fedb" type="radio" checked="False" value="No" name="8e3b50fa-5d47-4d42-8c0c-dba8f840fedb">
</div>
But I cant get this code right:
#For Each fqi In Model.Options
#Html.LabelFor(Function(m) m.CurrentValue, fqi.Text)
#Html.RadioButtonFor(Function(m) m.CurrentValue, New with {.value = fqi.Value, .name=fqi.Name, .checked=fqi.Checked})
Next
It is rendering as:
<div class="ui-radio">
<div class="ui-radio">
<label class="ui-btn ui-radio-off ui-input-text ui-corner-left ui-btn-up-d" for="Questions_1__CurrentValue" data-theme="d">
<span class="ui-btn-inner ui-corner-left">
<span class="ui-btn-text">
<span class="ui-btn-inner">
</span>
</span>
</label>
<label class="ui-btn ui-radio-off ui-input-text ui-corner-right ui-controlgroup-last ui-btn-up-d" for="Questions_1__CurrentValue" data-theme="d">
<span class="ui-btn-inner">
<span class="ui-btn-text">
<span class="ui-btn-inner ui-corner-right ui-controlgroup-last">
</span>
</span>
</label>
<input id="Questions_1__CurrentValue" type="radio" value="{ value = No, name = 8e3b50fa-5d47-4d42-8c0c-dba8f840fedb, checked = False }" name="Questions[1].CurrentValue">
</div>
<input id="Questions_1__CurrentValue" type="radio" value="{ value = Yes, name = 8e3b50fa-5d47-4d42-8c0c-dba8f840fedb, checked = False }" name="Questions[1].CurrentValue">
</div>
I made a custom HTML helper for the contact modal so that anyone on our app can use it with #Html.ContactModal(model and options go here), but the issue is that on the modal there's another html helper for the sales code drop down, and the razor isn't rendering correctly. I tried to do everything with a partial view only to learn you can't (or shouldn't) use partials with html helpers, only with controllers (I'm new to all of this...), a co-worker suggested I use a tag builder, but I wanted to ask here first before writing the entire form with a tag builder.
public static IHtmlString ContactModal(this HtmlHelper htmlHelper, ContactModalOptions options)
{
//required scripts
htmlHelper.AddScriptFile("~/Areas/Customers/Scripts/ContactModal/tmi.customers.contactModal.js");
htmlHelper.AddScriptLine("$('#" + options.controlId + "').contactModal(" + options.ToJson() + ");", true);
string htmlContents = string.Empty;
htmlContents = $#"<div id='contactModalContainer' style='display: none'>
<div class='panel panel-default panel-details' id='' style='display: none'>
<div class='panel-heading' id='divContactModalHeading'>
<h3 id='h3contactModalHeading'></h3>
</div>
<div class='panel-body' id='divContactDetBody'>
<form id='custContactDetailsForm'>
<div class='row'>
<div class='col-sm-6'>
<div class='form-group' style=''>
<label for='txtFirstName' id='lblFirstName' class='control-label'>First Name: </label>
<input data-helper='FirstName' id='contactFirstName' type='text' class='form-control' disabled='disabled' data-editable='true' value='' />
</div>
</div>
<div class='col-sm-6'>
<div class='form-group' style=''>
<label for='txtLastName' class='control-label'>Last Name: </label>
<input data-helper='LastName' id='contactLastName' type='text' class='form-control' disabled='disabled' data-editable='true' value='' />
</div>
</div>
<div class='col-md-12'>
<div class='form-group' style=''>
<label for='txtPositionTitle'>Position/Title: </label>
<input id='contactPosition' data-helper='Position' type='text' class='form-control' disabled='disabled' data-editable='true' value='' />
</div>
</div>
<div class='col-md-12'>
<div class='form-group' style=''>
<label for='txtSalesOrders'>E-mail: </label>
<input id='contactEmail' data-helper='Email' type='text' class='form-control' disabled='disabled' data-editable='true' value='' />
</div>
</div>
<div class='col-sm-4'>
<div class='form-group' style=''>
<label for='txtSalesOrders'>Work Phone: </label>
<input id='contactWorkPhone' data-helper='DirectPhone' type='text' class='form-control' disabled='disabled' data-editable='true' value='' />
</div>
</div>
<div class='col-sm-4'>
<div class='form-group' style=''>
<label for='txtMobilePhone'>Mobile Phone: </label>
<input id='contactMobile' data-helper='MobilePhone' type='text' class='form-control' disabled='disabled' data-editable='true' value='' />
</div>
</div>
<div class='col-sm-4'>
<div class='form-group' style=''>
<label for='txtFax'>Fax: </label>
<input id='contactFax' data-helper='Fax' type='text' class='form-control' disabled='disabled' data-editable='true' value='' />
</div>
</div>
<div class='col-sm-4'>
<div class='form-group' style=''>
<label for='txtHomePhone'>Home Phone: </label>
<input id='contactHomePh' data-helper='HomePhone' type='text' class='form-control' disabled='disabled' data-editable='true' value='' />
</div>
</div>
<div class='col-sm-4'>
<div class='form-group' style=''>
<label for='txtPager'>Other Phone: </label>
<input id='contactPager' data-helper='PagerPhone' type='text' class='form-control' disabled='disabled' data-editable='true' value='' />
</div>
</div>
<div class='col-sm-12'>
<div class='form-group'>
<label for='txtNotes'>Notes/Comments: </label>
<textarea id='contactNotes' data-helper='ContactNotes' type='text' class='form-control' disabled='disabled' rows='3' data-editable='true' value=''></textarea>
</div>
</div>
<div class='col-sm-6'>
<div class='form-group' style=''>
<label for='txtDateAdded'>Date Added: </label>
<label id='contactDateAdded'></label>
</div>
</div>
<div class='col-sm-6' style='clear: both'>
<div class='form-group'>
<label class='control-label'>Referred By:</label>
<div class=''>
##Html.SalesCodeDropDown(new SelectControlOptionsBase('contactReferredBy')
{{
includeNull = true,isEditable = editableOptions.yes,
disabled = true,
}})
</ div >
</ div >
</ div >
< div class='col-md-6' style='clear: both'>
<div class='form-group' style=''>
<label for='txtEnteredBy'>Entered By: </label>
<label id = 'contactEnteredBy' ></ label >
</ div >
</ div >
< div class='col-md-6' style='clear: both'>
<div class='checkbox'>
<label>
<input id = 'contactIsInactiveChkBx' data-helper='Inactive' type='checkbox' disabled data-editable='true' value='0'>Inactive
</label>
</div>
</div>
</div>
</form>
</div>
</div>
<div id = 'contactModalFooter' class='form-group' style=''>
<button type = 'button' id='btnContactModalClose' style='margin-right: 5px;' class='pull-right btn btn-form-state'>Close</button>
<button type = 'button' id='btnContactModalCancel' style='margin-right: 5px;' class='pull-right btn btn-form-state'>Cancel</button>
<button type = 'button' id='btnContactModalSave' style='background-color: #EE6723; margin-right: 5px;' class='pull-right btn btn-form-state'>Save</button>
</div>
</div> ";
return MvcHtmlString.Create(htmlContents);
This ended up working:
public static IHtmlString ContactModal(this HtmlHelper htmlHelper, ContactModalOptions options)
{
StringBuilder result = new StringBuilder();
//required scripts
htmlHelper.AddScriptFile("~/Areas/Customers/Scripts/ContactModal/tmi.customers.contactModal.js");
htmlHelper.AddScriptLine("$('#" + options.controlId + "').contactModal(" + options.ToJson() + ");", true);
var body = htmlHelper.Partial("~/Areas/Customers/Views/Contacts/Shared/ContactModalPartial.cshtml").ToHtmlString();
result.AppendLine(body);
return MvcHtmlString.Create(result.ToString());
}
If your #Html.SalesCodeDropDown(new SelectControlOptionsBase('contactReferredBy') returns html, then just call that before you set the variable htmlContents and then concat it where you need to.