View Model :
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc.Rendering;
using System.ComponentModel.DataAnnotations;
namespace WebApplication1.Models
{
public class Testvm
{
[Display(Name ="COUNTRY")]
public List<string> LID { get; set; }
public List<SelectListItem> COUNTRY { get; set; }
}
}
Controller :
[HttpGet]
public IActionResult Test()
{
Testvm vm = new Testvm();
vm.COUNTRY = JRepository.Gets().Select(m => new SelectListItem { Value=m.JID.ToString(), Text=m.NAME }).ToList();
return View(vm);
}
[HttpPost]
public IActionResult Test(Testvm vm)
{
return View();
}
View :
@model WebApplication1.Models.Testvm
@{
ViewData["Title"] = "Test";
}
<form class="form-horizontal" asp-action="Test">
<div class="form-group">
<label class="control-label col-lg-4" asp-for="LID"></label>
<div class="col-lg-4">
<select style="width:450px" asp-for="LID" asp-items="Model.COUNTRY" multiple></select>
</div>
</div>
<div class="form-group">
<label class="control-label col-lg-4"></label>
<div class="col-lg-4">
<input type="submit" value="Save" class="btn btn-primary" />
</div>
</div>
</form>
<div>
<a asp-action="Index">Back to List</a>
</div>
<style>
.multiselect {
width:300px;
}
.multiselect-container{
width:300px;
}
</style>
@section Scripts {
@{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
<script type="text/javascript">
$(function () {
$('#LID').multiselect({
includeSelectAllOption: true,
selectAllValue: 'multiselect-all',
enableFiltering: true,
enableCaseInsensitiveFiltering: true,
});
});
</script>
Reset Multiselect :
$('#LID option:selected').each(function ()
{
$(this).prop('selected', false);
});
$('#LID').multiselect('refresh');
Reset Multiselect :
$('#LID option:selected').each(function ()
{
$(this).prop('selected', false);
});
$('#LID').multiselect('refresh');
}
Layout View :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>@ViewData["Title"] - WebApplication1</title>
<environment include="Development">
<link href="~/css/jquery-ui.css" rel="stylesheet" />
<link rel="stylesheet" href="~/css/site.css" />
<link href="~/css/DataTables/css/jquery.dataTables.css" rel="stylesheet" />
<link href="~/css/DataTables/css/jquery.dataTables_themeroller.css" rel="stylesheet" />
<link href="~/css/jquery.multiselect.css" rel="stylesheet" />
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
<link href="~/css/bootstrap-multiselect.css" rel="stylesheet" />
</environment>
<environment exclude="Development">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" />
<link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" />
</environment>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a asp-area="" asp-controller="Home" asp-action="Index" class="navbar-brand">WebApplication1</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a asp-area="" asp-controller="Home" asp-action="Index">Home</a></li>
<li><a asp-area="" asp-controller="Home" asp-action="About">About</a></li>
<li><a asp-area="" asp-controller="Home" asp-action="Contact">Contact</a></li>
</ul>
</div>
</div>
</nav>
<partial name="_CookieConsentPartial" />
<div class="container body-content">
@RenderBody()
<hr />
<footer>
<p>© 2019 - WebApplication1</p>
</footer>
</div>
<environment include="Development">
<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="~/js/jquery-ui.js"></script>
<script src="~/js/multiselect.js"></script>
<script src="~/js/DataTables/jquery.dataTables.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
<script src="~/js/bootstrap-multiselect.js"></script>
</environment>
<environment exclude="Development">
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.3.1.min.js"
asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
asp-fallback-test="window.jQuery"
crossorigin="anonymous"
integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"
asp-fallback-src="~/lib/bootstrap/dist/js/bootstrap.min.js"
asp-fallback-test="window.jQuery && window.jQuery.fn && window.jQuery.fn.modal"
crossorigin="anonymous"
integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd">
</script>
<script src="~/js/site.min.js" asp-append-version="true"></script>
</environment>
@RenderSection("Scripts", required: false)
</body>
</html>
No comments:
Post a Comment