I have a form with this code, with two checkboxes at the end of it. What I want is that the checkboxex align horizontally one beside the other:
<div class="form-horizontal">
#Html.HiddenFor(x => x.CategoriaId)
#Html.HiddenFor(x => x.NombreCategoria)
<hr />
#Html.ValidationSummary(true, "", new { #class = "text-danger" })
<div class="form-group">
#Html.LabelFor(model => model.NombreCategoria, "Tipo de Producto", htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
<label class="form-control-static" style="color:#ff6a00">#Model.NombreCategoria</label>
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.Titulo, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.Titulo, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.Titulo, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.Descripcion, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.TextAreaFor(model => model.Descripcion, new { #class = "form-control", #rows = 3 })
#Html.ValidationMessageFor(model => model.Descripcion, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.Precio, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.Precio, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.Precio, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
<div class="">
#Html.LabelFor(model => model.ContactoTelefono, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-2">
#Html.CheckBoxFor(model => model.ContactoTelefono, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.ContactoTelefono, "", new { #class = "text-danger" })
</div>
#Html.LabelFor(model => model.ContactoMail, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-2">
#Html.CheckBoxFor(model => model.ContactoMail, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.ContactoMail, "", new { #class = "text-danger" })
</div>
</div>
</div>
</div>
Now the checkboxes are displayed with a huge space between them. I want to put them more together.
Thank you in advanced.
Like this sample?
HTML:
<div class="form-group">
<input type="checkbox" class="form-control checkbox-inline" />
<input type="checkbox" class="form-control checkbox-inline" />
</div>
CSS:
.checkbox-inline {
display: inline-block;
width: 30px;
height: 30px;
}
Related
I have a view that uses the following code.
<div class="tab-pane fade active" id="tab_1">
#Html.ValidationSummary(true, "", new { #class = "text-danger" })
<div class="form-group">
#Html.LabelFor(model => model.ID, "Facility Name fwefwf wefwefwef wefwefe", htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.DropDownList("ID", null, htmlAttributes: new { #class = "form-control" })
#Html.ValidationMessageFor(model => model.ID, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.ResidentID, "ResidentID", htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.ResidentID, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.ResidentID, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.ClaimAmount, "Claim Amount", htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.ClaimAmount, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.ClaimAmount, "", new { #class = "text-danger" })
</div>
</div>
When the page is full screen the wrapping causes the controls to appear on the next line, instead of beside the label.
WrappingControls
How can I style the controls to have the textboxes appear on the same line as the labels?
You can try to use <div class="form-group row"> to replace <div class="form-group">
Here is a demo:
<form>
<div class="tab-pane fade active" id="tab_1">
#Html.ValidationSummary(true, "", new { #class = "text-danger" })
<div class="form-group row">
#Html.LabelFor(model => model.ID, "Facility Name fwefwf wefwefwef wefwefe", htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
<select asp-for="Id">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
#Html.ValidationMessageFor(model => model.ID, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group row">
#Html.LabelFor(model => model.ResidentID, "ResidentID", htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.ResidentID, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.ResidentID, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group row">
#Html.LabelFor(model => model.ClaimAmount, "Claim Amount", htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.ClaimAmount, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.ClaimAmount, "", new { #class = "text-danger" })
</div>
</div>
</div>
</form>
result:
If it is still not work,see the location of
in your layout and put it into <footer></footer>like this:
<footer>
©2020--Consultants For Long Time Care
</footer>
Good day guys,
I have a view that i need to search for customer Account details first and not reloading the page.
The user enters the customer Account number and then press the search button.
I have implemented below but it keeps throwing the error part that account number not exist.
// This is the View
#model CreditFacility_Web.Models.CreditFacilityModel.Transaction
#{
Layout = "~/Views/Shared/_Layout.cshtml";
}
<div class="w3-container" style="padding-left:60px">
#{
ViewBag.Title = "Credit Transaction";
}
#using (Html.BeginForm())
{
#Html.AntiForgeryToken()
<div class="form-horizontal">
<h2>Credit Transaction</h2>
<hr />
#Html.ValidationSummary(true, "", new { #class = "text-danger" })
<div class="form-group">
#Html.LabelFor(model => model.Account_Number, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.Account_Number, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.Account_Number, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<button value="Search" class="btn btn-primary">Search</button>
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.Firstname, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.Firstname, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.Firstname, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.Surname, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.Surname, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.Surname, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.Phone_Number, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.Phone_Number, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.Phone_Number, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.Account_Type, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.Account_Type, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.Account_Type, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.Old_Balance, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.Old_Balance, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.Old_Balance, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.Amount, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.Amount, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.Amount, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.New_Balance, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.New_Balance, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.New_Balance, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.Transaction_Type, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.Transaction_Type, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.Transaction_Type, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.Narration, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.Narration, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.Narration, "", 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 {
<script type="text/javascript">
$(document).ready(function () {
$(".btn-primary").click(function () {
var accNo = $('#Account_Number').val();
$.ajax({
url: "#Url.Action("AccountDetails", "Transactions")",
type: "POST",
dataType: "json",
data: { accountNo : accNo },
async: false,
error: function () {
alert('Account Number do not Exist Or Other Errors Occurred');
},
success: function (data) {
if (Object.keys(data).length > 0) {
$('#Firstname').val(data.Firstname);
$('#Old_Balance').val(data.Account_Balance);
}
}
});
});
});
</script>
}
Below is the Controller
[HttpPost]
public JsonResult AccountDetails(string accountNo)
{
using (CreditFacilityContext dataContext = new CreditFacilityContext())
{
var accSearchParameter = new SqlParameter("#Account_Number", accountNo);
var accDetails = dataContext.Database.SqlQuery<SavingsAccount>("spGetAccountDetails", accSearchParameter).Select(s => new SavingsAccount
{
Firstname = s.Firstname,
Account_Balance = s.Account_Balance,
//rest of properties
}).SingleOrDefault();
return Json(accDetails, JsonRequestBehavior.AllowGet);
}
}
First thing you want to do is remove that async: false. It does nothing other than tie up the main thread while the transaction is carried out.
I suggest checking that in the HTML that is generated, your input actually has the id of Account_Number and not an auto generated ID. You can manually set an ID of your choosing as well.
The JS should check the value of accNo before sending anything to the backend.
I have a begin form with input elements and text label. For some reason I cannot center the form in the middle of row. I tried text-align center and it centers only the text not buttons or input fields.
or I tried to apply separate css styles on each element but it is messing around the form.
What is wrong with it?
<section class="my-posted-jobs">
<div class="row">
<div class="col-md-6" </div>
<div class="specific-job col-md-6">
<div class="row test">
<div class="form-horizontal">
<h1>Edit Post</h1>
#Html.ValidationSummary(true, "", new { #class = "text-danger" })
#Html.HiddenFor(model => model.JobPostId)
<div class="form-group">
#Html.LabelFor(model => model.Headline, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.Headline, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.Headline, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.JobAddress, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.JobAddress, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.JobAddress, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.AboutJob, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.AboutJob, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.AboutJob, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.JobCity, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.JobCity, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.JobCity, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.JobPostCode, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.JobPostCode, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.JobPostCode, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Save" class="btn btn-default" />
</div>
</div>
</div>
}
</div>
</div>
</div>
</section>
I am using scaffolding for ASP.NET MVC model first development.
The created views look good, but they are laid out with one field per line. I am trying to get multiple fields to display on a single line in some places, but cannot find the best way to do this, while still having the input fields appear nicely formatted.
The razor code generated is like this:
<div class="form-group">
#Html.LabelFor(model => model.FirstName, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.FirstName, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.FirstName, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.MiddleName, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.MiddleName, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.MiddleName, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.LastName, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.LastName, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.LastName, "", new { #class = "text-danger" })
</div>
</div>
If I strip out all the Bootstrap CSS classes, I can do it, but then I lose the nice formatting of the input fields.
First, each form-group automatically gets its own line. It employs a clearfix to ensure that nothing else wraps around it. Second, even if it didn't, each of your label/field combos are consuming 12 columns. Since there's only 12 columns to work with in the Bootstrap grid, each would wrap to a new line anyways.
There's two options here. If you want multiple fields on the same line, under the same label, you can simply put them all within your col-md-10 div within the form-group:
<div class="form-group">
<label class="control-label col-md-2" for="#Html.IdFor(m => m.FirstName)">Name</label>
<div class="col-md-10">
<div class="row">
<div class="col-md-4">
#Html.EditorFor(model => model.FirstName, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.FirstName, "", new { #class = "text-danger" })
</div>
<div class="col-md-4">
#Html.EditorFor(model => model.MiddleName, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.MiddleName, "", new { #class = "text-danger" })
</div>
<div class="col-md-4">
#Html.EditorFor(model => model.LastName, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.LastName, "", new { #class = "text-danger" })
</div>
</div>
</div>
</div>
Alternatively, you can simply put each form-group into a column within an overall row:
<div class="row">
<div class="col-md-4">
<div class="form-group">
#Html.LabelFor(model => model.FirstName, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.FirstName, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.FirstName, "", new { #class = "text-danger" })
</div>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
#Html.LabelFor(model => model.MiddleName, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.MiddleName, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.MiddleName, "", new { #class = "text-danger" })
</div>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
#Html.LabelFor(model => model.LastName, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.LastName, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.LastName, "", new { #class = "text-danger" })
</div>
</div>
</div>
</div>
With this option, though, you should probably avoid the form-horizontal layout and simply stack your label on top of your fields. Otherwise, the labels are going to consume too much of the horizontal space.
All of this is just basic Bootstrap grid markup, though. There's nothing special about the fact that you're dealing with form elements.
I have a problem concerning a modal (bootstrap) I want to open. I want to include a partial view.
(I am boing to post my code in a few minutes).
Here is the objective :
1- I have an Index.cshtml page where a link call a javascript
<div class="profile-userbuttons">
#Html.ActionLink("Modifier", "Edit", "Profil", null, new { #class = "modal-link btn btn-success"#*, id = Model.userLog*# })
</div>
(Note that I have commented the second (id) parameter in my anonymous type).
(This parameter should be a object of type userLog).
Then a click on this link call a javascript script :
<!-- Calling Modals -->
<script type="text/javascript">
$(function () {
// Initialize numeric spinner input boxes
//$(".numeric-spinner").spinedit();
// Initialize modal dialog
// attach modal-container bootstrap attributes to links with .modal-link class.
// when a link is clicked with these attributes, bootstrap will display the href content in a modal dialog.
alert(1);
$('body').on('click', '.modal-link', function (e) {
e.preventDefault();
alert(2);
$(this).attr('data-target', '#modal-container');
$(this).attr('data-toggle', 'modal');
alert(3);
});
// Attach listener to .modal-close-btn's so that when the button is pressed the modal dialog disappears
$('body').on('click', '.modal-close-btn', function () {
$('#modal-container').modal('hide');
});
//clear modal cache, so that new content can be loaded
$('#modal-container').on('hidden.bs.modal', function () {
$(this).removeData('bs.modal');
});
$('#CancelModal').on('click', function () {
return false;
});
});
</script>
And of course, the modal div is present in the Index.cshtml :
<!-- Modal -->
<div id="modal-container" class="modal fade"
tabindex="-1" role="dialog">
<div class="modal-content">
</div>
</div>
Remark that the modal is empty. My script is in charge of filling it.
But lets return to my ActionLink. the Action link target a Action : "Edit", in my Controller "Profil"
Here it is :
public ActionResult Edit(/*userslog id*/)
{
return PartialView("Edit"/*,id*/);
}
(I have commented the parameter, to test it was a "parameter passing" issue).
As you read it you see it should return a partial view named "Edit".
here it is :
#model WebSiteModels.Models.userslog
#{
ViewBag.Title = "Edit";
}
<div class="modal-body">
<div class="alert alert-warning">
<h2>Edit</h2>
<h3>YO !</h3>
#using (Html.BeginForm())
{
#Html.AntiForgeryToken()
<div class="form-horizontal">
<h4>userslog</h4>
<hr />
#Html.ValidationSummary(true, "", new { #class = "text-danger" })
#Html.HiddenFor(model => model.id)
<div class="form-group">
#Html.LabelFor(model => model.photo, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.photo, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.photo, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.age, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.age, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.age, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.nom, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.nom, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.nom, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.prenom, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.prenom, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.prenom, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.sex, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.sex, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.sex, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.email, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.email, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.email, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.telephone, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.telephone, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.telephone, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.adresse, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.adresse, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.adresse, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.lattitude, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.lattitude, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.lattitude, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.longitude, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.longitude, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.longitude, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.idpersonne, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.idpersonne, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.idpersonne, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.idcontact, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.idcontact, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.idcontact, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.DateCreation, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.DateCreation, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.DateCreation, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.DateModification, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.DateModification, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.DateModification, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Save" class="btn btn-default" />
</div>
</div>
</div>
}
<div>
#Html.ActionLink("Back to List", "Index")
</div>
<div class="row">
<div class="col-md-4 col-md-offset-4">
<button type="button" class="btn btn-default"
data-dismiss="modal">
Cancel
</button>
<button type="submit" id="approve-btn"
class="btn btn-danger">
Save
</button>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#approve-btn').click(function () {
$('#modal-container').modal('hide');
});
});
</script>
And when I test it, here is the capture screen I obtain :
Capture screen result : modal seems to be called, but in the browser console, is empty
So here is my problem. My partial view is not called despite the modal is opened. Moreover, when I open it in the browser : every thing appears well.
What do I miss ?
Have you tried to fill the modal content using JQuery with something like(see NEW LINE):
$('body').on('click', '.modal-link', function (e) {
e.preventDefault();
alert(2);
**//// NEW LINE
$(".modal-content").load("/Profil/Edit");
////**
alert(3);
});
and convert the Html.ActionLink to simple <a class='modal-link' data-target='#modal-container' data-toggle='modal'></a> tag with same attributes.