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>
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>
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'm having some issues working with bootstrap. I'm a little confused right now. I need to add a form on the right side of a photo in Asp.net MVC. I have a render body on my main page and then in the other view I have this bootstrap code:
#using (Html.BeginForm("EditarUtilizador", "Account", null, FormMethod.Post,
new { enctype = "multipart/form-data" }))
{
System.Diagnostics.Debug.WriteLine(#Html.DisplayFor(modelItem => modelItem.ImagePath));
<div class="form-horizontal">
<h4>Editar Perfil Pessoal</h4>
<hr />
#Html.ValidationSummary(true, "", new { #class = "text-danger" })
<fieldset class="col-md-3">
#if (Model.ImagePath != null)
{
<img src="~/Images/#Html.DisplayFor(modelItem => modelItem.ImagePath)" width="150" height="150" />
}
else
{
<img src="~/StaticImages/default-user-image.png" width="150" height="150" />
}
<div class="editor-field">
<input id="ImagePath" title="Upload a product image"
type="file" name="file" />
</div>
</fieldset>
<div class="form-group" >
#Html.LabelFor(m => m.Utilizador, new { #class = "col-md-2 control-label" })
<div class="col-md-10">
#Html.DisplayFor(m => m.Utilizador, new { #class = "form-control"})
#Html.ValidationMessageFor(model => model.Utilizador, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(m => m.Password, new { #class = "col-md-2 control-label" })
<div class="col-md-10">
#Html.EditorFor(m => m.Password, new { #class = "form-control" })
#Html.ValidationMessageFor(model => model.Password, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(m => m.NovaPassword, new { #class = "col-md-2 control-label" })
<div class="col-md-10">
#Html.EditorFor(m => m.NovaPassword, new { #class = "form-control" })
#Html.ValidationMessageFor(model => model.Password, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(m => m.Email, new { #class = "col-md-2 control-label" })
<div class="col-md-10">
#Html.DisplayFor(m => m.Email, new { #class = "form-control" })
#Html.ValidationMessageFor(model => model.Email, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(m => m.Telemóvel, new { #class = "col-md-2 control-label" })
<div class="col-md-10">
#Html.EditorFor(m => m.Telemóvel, new { #class = "form-control" })
#Html.ValidationMessageFor(model => model.Telemóvel, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(m => m.DataNascimento, new { #class = "col-md-2 control-label" })
<div class="col-md-10">
#Html.EditorFor(m => m.DataNascimento, new { #class = "form-control", type = "date", })
#Html.ValidationMessageFor(model => model.DataNascimento, "", new { #class = "text-danger" })
</div>
What I have at the moment is this:
I want to form to appear on the right, but in my case it appears below the image.
Because <div> elements are block-level, they will stack on top of one another by default. Alter the CSS to get what you desire.
Using Bootstrap Grid Mechanism
You can align content in the following manner
#Html.BeginForm(){
<div class="row">
<div class="col-md-8">
Add the input fields in this column
</div>
<div class="col-md-4">
Add the image portion here
</div>
</div>
}
The maximum value of column in Bootrap grid is 12, you can divide this value into individual columns like I did. You can tweak the col-md-* values according to your preference.
You can learn more about the bootstrap Grid in the following link.
https://getbootstrap.com/examples/grid/
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;
}
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.