Develop Reference

Modal Grid not displaying properly, maybe because ::before and ::after

I am trying to do a simple modal in C# & ASP.NET MVC; I added 2 text boxes in a col-6 layout so they would be side by side I tried quiet a few different techniques and the only way I got it to work was if I did a table with a row and 2 cols in the row but they don’t came out the exact same size. So I'm trying to do the col-6 with bootstrap grid so they will be the same. In my Dev tools I see ::before and ::after maybe this has something to do with messing up the layout.
Here the 2 text boxes are in block layout 1 on top of each other
<div class="container-fluid mx-auto">
<div class="row d-inline">
<div class="col-6 d-inline">
<div class="form-group">
#Html.LabelFor(x => x.PartVM.PartNumber, htmlAttributes: new { #class = "control-label" })
<div class="">
#Html.TextBoxFor(x => x.PartVM.PartNumber, new { #class = "form-control", #readonly = "readonly" })
#Html.ValidationMessageFor(x => x.PartVM.PartNumber, "", new { #class = "text-danger" })
</div>
</div>
</div>
<div class="col-6 d-inline">
<div class="form-group">
#Html.LabelFor(x => x.PartVM.DateEntered, htmlAttributes: new { #class = "control-label" })
<div class="">
#Html.TextBoxFor(x => x.PartVM.DateEntered, new { #class = "form-control", #readonly = "readonly" })
#Html.ValidationMessageFor(x => x.PartVM.DateEntered, "", new { #class = "text-danger" })
</div>
</div>
</div>
</div>
</div>
How can I use the bootstrap grid so they come out the same size and on the same row?

You should just be able to use col instead of col-6. Also, using the form-inline might help. There are a lot of things you can do to format your form how you want it using Bootstrap . Also, Bootstrap uses #media breakpoints, which changes the layout based on the screen size.
<form class="form-inline">
<div class="container-fluid mx-auto">
<div class="row d-inline">
<div class="col d-inline">
<div class="form-group">
#Html.LabelFor(x => x.PartVM.PartNumber, htmlAttributes: new { #class = "control-label" })
<div class="">
#Html.TextBoxFor(x => x.PartVM.PartNumber, new { #class = "form-control", #readonly = "readonly" })
#Html.ValidationMessageFor(x => x.PartVM.PartNumber, "", new { #class = "text-danger" })
</div>
</div>
</div>
<div class="col d-inline">
<div class="form-group">
#Html.LabelFor(x => x.PartVM.DateEntered, htmlAttributes: new { #class = "control-label" })
<div class="">
#Html.TextBoxFor(x => x.PartVM.DateEntered, new { #class = "form-control", #readonly = "readonly" })
#Html.ValidationMessageFor(x => x.PartVM.DateEntered, "", new { #class = "text-danger" })
</div>
</div>
</div>
</div>
</div>
</form>

ASP.NET HTML - Textboxes are extremely close together and need help putting space in between them

#using (Html.BeginForm())
{
#Html.AntiForgeryToken()
<h4>Send your comments.</h4>
<hr />
<div class="form-group">
#Html.LabelFor(m => m.FromName, new { #class = "col-md-2 control-label" })
<div class="col-md-10">
#Html.TextBoxFor(m => m.FromName, new { #class = "form-control" })
#Html.ValidationMessageFor(m => m.FromName)
</div>
</div>
<div class="clearfix"></div>
<div class="form-group">
#Html.LabelFor(m => m.FromEmail, new { #class = "col-md-2 control-label" })
<div class="col-md-10">
#Html.TextBoxFor(m => m.FromEmail, new { #class = "form-control" })
#Html.ValidationMessageFor(m => m.FromEmail)
</div>
</div>
<div class="clearfix"></div>
<div class="form-group">
#Html.LabelFor(m => m.Message, new { #class = "col-md-2 control-label" })
<div class="col-md-10">
#Html.TextBoxFor(m => m.Message, new { #class = "form-control" })
#Html.ValidationMessageFor(m => m.Message)
</div>
</div>
<div class="clearfix"></div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" class="btn btn-default" value="Send" />
</div>
</div>
}
I have tried using clearfix, as well as modifying the css margins in form-group. If anyone has any suggestions, feel free. Program works perfectly, just the formatting that is off.

You seem to be using clearfix in the wrong place?
Just add it along side form-group
<div class="form-group clearfix">

Try either one will solve the problem.
Add the class form-horizontal to the form
or
Add the class row to the <div class="form-group">

ASP.NET MVC - Using a Form in a Bootstrap Modal to call an Action from a Controller

