I have this implementation for bootstrap modal with jquery. However, there are parts not showing when i do inspect element. Here is the code.
<div class="col-md-9 filter-header">
<i class="fa fa-plus fa-fws"></i> Add Role
</div>
Below, I have these to where the data to be put in.
<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="C2T Modal">
<div class="modal-dialog">
<div class="modal-content">
<!--Content Inside Here-->
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div>
I have jquery implementation to add the data.
$('.Roles')
.on('click', 'a[data-toggle="modal"]', function () { // show modal
$('.modal-content').load($(this).attr('href'));
})
.on('submit', '.ajaxForm', ajaxFormSubmit);
Here is the code to be put in the modal-content after calling the controller
#model C2T.Models.RoleViewModel
#{
ViewBag.Title = "Create Role";
Layout = null;
}
<div class="modalForm ">
#using (Html.BeginForm("CreateRole", "Admin", FormMethod.Post, new { #class = "ajaxForm", data_target = ".modalForm" }))
{
#Html.AntiForgeryToken()
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title"><i class="fa fa-user-plus fa-fw"></i> New Role</h4>
</div>
<div class="modal-body">
<div class="form-horizontal">
#Html.ValidationSummary(true, "", new { #class = "text-danger" })
<div class="form-group">
#Html.LabelFor(model => model.Name, htmlAttributes: new { #class = "control-label col-sm-3" })
<div class="col-sm-9">
#Html.EditorFor(model => model.Name, new { htmlAttributes = new { #class = "form-control input-sm" } })
#Html.ValidationMessageFor(model => model.Name, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.Description, htmlAttributes: new { #class = "control-label col-sm-3" })
<div class="col-sm-9">
#Html.EditorFor(model => model.Description, new { htmlAttributes = new { #class = "form-control input-sm" } })
#Html.ValidationMessageFor(model => model.Description, "", new { #class = "text-danger" })
</div>
</div>
</div>
</div>
<div class="modal-footer">
<span class="spinner pull-left"></span>
<input type="button" value="Cancel" class="btn btn-default" data-dismiss="modal" />
<input type="submit" value="Create" class="btn btn-primary" />
</div>
}
</div>
The Roles is the body class and I am sure that when I click the modal the jquery codes were triggered. For some reason, it does display the data and the modal but the UI is not working. This is how it looks like.
I have inspect element also and this is the result, 'modal-dialog' and 'modal-content' class were not included.
Does anyone has an idea how to fix this issue? Thanks in advance.
Follow the hierarchy of div's to construct modals as recommended by bootstrap so that the styles are applied correctly. Currently, you have modalForm that encloses modal-content. Move your custom code inside modal-body for the styles to be applied correctly. In the snippet below, insert your custom code inside the modal-body div.
<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="C2T Modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<!-- INSERT CUSTOM CODE HERE -->
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div>
Related
In my Application, In EDIT view I want to call data from the database and fill into the partial view that have sent through to the database when creates the request using same partial view . Currently my code I have written like below. But what happens is, If there is 4 records, It will generate 4 line, but there is no data there. All comes as empty.
<ul id="RequItms" style="list-style-type: none">
#if (Model != null && Model.GeneralItmsList != null)
{
foreach (var item in Model.GeneralItmsList)
{
Html.RenderAction("GeneralItmsPartialView", "AppRequests", Model.GeneralItmsList.ToList());
}
}
</ul>
Here is the view. This is the view I'm currently getting from the above code.
But this is the way it should load in that empty fields.
I have checked in the Model.GeneralItemsList There is shows the data, But I think when parsing it to the partial view must be the error occurs.
Here is the partial view code looks like.
#model Asp_PASMVC.Models.GeneralItms
#using Asp_PASMVC.Infrastructure
<li style="padding-bottom:15px">
#using (Html.BeginCollectionItem("GeneralItmsList"))
{
#Html.HiddenFor(model => model.TempID)
<div class="form-horizontal" id="quickForm" novalidate="novalidate">
#Html.ValidationSummary(true, "", new { #class = "text-danger" })
<div class="row">
<div class="col-md-5 col-sm-6">
<div class="form-group">
Select Item Description
<div class="col-md-10">
#Html.EditorFor(model => model.Attachment_Description, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.Attachment_Description, "", new { #class = "text-danger" })
</div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="form-group">
Attachment Amount
<div class="col-md-10">
<div class="input-group-prepend">
<span class="input-group-text">Rs.</span>
#Html.EditorFor(model => model.Attachment_Amount, new { htmlAttributes = new { #class = "form-control" } })
</div>
#Html.ValidationMessageFor(model => model.Attachment_Amount, "", new { #class = "text-danger" })
</div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="form-group">
Attachment
<div class="col-md-10">
<input type="file" name="ImageData#(Model.TempID.ToString())" id="ImageData#(Model.TempID.ToString())" multiple="multiple" data-id="Img#(Model.TempID.ToString())" onchange="checkImage(this)" />
#Html.ValidationMessageFor(model => model.Attachment, "", new { #class = "text-danger" })
</div>
</div>
<img id="Img#(Model.TempID.ToString())" src="" alt="" width="100" height="100" class="ml-1" />
</div>
<button type="button" class="btn btn-danger" onclick="$(this).parent().remove();">Remove</button>
</div>
</div>
}
</li>
I hope that I have explained this question properly. Thanks for the support.
I am trying to add a partial view [Create view] inside a details view, capturing the ID as parameter, but it always displays a different error.
I have been looking for a solution and the reason why it fails but there is no a good answer or good tutorial to make this possible.
Details view:
#model HumanForceMVC1._1.HF_Projects
#{
ViewBag.Title = "Details";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<div class="slim-mainpanel">
<div class="container">
<div class="slim-pageheader">
<ol class="breadcrumb slim-breadcrumb">
<li class="breadcrumb-item">Home</li>
<li class="breadcrumb-item">Create new task</li>
</ol>
<!-- Modal -->
<div class="modal fade" id="addNewTaskModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
#*#Html.RenderPartial("AddTaskToProject", Model.HF_Tasks, new ViewDataDictionary { { Pid = Model.Id } })*#
#Html.Partial("AddTaskToProject", Model.HF_Tasks, new ViewDataDictionary { { "Pid", Model.Id } })
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
My controller:
[HttpPost]
public ActionResult AddTaskToProject(int Pid, HF_Tasks Item)
{
using (var context = new HumanForceDBEntities())
{
HF_Tasks myTask = new HF_Tasks();
myTask = Item;
myTask.ProjectAssigned = Pid;
myTask.TaskStatus = 2;
myTask.TaskDate = DateTime.Now;
context.HF_Tasks.Add(myTask);
context.SaveChanges();
return PartialView();
}
}
My Partial View:
#using (Html.BeginForm())
{ #Html.AntiForgeryToken()
<div class="form-horizontal">
<h4>HF_Tasks</h4>
<hr />
#Html.ValidationSummary(true, "", new { #class = "text-danger" })
<div class="form-group">
#Html.LabelFor(model => model.TaskName, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.TaskName, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.TaskName, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.TaskDescription, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.TaskDescription, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.TaskDescription, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.PersonAssigned, "PersonAssigned", htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.DropDownList("PersonAssigned", null, htmlAttributes: new { #class = "form-control" })
#Html.ValidationMessageFor(model => model.PersonAssigned, "", 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>
}
Please, somebody who can help me with this.
I appreciate in advance.
You need to add the #model ...HF_Tasks in the partial view on the top similar to what you have in the detail view.
I use C# MVC version 5. I have a form in a modal dialog, which uses a partial view. I want to submit the form and not redirect. I just want the dialog to close. Can this be done?
Here is my code:
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header bg-success">
<button type="button" class="close" data-dismiss="modal">×</button>
<h5 class="modal-title">#title</h5>
</div>
#using (Html.BeginForm("Edit", "Region", FormMethod.Post, new { onsubmit = "return validateForm();", #class = "form-horizontal" }))
{
<div class="modal-footer">
<button type="button" class="btn btn-link" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-success">Submit form</button>
</div>
}
</div>
</div>
public ActionResult Edit(int id)
{
RegionViewModels regionViewModels = MakeRegionViewModels(id);
return PartialView("_InsertTaxRegion", regionViewModels);
}
With jQuery you can just serialize the form data and send it to the server in the background and you can close your modal, here is an example:
How to use jquery $.post() method to submit form values
If you are using <input type="submit" /> instead of <button type="button">Submit</button> then you'll need to prevent your form from submitting like this:
Using JQuery - preventing form from submitting
You can do this with a Bootstrap modal without the jQuery code.
On the page where I want to display the modal. Your modal form (PartialView) will display on top of the view you're already on.
<button id="btn" type="button" class="btn btn-info btn-lg" data-toggle="modal" data- target="#myModal">Open Modal</button>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog" data-toggle="modal">
<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">Modal Header</h4>
</div>
<div class="modal-body">
#Html.Partial("Modal");
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default"
data-dismiss="modal">Close</button>
</div>
</div>
</div>
Your modal displays in a PartialView...
#model NCR.Models.Employee
#{
ViewBag.Title = "Edit";
}
<h2>Edit</h2>
#using (Html.BeginForm())
{
#Html.AntiForgeryToken()
<div class="form-horizontal">
<div class="form-group">
#Html.LabelFor(model => model.FIRST_NAME, htmlAttributes:
new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.FIRST_NAME,
new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.FIRST_NAME, "",
new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.LAST_NAME, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.LAST_NAME, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.LAST_NAME, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Update" class="btn btn-default" />
</div>
</div>
}
I need to make a table with a password reset modal in it and I have a div with the html partial for the reset password view in it. Inside the partial it has a beginform that isn't ever getting called. Also the manage method in the controller is never getting called either. Any idea why?
Could it be because of the fact I have a form outside the html partial too?
_ChangePasswordPartial.cshtml
#using Microsoft.AspNet.Identity
#model Spectrum.Models.ManageUserViewModel
#*<p>You're logged in as <strong>#User.Identity.GetUserName()</strong>.</p>*#
#using (Html.BeginForm("Manage", "User", FormMethod.Post, new { #class = "form-horizontal", role = "form" }))
{
#Html.AntiForgeryToken()
<h4>Change Password Form</h4>
<hr />
#Html.ValidationSummary()
<div class="form-group">
#Html.LabelFor(m => m.OldPassword, new { #class = "col-md-2 control-label" })
<div class="col-md-10">
#Html.PasswordFor(m => m.OldPassword, new { #class = "form-control" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(m => m.NewPassword, new { #class = "col-md-2 control-label" })
<div class="col-md-10">
#Html.PasswordFor(m => m.NewPassword, new { #class = "form-control" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(m => m.ConfirmPassword, new { #class = "col-md-2 control-label" })
<div class="col-md-10">
#Html.PasswordFor(m => m.ConfirmPassword, new { #class = "form-control" })
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Change password" class="btn btn-primary" />
</div>
</div>
}
Index.html
<div class="modal fade" id="modalResetPassword" tabindex="-1" role="dialog">
<div class="modal-dialog" style=" max-height:50%; margin-top: 50px; margin-bottom:50px;">
<div class="modal-content" style="max-height:50%">
<form name="ResetPassword" role="form" data-ng-submit="formUser.$valid && vm.saveActiveUser()">
<div class="modal-header btn-info">
<button type="button" class="close" data-close-modal data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title whitetext">Manage User {{vm.activeUser.UserName}}</h4>
<div class="modal-body" style="padding-left: 7px; padding-top: 0px; height: 550px;">
#Html.Partial("~/Areas/Administration/Views/Shared/_ChangePasswordPartial.cshtml")
</div>
</div>
</form>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
You are having nested forms ! One in your index.cshtml and one in your partial view. Nested forms are not valid!
Also i see you have some javascript/angular method for your outer form submit
Remove the outerform and everything will work fine (Assuming you do not have any javascript code which is intercepting the submit event and preventing the default form submit behavior.
<div class="modal fade" id="modalResetPassword" tabindex="-1" role="dialog">
<div class="modal-dialog" style=" max-height:50%; margin-top: 50px; margin-bottom:50px;">
<div class="modal-content" style="max-height:50%">
<div class="modal-header btn-info">
<button type="button" class="close" data-close-modal data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title whitetext">Manage User {{vm.activeUser.UserName}}</h4>
<div class="modal-body" style="padding-left: 7px; padding-top: 0px; height: 550px;">
#Html.Partial("~/Areas/Administration/Views/Shared/_ChangePasswordPartial.cshtml")
</div>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
Also make sure to use the correct action method name in your partial view's Html.BeginForm method call.
I have a label and a checkbox in my view that I would like next to each other. However, as you can see in this picture I cannot get them any closer.
Here is my view code:
#using (Html.BeginForm("AddTechNote", "Ticket", FormMethod.Post)) { #Html.AntiForgeryToken()
<div class="form-group">
#Html.HiddenFor(model => model.TicketId)
<div class="col-md-12 col-xs-12">
<div class="col-md-3">
#Html.Label("New Note", new { #class = "control-label" })
</div>
<div class="col-md-1" style="text-align: right">
#Html.Label("Public", new { #class = "control-label" })
</div>
<div class="col-md-1">
#Html.CheckBox("PublicNote", new { #class = "chk=style", #checked = "checked" })
</div>
</div>
<div class="col-md-12 col-xs-12">
#Html.TextArea("Note", new { cols = 600, #rows = 5 })
</div>
<div class="form-group">
<div class="col-md-2">
<input type="submit" value="Add" class="btn btn-default" />
</div>
#*<div class="col-md-1 col-lg-offset-1">
</div>
*#
</div>
</div>
}
Jesus,
This is what I get with the code you provided. Thank you for your help so far.
You can do following:
Use only one div for both label and checkbox like:
<div class="col-md-1" style="text-align: right">
#Html.Label("Public", new { #class = "control-label" })
#Html.CheckBox("PublicNote", new { #class = "chk=style", #checked = "checked" })
</div>
The label need to wrap the input.
You need to change your Razor view, something like this:
<div class="#Model.ControlDimension">
<div class="checkbox #Model.CheckBoxDivClasses">
<label for="#Model.ControlName">#Html.Raw(Model.Label)#Model.ControlFor</label>
#Model.ValidationMessageFor
</div>
</div>
The control needs to be inside the label element.
In your case, I think ...:
<div class="col-md-2">
<div class="checkbox">
<label for="PublicNote">
Public
#Html.CheckBox("PublicNote", new { #class = "chk=style", #checked = "checked" })
</label>
</div>
</div>