Develop Reference

Modal Dialog No Redirect

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>
}

Show <select> values in PartialView ASP.NET Core

I migrate project from ASP.NET MVC to ASP.NET Core
I was having Partial view with two daropdowns
So Controller method was like this
public ActionResult AddPeopleToProposal()
{
ViewBag.Worker = new SelectList(db.People, "Id", "FIO").ToList();
ViewBag.Proposal = new SelectList(db.Proposals, "Id", "Id").ToList();
return PartialView("AddPeopleToProposal");
}
And in View I was render it like this
<div class="modal fade" id="addPeopleToProposal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Добавить работника на заявку</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
#Html.Action("AddPeopleToProposal", "Manage")
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Отмена</button>
<button type="button" id="peopleToProposalCreate" class="btn btn-primary">Создать</button>
</div>
</div>
</div>
And Partial View
<form>
<div class="form-group">
<label for="recipient-name" class="col-form-label">Працівник</label>
#Html.DropDownList("Worker", null, "XXXX", htmlAttributes: new { #class = "form-control", #id = "peopleIdAdd" })
</div>
<div class="form-group">
<label for="recipient-name" class="col-form-label">Оберіть заявку</label>
#Html.DropDownList("Proposal", null, "XXXX", htmlAttributes: new { #class = "form-control", #id = "proposalIdAdd" })
</div>
<div class="form-group">
<label for="message-text" class="col-form-label">Коментар</label>
<input type="text" class="form-control" id="commentVchasno" >
</div>
But as I know #Html.Action was depricated
I realize this in Core like this
Controller
public ActionResult AddPeopleToProposal()
{
ViewData["Worker"] = new SelectList(_context.People, "Id", "FIO");
ViewData["Proposal"] = new SelectList(_context.Proposals, "Id", "Id");
return PartialView("Partials/AddPeopleToProposal");
}
And Partial View
<form>
<div class="form-group">
<label class="col-form-label">Працівник</label>
<select class="form-control" asp-items="ViewBag.Worker"></select>
</div>
<div class="form-group">
<label class="col-form-label">Оберіть заявку</label>
<select class="form-control" asp-items="ViewBag.Proposal"></select>
</div>
<div class="form-group">
<label class="col-form-label">Коментар</label>
<input type="text" class="form-control" id="commentVchasno" >
</div>
</form>
And View from where I cal Partial
<div class="modal fade" id="addPeopleToProposal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Добавить работника на заявку</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
#Html.Partial("Partials/AddPeopleToProposal")
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Отмена</button>
<button type="button" id="peopleToProposalCreate" class="btn btn-primary">Создать</button>
</div>
</div>
</div>
But at Core I don't have values in selects. Where is my problem?

If you want to initialize the page directly when getting the Partial View, try to put the following two lines of code into the get request of the main View of the Partial View. More about Partial views
ViewData["Worker"] = new SelectList(_context.People, "Id", "FIO");
ViewData["Proposal"] = new SelectList(_context.Proposals, "Id", "Id");
Or you could use the ViewComponent instead of the Partial View to get the fill data of the dropdownlists from the Invoke method in the view component class. Try to the code like below
ViewComponent.cs
public class AddPeopleToCountryViewComponent:ViewComponent
{
private readonly MVCDbContext _context;
public AddPeopleToCountryViewComponent(MVCDbContext context)
{
_context = context;
}
public async Task<IViewComponentResult> InvokeAsync(
int maxPriority, bool isDone)
{
ViewData["Customer"] = new SelectList(_context.Customer, "Id", "Name");
ViewData["Country"] = new SelectList(_context.Country, "Id", "Id");
return View();
}
}
The Default.cshtml of ViewComponent
<form>
<div class="form-group">
<label class="col-form-label">People</label>
<select class="form-control" asp-items="#ViewBag.Customer"></select>
</div>
<div class="form-group">
<label class="col-form-label">Country</label>
<select class="form-control" asp-items="#ViewBag.Country"></select>
</div>
<div class="form-group">
<label class="col-form-label">Comment</label>
<input type="text" class="form-control" id="commentVchasno">
</div>
Instead of the PartialView in the modal of the main view
<div class="modal-body">
#await Component.InvokeAsync("AddPeopleToCountry", new { })
</div>

Modal UI not working

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>

Make Label and Checkbox closer together in razor view

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>

Styling Kendo Window's content with Bootstrap