I have a Form that creates an entry into my database. I am trying to add an additional form via a modal that will allow the user to populate the first form by searching a property on the webservice.
What I need is for when the user types hits search in the modal it will call an action on controller that then runs my web service client that then returns a list of appropriate information. I then want this list displayed as a table on the page. The user can then select which search result they want to use to which will then populate the original form. I think I can figure most of this out but wasnt sure of the best way to kick off the search from the modal. Code is as follows.
View
#model *******
#{
ViewBag.Title = "Create";
}
<h2>Create</h2>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#Search">Populate From Service</button>
<!-- Modal -->
<div id="Search" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Search By Property</h4>
</div>
<div class="modal-body">
<form class="form-horizontal">
<p>blah blah blah</p>
<div class="form-group">
<label for="API14" class="control-label col-md-2">API</label>
<div class ="col-md-10">
<input type="text" class="form-control" id="API14" aria-describedby="API14" placeholder="Enter API">
</div>
</div>
</form>
</div>
<div class="modal-footer">
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Search" class="btn btn-success" />
<input type="button" value="Close" data-dismiss="modal" class="btn btn-danger" />
</div>
</div>
</div>
</div>
</div>
</div>
#using (Html.BeginForm())
{
#Html.AntiForgeryToken()
<div class="form-horizontal">
<hr />
#Html.ValidationSummary(true, "", new { #class = "text-danger" })
<div class="form-group">
#Html.LabelFor(model => model.API14, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.API14, new { htmlAttributes = new { #class = "form-control"} })
#Html.ValidationMessageFor(model => model.API14, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.PROP_NO, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.PROP_NO, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.PROP_NO, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.PROP_NM, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.PROP_NM, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.PROP_NM, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.ENTITY, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10 ">
#Html.EditorFor(model => model.ENTITY, new { htmlAttributes = new { #class = "form-control" } } )
#Html.ValidationMessageFor(model => model.ENTITY, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.PROD_ZONE_NM, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.PROD_ZONE_NM, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.PROD_ZONE_NM, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.LEASE_NAME, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.LEASE_NAME, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.LEASE_NAME, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.WELL_NO, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.WELL_NO, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.WELL_NO, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Create" class="btn btn-success" />
</div>
</div>
</div>
}
<div>
#Html.ActionLink("Back to List", "Index")
</div>
#section Scripts {
#Scripts.Render("~/bundles/jqueryval")
}

You could divide your issue into two steps.
Step 1: "What I need is for when the user types hits search in the modal it will call an action on controller that then runs my web service client that then returns a list of appropriate information. I then want this list displayed as a table on the page."
Add the following to your scripts section:
#section Scripts {
#Scripts.Render("~/bundles/jqueryval")
<script>
$(document).ready(function () {
$('#submitModal').click(function () {
var data = {
API14: $('#API14').val()
}
$.ajax({
url: '/Default/SearchByProperty',
data: data
}).success(function (html) {
$('#API14List').html(html);
$('#Search').modal('toggle');
});
});
});
</script>
}
This is a simple ajax call that takes the value from you modal input and submits to the server. Note the "url" parameter passed in the call as this will need to match your "/{controller}/{action}". Important: You will also need to update your "Search" button#API14 to type "button", not "submit", as this will avoid a postback which is undesired when making AJAX calls.
You can then add something like this to your controller:
public ActionResult SearchByProperty()
{
var model = new List<string>();
model.Add("one");
model.Add("two");
model.Add("three");
return PartialView(model);
}
... which will require the following in a partial view file I named SearchByProperty.cshtml:
#model List<string>
<table>
#foreach (var item in Model) {
<tr class="API14-item">
<td>#item</td>
</tr>
}
</table>
Step 2: "The user can then select which search result they want to use to which will then populate the original form. I think I can figure most of this out but wasnt sure of the best way to kick off the search from the modal. Code is as follows."
If you are confident in writing jQuery, then you should be able to write some js in the scripts section of your create page that will take the values you place in your table and populate your form:
$(document).on('click', '.API14-item', function () {
//
// TODO: your code here
//
});
Hope this helps!

Reset model values for partial view

