I've created this elements form:
<div class = "ui-grid-a">
<div class= "ui-block-a">
<div data-role="fieldcontain" class = "ui-hide-label">
<label for="birth-place">Birth Place</label>
<input type="text" name="birth-place" id="birth_place" value="" placeholder="Birth Place" />
</div>
</div>
<div class = "ui-block-b">
<div data-role = "fieldcontain" class="ui-hide-label">
<label for="province">Province</label>
<input type="text" name="province" id="province" value="" placeholder="PR" />
</div>
</div>
</div>
and I want to align the element province to the right. How can I do that?
Try this:
<span style="float:right"><label for="province">Province</label></span>
(of course you can put this also in a external css file)
Just do the following...
Apply this custom CSS to your code...
label[for="province"] { text-align:right; }
If it doesn't run they supply the label with a class name and do the following..
label.className { text-align:right; }
Apply a style of text-align:right;to the input field directly, as in this fiddle.
http://jsfiddle.net/den232/Fw2yA/
Good luck!
.floatright {
text-align:right;
}
<div data-role="page" class="type-home">
<div data-role="content">
<div class = "ui-grid-a">
<div class= "ui-block-a">
<div data-role="fieldcontain" class = "ui-hide-label">
<label for="birth-place">Birth Place</label>
<input type="text" name="birth-place" id="birth_place" value="" placeholder="Birth Place" class='floatright' />
</div>
</div>
<div class = "ui-block-b">
<div data-role = "fieldcontain" class="ui-hide-label">
<label for="province">Province</label>
<input type="text" name="province" id="province" value="" placeholder="PR" />
</div>
</div>
</div>
</div>
</div>
Related
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.
<div class="row">
<div class="col-md-6 my-3">
<div class="card card-outline-secondary">
<div class="card-body">
<form class="form" role="form" autocomplete="off">
<div class="form-group row">
<label class="col-md-3 col-form-label form-control-label">First Name</label>
<div class="col-md-9">
<input class="form-control" type="text" value="" readonly />
</div>
</div>
<div class="form-group row">
<label class="col-lg-3 col-form-label form-control-label">Last name</label>
<div class="col-lg-9">
<input class="form-control" type="text" value="" readonly />
</div>
</div>
<div class="form-group row">
<label class="col-lg-3 col-form-label form-control-label">Middle name</label>
<div class="col-lg-9">
<input class="form-control" type="text" value="" readonly />
</div>
</div>
<div class="form-group row">
<label class="col-lg-3 col-form-label form-control-label">Name Extension</label>
<div class="col-lg-9">
<input class="form-control" type="text" value="" readonly />
</div>
</div>
<div class="form-group row">
<label class="col-lg-3 col-form-label form-control-label">Date of Birth</label>
<div class="col-lg-9">
<input class="form-control" type="date" value="" readonly />
</div>
</div>
<div class="form-group row">
<label class="col-lg-3 col-form-label form-control-label">Gender</label>
<div class="col-lg-9">
<input class="form-control" type="text" value="" readonly />
</div>
</div>
<div class="form-group row">
<label class="col-lg-3 col-form-label form-control-label"></label>
<div class="col-lg-9">
<input type="reset" class="btn btn-secondary" value="Cancel">
<input type="button" class="btn btn-primary" value="Save Changes">
</div>
</div>
</form>
</div><!-- card body -->
</div> <!-- card-outline -->
</div>
</div>
I want to make the textbox appear in full-width. I did my research and found out that the width is in default to appear in full-width but in my work it appears in a fixed size.
Your <form> is nested inside the card;
Your card is nested inside col-md-6 of the row;
Hence on media(min-width: 992px), your form-controls will only get
1/2 * 9/12 = 37.5% of the full width.
Your form labels and inputs are already using full width of the card. The problem is, the card is not using full width of the container.
To fix that, you can either remove <div class="row"> and <div class="col-md-6 my-3"> completely, or just change <div class="col-md-6 my-3"> to <div class="col-md-12 my-3">
Fiddle: http://jsfiddle.net/aq9Laaew/86873/
You need to define parent div with full with
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12 my-6">
<div class="card card-outline-secondary">
<div class="card-body">
<form class="form" role="form" autocomplete="off">
<div class="form-group row">
<label class="col-md-3 col-form-label form-control-label">First Name</label>
<div class="col-md-9">
<input class="form-control" type="text" value="" readonly />
</div>
</div>
<div class="form-group row">
<label class="col-lg-3 col-form-label form-control-label">Last name</label>
<div class="col-lg-9">
<input class="form-control" type="text" value="" readonly />
</div>
</div>
<div class="form-group row">
<label class="col-lg-3 col-form-label form-control-label">Middle name</label>
<div class="col-lg-9">
<input class="form-control" type="text" value="" readonly />
</div>
</div>
<div class="form-group row">
<label class="col-lg-3 col-form-label form-control-label">Name Extension</label>
<div class="col-lg-9">
<input class="form-control" type="text" value="" readonly />
</div>
</div>
<div class="form-group row">
<label class="col-lg-3 col-form-label form-control-label">Date of Birth</label>
<div class="col-lg-9">
<input class="form-control" type="date" value="" readonly />
</div>
</div>
<div class="form-group row">
<label class="col-lg-3 col-form-label form-control-label">Gender</label>
<div class="col-lg-9">
<input class="form-control" type="text" value="" readonly />
</div>
</div>
<div class="form-group row">
<label class="col-lg-3 col-form-label form-control-label"></label>
<div class="col-lg-9">
<input type="reset" class="btn btn-secondary" value="Cancel">
<input type="button" class="btn btn-primary" value="Save Changes">
</div>
</div>
</form>
</div><!-- card body -->
</div> <!-- card-outline -->
</div>
</div>
</div>
</body>
</html>
Try adding this to your css:
input, select, textarea {max-width: 100% !important;}
I am trying to get values of form inputs on action method.
MVC View
#using (Html.BeginForm("Report", "Home"))
{
<div class="common_input Volunteer_input">
<div class="row">
<div class="col-sm-12">
<label for="firstName">Reporter:</label>
<div class="select_option_one">
<input type="text" id="ReporterCountries" class="ct-select2 ReporterCountriesList" />
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<label for="firstName">Partner:</label>
<div class="select_option_one">
<input type="text" name="PartnersCountries" id="PartnersCountries" class="ct-select2 CountryList" />
</div>
</div>
</div>
<h3>Comparators</h3>
<div class="row">
<div class="col-sm-12">
<label for="firstName">Partner:</label>
<div class="select_option_one">
<input type="text" name="CompareCountryList" id="CompareCountryList" class="ct-select2 CountryList" />
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<label for="firstName">Rank Growth:</label>
<div class="select_option_one">
<input type="text" name="RankGrowth" id="RankGrowth" class="ct-select2 RankGrowth" />
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="sub_submit">
<button type="submit" class="common_btn hvr-sweep-to-bottom">View<i class="fa fa-long-arrow-right"></i></button>
</div>
</div>
</div>
</div>
}
Action Method for Home Controller
public ActionResult Report(FormCollection form)
{
ViewData["ReporterCountries"] = Request.Form["ReporterCountries"];;
return RedirectToAction("Index","data");
}
When I try to retrieve the values of input on action controller I am receving all the control on the view but values are coming as null.
I have a view where I conditionally iterate and print items: SPANs are not displayed (as expected).
<div>
#if (Model.SomeCondition)
{
#foreach (var x in Model.SomeData)
{
<span>#x.Title</span>
}
}
</div>
Now I'd like not to display the enclosing DIV, however it doesn't work: SPANs are still not displayed, but the DIV is. Why does this happen?
#if (Model.SomeCondition)
{
<div>
#foreach (var x in Model.SomeData)
{
<span>#x.Title</span>
}
</div>
}
This is the full view code:
#using Team.L
#using Microsoft.AspNetCore.Mvc.Localization
#inject IViewLocalizer Localizer
#model Team.ViewModels.DeptTaskGroupView
#{
var EventHandler = "Aventin." + ViewBag.AspAction + "(event)";
}
<form asp-controller="ModulesEx" asp-action="#ViewBag.AspAction" onsubmit="return false">
<div class="form-horizontal">
<input type="hidden" asp-for="Errors">
<div class="MessageBox">#Html.Raw(Utility.GetMessage(Model))</div>
<div class="form-group col-md-offset-2">
<label class="col-md-2"></label>
<div class="col-md-10">
<span data-valmsg-for="" class="text-danger" />
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label">#MyText.Department</label>
<div class="col-md-10">
<select asp-for="DepartmentID" class="form-control" asp-items="#Model.DepartmentList" onchange="#EventHandler"></select>
<span asp-validation-for="DepartmentID" class="text-danger" />
</div>
</div>
#if (Model.AssignedTaskGroup != null)
{
<div class="form-group">
<label class="col-md-2 control-label">#MyText.TaskGroup</label>
<div class="col-md-10">
#foreach (var x in Model.AssignedTaskGroup)
{
<input type="checkbox" name="selectedItems" value="#x.ID" #(Html.Raw(x.Assigned ? "checked=\"checked\"" : "")) />
#x.Title
}
</div>
</div>
}
<div class="form-horizontal">
<div class="form-group">
<div class="col-md-1 col-md-offset-2">
<input type="submit" value="#MyText.Save" class="btn btn-default" />
</div>
</div>
</div>
</div>
</form>
As written, it doesn't happen. I'm guessing you either didn't reload the page or there is code around your demonstrated code that renders a div that this div is contained in.
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.