I have a generic Kendo Window that I call for different partial views. I can't style contents using bootstrap, as it causes different layouts in different browsers and elements are always cluttered.
This is a sample:
<div class="form-group form-inline">
<div class="line">
<div class="col-xs-6">
#Html.LabelFor(m => m.2, new { #class = "col-xs-4 control-label" })
#Html.DisplayFor(m => m.2)
</div>
<div class="col-xs-4">
#Html.LabelFor(m => m.3, new { #class = "col-xs-4 control-label" })
#Html.DisplayFor(m => m.3)
</div>
</div>
<div class="line">
<div class="col-xs-6">
#Html.LabelFor(m => m.4, new { #class = "col-xs-4 control-label" })
#Html.DisplayFor(m => m.4)
</div>
<div class="col-xs-4">
#Html.LabelFor(m => m.5, new { #class = "col-xs-4 control-label" })
#Html.DisplayFor(m => m.5)
</div>
</div>
</div>
<div class="clearfix"> </div>
<div class="clearfix"> </div>
#(Html.Kendo().Grid<Class...>()
....
And line:
.line{
line-height: 20px;
}
Am I missing something? I just want to have a 2-column layout. Can you give me an example please?

I don't know why, but I should use col-xs-5. Also, to keep elements inside a tab strip I have to put them inside a container.
<div class="container-fluid">
<div class="form-group form-inline col-xs-12">
<div class="col-xs-5"></div>
<div class="col-xs-5"></div>
</div>
<div class="form-group form-inline col-xs-12">
<div class="col-xs-5"></div>
<div class="col-xs-5"></div>
</div>
......
</div>
UPDATE
I found the solution at their documents.
First you need to add the following references.
<link rel="stylesheet" href="http://cdn.kendostatic.com/VERSION/styles/kendo.common-bootstrap.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/VERSION/styles/kendo.bootstrap.min.css">
And then add the following CSS to your site.css and include it in the page:
/* reset everything to the default box model */
*, :before, :after
{
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
/* set a border-box model only to elements that need it */
.form-control, /* if this class is applied to a Kendo UI widget, its layout may change */
.container,
.container-fluid,
.row,
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1,
.col-xs-2, .col-sm-2, .col-md-2, .col-lg-2,
.col-xs-3, .col-sm-3, .col-md-3, .col-lg-3,
.col-xs-4, .col-sm-4, .col-md-4, .col-lg-4,
.col-xs-5, .col-sm-5, .col-md-5, .col-lg-5,
.col-xs-6, .col-sm-6, .col-md-6, .col-lg-6,
.col-xs-7, .col-sm-7, .col-md-7, .col-lg-7,
.col-xs-8, .col-sm-8, .col-md-8, .col-lg-8,
.col-xs-9, .col-sm-9, .col-md-9, .col-lg-9,
.col-xs-10, .col-sm-10, .col-md-10, .col-lg-10,
.col-xs-11, .col-sm-11, .col-md-11, .col-lg-11,
.col-xs-12, .col-sm-12, .col-md-12, .col-lg-12
{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
And everything works fine, you should be able to use the following:
<div class="container-fluid">
<div class="form-group form-inline col-xs-12">
<div class="col-xs-6"></div>
<div class="col-xs-6"></div>
</div>
<div class="form-group form-inline col-xs-12">
<div class="col-xs-6"></div>
<div class="col-xs-6"></div>
</div>
......
</div>

You'll probably need something like this. Play with the column widths depending on your labels.
<div class="form-group form-inline">
<div class="col-xs-6">
#Html.LabelFor(m => m.2, new { #class = "control-label" })
</div>
<div class="col-xs-6">
#Html.DisplayFor(m => m.2)
</div>
</div>
<div class="form-group form-inline">
<div class="col-xs-6">
#Html.LabelFor(m => m.3, new { #class = "control-label" })
</div>
<div class="col-xs-6">
#Html.DisplayFor(m => m.3)
</div>
</div>
<div class="form-group form-inline">
<div class="col-xs-6">
#Html.LabelFor(m => m.4, new { #class = "control-label" })
</div>
<div class="col-xs-6">
#Html.DisplayFor(m => m.4)
</div>
</div>
<div class="form-group form-inline">
<div class="col-xs-6">
#Html.LabelFor(m => m.5, new { #class = "control-label" })
</div>
<div class="col-xs-6">
#Html.DisplayFor(m => m.5)
</div>
</div>