I have a view which contains two partial views. One to select a customer and one to create a new customer both shown within tabs on the parent page. If somebody selects a customer, and then continues with the data entry form, but then has to go back to create a new customer instead, then the data from the selected customer remains. I can replace the data by entering the new data, however, the important bit is that the customer id remains and therefore none of the other data is taken into account. Is there a way for me to reset the customer object on click of e.g. an edit button without losing data from the rest of the page?
My parent view (relevant section) is:
<div class="form-group">
#Html.LabelFor(model => model.CommunicationModel.Communication.Customer.Name, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-12">
#if (Model.CommunicationModel.Communication.Customer.Name == null)
{
<input id="btnCust" type="button" value="Select" class="btn btn-default selectCustomer" />
}
else
{
<span id="custSpan" style="font-size:16px; font:bold;">
#Html.DisplayFor(model => model.CommunicationModel.Communication.Customer.Name)
#Html.HiddenFor(model => model.CommunicationModel.Communication.Customer.CustomerId)
<input id="btnEditCust" type="button" value="Edit" class="btn btn-default selectCustomer" />
</span>
}
<div id="customerTabs" style="display:none;">
<hr />
<p>
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">Select Customer</li>
<li role="presentation">Create New Customer</li>
</ul>
</p>
<div class="tab-content">
<div id="tabs-1" role="tabpanel" class="tab-pane active">
#Html.Partial("~/Views/Communication/SelectCustomer.cshtml", Model.CustomerViewModel.AllCustomers)
</div>
<div id="tabs-2" role="tabpanel" class="tab-pane">
#Html.Partial("~/Views/Communication/CreateCustomer.cshtml", Model)
</div>
</div>
</div>
</div>
</div>
And my create customer partial view is:
#model CommunicationsLog.ViewModels.CommunicationViewModel
<div class="form-horizontal" id="addCustomerForm">
<div class="row">
<div class="col-md-12">
#Html.ValidationSummary(true, "", new { #class = "text-danger" })
<div class="form-group">
#Html.LabelFor(model => model.CommunicationModel.Communication.Customer.Name, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.TextBoxFor(model => model.CommunicationModel.Communication.Customer.Name, new { htmlAttributes = new { #class = "form-control" }, #id = "name" })
#Html.ValidationMessageFor(model => model.CommunicationModel.Communication.Customer.Name, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.CommunicationModel.Communication.Customer.ContactEmail, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.TextBoxFor(model => model.CommunicationModel.Communication.Customer.ContactEmail, new { htmlAttributes = new { #class = "form-control" }, #id = "email" })
#Html.ValidationMessageFor(model => model.CommunicationModel.Communication.Customer.ContactEmail, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.CommunicationModel.Communication.Customer.ContactTel, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.TextBoxFor(model => model.CommunicationModel.Communication.Customer.ContactTel, new { htmlAttributes = new { #class = "form-control" }, #id = "phone" })
#Html.ValidationMessageFor(model => model.CommunicationModel.Communication.Customer.ContactTel, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.CommunicationModel.Communication.Customer.CompanyName, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.TextBoxFor(model => model.CommunicationModel.Communication.Customer.CompanyName, new { htmlAttributes = new { #class = "form-control" }, #id = "company" })
#Html.ValidationMessageFor(model => model.CommunicationModel.Communication.Customer.CompanyName, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.CommunicationModel.Communication.Customer.Address, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.TextBoxFor(model => model.CommunicationModel.Communication.Customer.Address, new { htmlAttributes = new { #class = "form-control" }, #id = "address" })
#Html.ValidationMessageFor(model => model.CommunicationModel.Communication.Customer.Address, "", new { #class = "text-danger" })
</div>
</div>
</div>
</div>
Any help would be greatly appreciate. Im stumped :)

You're using Partials, meaning the html already been loaded and rendered when it reach the client.
To handle the case of Id is being sent, you should mark ..Customer.CustomerId has disabled="disabled" or readonly, this will avoid the Client side of submitting the Input tag, which will result of the Server side "think" (If you implemented it in that fashion) that this is a new customer.
You can easily achieve it using jQuery 1.6+:
$('#TheCustomerId').prop('disabled', true);
$('#TheCustomerId').prop('disabled', false);
Disable on < 1.6: Disable/enable an input with jQuery?

MVC RenderPartial Shared Strongly Typed View

