Problem
How to display user login on center of page ?
Details
User login data display on left
Actually i need to display user login data on center of page .
This include labels for user name and password and checkbox and label remember
and user login title and button submit and text box for user name and password
meaning move all to center .
#model BookingPrograms.UsersLogin
#{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Login</title>
</head>
<body>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/jqueryval")
#using (Html.BeginForm())
{
#Html.AntiForgeryToken()
<div class="form-horizontal">
<h4>UsersLogin</h4>
<hr />
#Html.ValidationSummary(true, "", new { #class = "text-danger" })
<div class="form-group">
#Html.LabelFor(model => model.UserName, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.UserName, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.UserName, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.Password, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.Password, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.Password, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.Remeber, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
<div class="checkbox">
#Html.EditorFor(model => model.Remeber)
#Html.ValidationMessageFor(model => model.Remeber, "", new { #class = "text-danger" })
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Login" class="btn btn-default" />
</div>
</div>
</div>
}
<div>
#Html.ActionLink("Back to List", "Index")
</div>
</body>
</html>
Using a custom style you can achieve this by setting a few rules to the form's class like this. But please add and use a different class instead of the bootstrap form-horizontal class.
.form-horizontal {
margin: 0 25px; // margin-top 0 while the right and left to 25px
text-align: center; // This centers the button, texts and the rest.
}
Try this and let me know what you get.
Related
i use CKEditor in Create view for save Text to Database Model using below code
<div class="row">
<div class="col">
#Html.LabelFor(model => model.Body, htmlAttributes: new { #class = "control-label col-md-2" })
</div>
<div class="col">
#Html.EditorFor(model => model.Body, new { htmlAttributes = new { #class = "form-control" } })
<script>
CKEDITOR.replace("Body", { htmlEncodeOutput: true });
</script>
#Html.ValidationMessageFor(model => model.Body, "", new { #class = "text-danger" })
</div>
</div>
i use CKEDITOR.instances['Body'].setData(#Model.Body); but it not work
but when i put this code in Edit view CKEditor Dont show returned model text
how can i set model string field to ckeditor?
you can use TextAreaFor instead of EditorFor:
<div class="row">
<div class="col">
#Html.LabelFor(model => model.Body, htmlAttributes: new { #class = "control-label col-md-2" })
</div>
<div class="col">
#Html.TextAreaFor(model => model.Body, new { htmlAttributes = new { #class = "form-control" } })
<script>
CKEDITOR.replace("Body", { htmlEncodeOutput: true });
</script>
#Html.ValidationMessageFor(model => model.Body, "", new { #class = "text-danger" })
</div>
</div>
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 this method for proccess "create" form in asp.net:
public ActionResult Create([Bind(Include = "question_id, feedback_id")] feedback_questions feedback_questions)
In form question_id I get from select box, but feedback_id I want to get by hidden value.
My form:
#using (Html.BeginForm()) {
#Html.AntiForgeryToken()
<div class="form-horizontal">
<h4>feedback_questions</h4>
<hr />
#Html.ValidationSummary(true, "", new { #class = "text-danger" })
<div class="form-group">
#Html.LabelFor(model => model.question_id, "choose question: ", htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.DropDownList("question_id", null, htmlAttributes: new { #class = "form-control" })
#Html.ValidationMessageFor(model => model.question_id, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.feedback_id, "", htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
// here I want hidden attribute for feedback_id, which will have value #ViewBag.feedback_id
#Html.ValidationMessageFor(model => model.question_id, "", 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-default" />
</div>
</div>
</div>
}
How can i do it?
Maybe feedback_id is being passed to the view from another view or layout, but since it's on your model, why not just pass it in to the Create view on the Get action
public ActionResult Create()
{
return View(new feedback_questions() { feedback_id = ?? });
}
[HttpPost]
public ActionResult Create([Bind(Include = "question_id, feedback_id")] feedback_questions feedback_questions)
{
return View(feedback_questions);
}
then you can just use the HiddenFor helper
#using (Html.BeginForm())
{
#Html.AntiForgeryToken()
#Html.HiddenFor(model => model.feedback_id)
<div class="form-horizontal">
<h4>feedback_questions</h4>
<hr />
#Html.ValidationSummary(true, "", new { #class = "text-danger" })
<div class="form-group">
#Html.LabelFor(model => model.question_id, "choose question: ", htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.DropDownList("question_id", null, htmlAttributes: new { #class = "form-control" })
#Html.ValidationMessageFor(model => model.question_id, "", 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-default" />
</div>
</div>
</div>
}
You can use Html.Hidden("feedback_id", #ViewBag.feedback_id) where feedback_id is the name of the hidden input, that should match the name of the property you are binding to.
I'm developed the MVC Project, I want to style My project, but its not working correctly; I can't style my forms. From control, button and Input areas how can I do it my project? I want to some help
My code
#model ContosoUniversity.Models.Student
#{
ViewBag.Title = "Create";
}
<h2>Create</h2>
#using (Html.BeginForm())
{
#Html.AntiForgeryToken()
<div class="form-horizontal">
<h4>Student</h4>
<hr />
#Html.ValidationSummary(true, "", new { #class = "text-danger" })
<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 class="form-group">
#Html.LabelFor(model => model.FirstMidName, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.FirstMidName, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.FirstMidName, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.EnrollmentDate, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.EnrollmentDate, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.EnrollmentDate, "", 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-default" />
</div>
</div>
</div>
}
<div>
#Html.ActionLink("Back to List", "Index")
</div>
#section Scripts {
#Scripts.Render("~/bundles/jqueryval")
}
you can add css in many ways. Best method is creating own css file and making it Bundles. Or you can place it in _Layout.cshtml head section:
<style>
.custom-class{
border:1px solid red;
}
</style>
Then using it is pretty simple:
<div class="form-group custom-class">
#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>
Hope this will help :)
You have to do the following steps :
Create your CSS file with styles rules you want to apply (you will easily find many tutorials for CSS file creation).
Add the created CSS file in a StyleBundle. To do this, go to the "BundleConfig.cs" file, and add the following line (replace the bundle name and CSS file path by real values) :
bundles.Add(new StyleBundle("~/NameOfTheBundle").Include("~/Content/YourCssFile.css"));
Add a reference to the created bundle into your cshtml file (between the < head > tags, on the top of the file) :
#Styles.Render("~/NameOfTheBundle")
A bundle is a file generated from one or several CSS (or javascript) files, by the .NET framework. It allows grouping CSS rules in a single file, to avoid client recovering many CSS files on your server (saving client/server requests).
Let me know if my answer is not clear enough.
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.