I have a Strongly Types Partial View that I am trying to render from another Partial View
#{ Html.RenderPartial("Days", Model.DaysOpen, new ViewDataDictionary()); }
I have been folling advice based on the below
ASP.NET MVC, strongly typed views, partial view parameters glitch
It allows me to create the parent(Centre) but does not create the Child (owned) Days entity.
Can anyone offer any advice
Details.cshtml
#model RCCMS.ObjectModel.Entities.Centre
#using (Html.BeginForm(null, null, FormMethod.Post, new { #class = "form-horizontal", Role = "form" }))
{
#Html.ValidationSummary("Please correct the following errors:-")
<div id="HiddenFields">
#Html.HiddenFor(m => m.RowVersion)
</div>
<fieldset>
<div class="form-group">
#Html.LabelFor(model => model.Name, new { #class = "col-md-2 control-label" })
<div class="col-md-5">
#Html.TextBoxFor(model => model.Name, new { #class = "form-control" })
</div>
<div class="col-md-1">
#Html.ValidationMessageFor(model => model.Name, "*")
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.Address1, new { #class = "col-md-2 control-label" })
<div class="col-md-5">
#Html.TextBoxFor(model => model.Address1, new { #class = "form-control" })
</div>
<div class="col-md-1">
#Html.ValidationMessageFor(model => model.Address1, "*")
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.Address2, new { #class = "col-md-2 control-label" })
<div class="col-md-5">
#Html.TextBoxFor(model => model.Address2, new { #class = "form-control" })
</div>
<div class="col-md-1">
#Html.ValidationMessageFor(model => model.Address2, "*")
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.Address3, new { #class = "col-md-2 control-label" })
<div class="col-md-5">
#Html.TextBoxFor(model => model.Address3, new { #class = "form-control" })
</div>
<div class="col-md-1">
#Html.ValidationMessageFor(model => model.Address3, "*")
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.Town, new { #class = "col-md-2 control-label" })
<div class="col-md-5">
#Html.TextBoxFor(model => model.Town, new { #class = "form-control" })
</div>
<div class="col-md-1">
#Html.ValidationMessageFor(model => model.Town, "*")
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.County, new { #class = "col-md-2 control-label" })
<div class="col-md-5">
#Html.TextBoxFor(model => model.County, new { #class = "form-control" })
</div>
<div class="col-md-1">
#Html.ValidationMessageFor(model => model.County, "*")
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.Postcode, new { #class = "col-md-2 control-label" })
<div class="col-md-5">
#Html.TextBoxFor(model => model.Postcode, new { #class = "form-control" })
</div>
<div class="col-md-1">
#Html.ValidationMessageFor(model => model.Postcode, "*")
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.Uprn, new { #class = "col-md-2 control-label" })
<div class="col-md-5">
#Html.TextBoxFor(model => model.Uprn, new { #class = "form-control" })
</div>
<div class="col-md-1">
#Html.ValidationMessageFor(model => model.Uprn, "*")
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.Lunch, new { #class = "col-md-2 control-label" })
<div class="col-md-5">
#Html.TextBoxFor(model => model.Lunch, new { #class = "form-control" })
</div>
<div class="col-md-1">
#Html.ValidationMessageFor(model => model.Lunch, "*")
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.VoluntaryContribution, new { #class = "col-md-2 control-label" })
<div class="col-md-5">
#Html.TextBoxFor(model => model.VoluntaryContribution, new { #class = "form-control" })
</div>
<div class="col-md-1">
#Html.ValidationMessageFor(model => model.VoluntaryContribution, "*")
</div>
</div>
#{ Html.RenderPartial("Days", Model.DaysOpen, new ViewDataDictionary()); }
<div class="col-md-offset-2">
<input type="submit" name="submit" value="Save" class="btn btn-primary"/>
<input type="submit" id="cancel" name="submit" value="Cancel" class="btn"/>
</div>
</fieldset>
}
And my Partial View (Days)
#model RCCMS.ObjectModel.Entities.Days
<div class="form-group">
#Html.Label("Days Open", new {#class = "col-md-5 control-label"})
<div class="col-md-10">
<div class="checkbox-inline">
<label>
#Html.CheckBoxFor(m => m.Monday) Monday
#Html.ValidationMessageFor(m => m.Monday, "*")
</label>
</div>
<div class="checkbox-inline">
<label>
#Html.CheckBoxFor(m => m.Tuesday) Tuesday
#Html.ValidationMessageFor(m => m.Tuesday, "*")
</label>
</div>
<div class="checkbox-inline">
<label>
#Html.CheckBoxFor(m => m.Wednesday) Wednesday
#Html.ValidationMessageFor(m => m.Wednesday, "*")
</label>
</div>
<div class="checkbox-inline">
<label>
#Html.CheckBoxFor(m => m.Thursday) Thursday
#Html.ValidationMessageFor(m => m.Thursday, "*")
</label>
</div>
<div class="checkbox-inline">
<label>
#Html.CheckBoxFor(m => m.Friday) Friday
#Html.ValidationMessageFor(m => m.Friday, "*")
</label>
</div>
<div class="checkbox-inline">
<label>
#Html.CheckBoxFor(m => m.Saturday) Saturday
#Html.ValidationMessageFor(m => m.Saturday, "*")
</label>
</div>
<div class="checkbox-inline">
<label>
#Html.CheckBoxFor(m => m.Sunday) Sunday
#Html.ValidationMessageFor(m => m.Sunday, "*")
</label>
</div>
</div>
The create action of the CentreController
public ActionResult Create()
{
if (!Security.HasPemission(Permission.CanCreateCentres)) return View("AccessDenied");
var model = new Centre();
return (IsAjax()) ? (ActionResult)PartialView("Details", model) : View(model);
}