How to do products sorting? - asp.net-mvc

I need to make a food ordering site for a university graduation project and I have no previous experience in the subject. I did most of the site, but I want to sort with the blue buttons in the menu, but I couldn't do it. I created #Html.ActionLink Name and Price links to try it but it doesn't work. That's why I couldn't assign tasks to the blue buttons. Alphabetically, best seller, price ascending, price descending. Can you help me?
Controller
```
public class MenuController : Controller
{
// GET: Menu
Context c = new Context();
public ActionResult Index(string sortBy)
{
ViewBag.SortNameParameter = string.IsNullOrEmpty(sortBy) ? "Name desc" : "";
ViewBag.SortPriceParameter = sortBy == "Price" ? "Price desc" : "Price";
var uruns = c.Uruns.AsQueryable();
switch(sortBy)
{
case "Name desc":
uruns = uruns.OrderByDescending(x => x.UrunAdi);
break;
case "Price desc":
uruns = uruns.OrderByDescending(x => x.UrunFiyat);
break;
case "Price":
uruns = uruns.OrderBy(x => x.UrunFiyat);
break;
default:
uruns = uruns.OrderBy(x => x.UrunAdi);
break;
}
Context _db = new Context();
Menu vm = new Menu();
//vm.Deger1 = (_db.Uruns.Where(i=>i.Durum)&&_db.Kategoris.Where(i=>i.Durum)).ToList();
vm.Deger1 = _db.Uruns.Where(i=>i.Durum).ToList();
vm.Deger2 = _db.Kategoris.Where(i=>i.Durum).ToList();
return View(vm);
}
View
<ul class="filters_menu">
<li class="active" data-filter="*">All</li>
#foreach (var k in Model.Deger2)
{
if (k.Durum != false)
{
<li class="" data-filter=".#k.KategoriAdi">#k.KategoriAdi</li>
}
}
</ul>
<p class="filters_menu">
<button class="btn btn-primary btn-round" type="button">A/Z</button>
<button class="btn btn-primary btn-round" type="button">En çok satan</button>
<button class="btn btn-primary btn-round" type="button">Fiyat (Artan)</button>
<button class="btn btn-primary btn-round" type="button">Fiyat (Azalan)</button>
#Html.ActionLink("Name", "Index", new { sortBy = ViewBag.SortNameParameter })
#Html.ActionLink("Price", "Index", new { sortBy = ViewBag.SortPriceParameter })
</p>
<div class="filters-content">
<div class="row grid">
#foreach (var item in Model.Deger1.OrderBy(item => item.UrunFiyat))
{
//if (item. != false)
//{
using (Html.BeginForm("SepeteEkle", "Sepet", FormMethod.Post, new { Id = item.Urunid }))
{
<div class="col-sm-6 col-lg-4 all #item.Kategori.KategoriAdi">
<div class="box">
<div>
<div class="img-box">
<img src="#item.UrunGorsel" alt="">
</div>
<div class="detail-box">
<h5>
#item.UrunAdi
</h5>
<div class="options">
<h6>
#item.UrunFiyat ₺
</h6>
<input name="Id" value="#item.Urunid" type="hidden" />
<input name="qty" class="form-control" type="number" name="" value="1" max="10" min="1" style="max-width: 60px; min-width: 60px;" />
<input type="submit" value="Sepete Ekle" class="btn btn-success btn-circle" />
#*<button class="btn btn-success btn-circle" type="button">Sepete Ekle</button>*#
</div>
</div>
</div>
</div>
</div>
}
}
</div>
</div>
</div>
```
[Menu][1]
[1] : https://i.stack.imgur.com/M1SVO.jpg

Related

How to disable buttons based on data model values?

I am building a mini online shopping CMS project for collage.
I finished the project and now I want to add a feature where I have limited quantity of products.
When the quantity is equal to 0 then product is shown as 'out of stock' and my 'Add to cart' button becomes disabled.
I have added a 'quantity' property to my product class and now I need to change something in the Index view of the product.
I tried few options and it does not seem to work.
Here is the code for the Index.cshtml page.
#model IEnumerable
<Product>
#{ ViewData["Title"] = "Products"; }
<h1 class="display-4 pb-5">All Products</h1>
<div class="row">
#foreach (var item in Model)
{
<div class="col-4">
<div class="ajaxbg d-none">
<img src="~/Images/ajax_loader.gif" />
<p class="lead alert alert-success text-center d-none">
The product has been added!
</p>
</div>
<img src="~/Media/Products/#item.Image" class="img-fluid" alt="" />
<h4>#item.Name</h4>
<div>
#Html.Raw(item.Description)
</div>
<p>
#item.Price.ToString("C2")
</p>
<p>
<a asp-controller="Cart" asp-action="Add" asp-route-id="#item.Id" data-id="#item.Id" id="addToCartButton" class="btn btn-primary addToCart">Add to cart</a>
</p>
#if (item.Quantity == 0) { }
</div>
}
#if (ViewBag.TotalPages > 1) {
<div class="d-flex w-100 justify-content-center">
<pagination page-count="#ViewBag.TotalPages" page-target="/products" page-number="#ViewBag.PageNumber" page-range="ViewBag.PageRange"></pagination>
</div>
}
</div>
#section Scripts {
<script>
function DisableBtn() {
document.getElementById("addToCartBUtton").disabled = true;
}
$(function() {
$("a.addToCart").click(function(e) {
e.preventDefault();
let ajaxDiv = $(this).parent().parent().find("div.ajaxbg");
ajaxDiv.removeClass("d-none");
let id = $(this).data("id");
$.get('/cart/add/' + id, {}, function(data) {
$("div.smallcart").html(data);
ajaxDiv.find("img").addClass("d-none");
ajaxDiv.find("p").removeClass("d-none");
setTimeout(() => {
ajaxDiv.animate({
opacity: 0
}, function() {
$(this).addClass("d-none").fadeTo(.1, 1);
$(this).find("img").removeClass("d-none");
$(this).find("p").addClass("d-none");
});
});
});
});
});
</script>
}
Try this
#If(Model!=null)
{
#foreach (var item in Model)
{
..........
<p>
#if (item.Quantity == 0) {
<a disabled class="btn btn-primary addToCart">Add to cart</a>
}
else
{
<a asp-controller="Cart" asp-action="Add" asp-route-id="#item.Id" data-id="#item.Id" id="addToCartButton" class="btn btn-primary addToCart">Add to cart</a>
}
</p>
}
}

AngularJs , MVC During the Edit mode why Values not Binding in DropdownList

Im using Mvc with Angularjs here I am fetching data from Database using join and Display data in table when i click on Edit button that particular row is binding in Bootstrap "modal" but why country,State Names not binding in the dropdown.
Here i'm showing Linq query:
public JsonResult GetAssData()
{
var x = (from n in db.Accessors
join ctr in db.Countrys on n.CountryID equals ctr.CountryID
join sts in db.States on n.StateID equals sts.StateID
select new { n.Id, n.Name, n.Email, n.Password, n.GEnder, n.Active, ctr.CountryName, sts.StateName, });
return new JsonResult { Data = x, JsonRequestBehavior = JsonRequestBehavior.AllowGet };
}
public JsonResult EditSer(int id = 0)
{
var x = (from n in db.Accessors
where n.Id == id
join ctr in db.Countrys on n.CountryID equals ctr.CountryID
join sts in db.States on n.StateID equals sts.StateID
select new
{
n.Id,
n.Name,
n.Email,
n.Password,
n.GEnder,
ctr.CountryName,
sts.StateName,
});
return new JsonResult { Data = x, JsonRequestBehavior = JsonRequestBehavior.AllowGet };
}
public JsonResult BindCtry()
{
var x = from n in db.Countrys select n;
return new JsonResult { Data = x, JsonRequestBehavior = JsonRequestBehavior.AllowGet };
}
public JsonResult BindStates(int Id = 0)
{
var x = from n in db.States
where n.CountryID == Id
select n;
return new JsonResult { Data = x, JsonRequestBehavior = JsonRequestBehavior.AllowGet };
}
AngularJs
app.controller('MyBindCNtrls', function ($scope, MyBindServiceservice) {
GetAssusData();
function GetAssusData() {
var xxx = MyBindServiceservice.getAss();
xxx.then(function (d) {
$scope.access = d.data;
})
}
$scope.EditEmp = function (Emp) {
alert('in EditModes')
var sss = MyBindServiceservice.EditAssFun(Emp.Id);
sss.then(function (d) {
$scope.Id = Emp.Id;
$scope.Name = Emp.Name;
$scope.GEnder = Emp.GEnder;
$scope.Email = Emp.Email;
$scope.Password = Emp.Password;
$scope.CountryID = Emp.CountryID;
$scope.CountryName = Emp.CountryName;
$scope.StateName = Emp.StateName;
$scope.ValidAction = 'Update';
$('#Modalpopup').modal('show');
})
}
})
app.service('MyBindServiceservice', function ($http) {
this.getAss = function () {
var xx = $http({
url: '/Bindctrl/GetAssData',
method: 'Get',
params: JSON.stringify(),
content: { 'content-type': 'application/Json' }
})
return xx;
}
this.EditAssFun = function (Id) {
alert('enter in edit ser')
var sts = $http({
url: '/Bindctrl/EditSer',
method: 'Get',
params: {
Id: JSON.stringify(Id)
}
});
return sts;
}
});
<div ng-controller="MyBindCNtrls">
<table class="table table-bordered">
<tr>
<th><b>Id</b></th>
<th><b>Name</b></th>
<th><b>Email</b></th>
<th><b>Password</b></th>
<th><b>Gender</b></th>
<th><b>CountryName</b></th>
<th><b>StateName</b></th>
<th><b>Action</b></th>
</tr>
<tr ng-repeat="Accessor in access">
<td>{{Accessor.Id}}</td>
<td>{{Accessor.Name}}</td>
<td>{{Accessor.Email}}</td>
<td>{{Accessor.Password}}</td>
<td>{{Accessor.GEnder}}</td>
<td>{{Accessor.CountryName}}</td>
<td>{{Accessor.StateName}}</td>
<td>
<button type="button" class="btn btn-success btn-sm" value="Edit" ng-click="EditEmp(Accessor)"><span class="glyphicon glyphicon-pencil"></span></button>
</td>
</tr>
</table>
<div class="modal" id="Modalpopup">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button class="close" data-dismiss="modal">×</button>
<h3>{{msg}}Login Details</h3>
</div>
<div class="modal-body">
<form novalidate name="f1" ng-submit="SaveDb(Ass)">
<div>
{{Errormsg}}
</div>
<div class="form-horizontal">
<div class="form-group">
<div class="row">
<div class="col-sm-2" style="margin-left:20px">
Name
</div>
<div class="col-sm-8">
<input type="text" class="form-control" name="nam" ng-model="Name" ng-class="Submittes?'ng-dirty':''" required autofocus />
<span class="Error" ng-show="(f1.nam.$dirty || Submittes) && f1.nam.$error.required">Enter Name</span>
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-sm-2" style="margin-left:20px">
Email
</div>
<div class="col-sm-8">
<input type="text" class="form-control" name="MailId" ng-model="Email" ng-class="Submittes?'ng-dirty':''" required />
<span class="Error" ng-show="(f1.MailId.$dirty || Submittes) && f1.MailId.$error.required">Enter Email</span>
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-sm-2" style="margin-left:20px">
Password
</div>
<div class="col-sm-8">
<input type="text" name="psw" class="form-control" ng-model="Password" ng-class="Submittes?'ng-dirty':''" required />
<span class="Error" ng-show="(f1.psw.$dirty || Submittes) && f1.psw.$error.required">Enter Password</span>
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-sm-2" style="margin-left:20px">
Gender
</div>
<div class="col-sm-8">
<input type="radio" value="Male" name="Gen" ng-model="GEnder" ng-class="Submittes?'ng-dirty':''" required />Male
<input type="radio" value="Fe-Male" name="Gen" ng-model="GEnder" ng-class="Submittes?'ng-dirty':''" required />Fe-Male
<br />
<span class="Error" ng-show="(f1.Gen.$dirty || Submittes) && f1.Gen.$error.required">Select Gender</span>
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-sm-2" style="margin-left:20px">
Country
</div>
<div class="col-sm-8">
<select class="form-control" name="cntrsy" ng-options="I.CountryID as I.CountryName for I in CountryList" ng-model="CountryID" ng-change="GetStates()" ng-class="Submittes?'ng-dirty':''" required>
<option value="">Select Country</option>
</select>
<span class="Error" ng-show="(f1.cntrsy.$dirty || Submittes) && f1.cntrsy.$error.required">Select Country</span>
{{CountryName}}
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-sm-2" style="margin-left:20px">
StateName
</div>
<div class="col-sm-8">
<select class="form-control" name="sts" ng-options="I.StateID as I.StateName for I in StateList" ng-model="StateID" ng-change="GetCitys()" ng-class="Submittes?'ng-dirty':''" required>
<option value="">Select Country</option>
</select>
<span class="Error" ng-show="(f1.sts.$dirty || Submittes) && f1.sts.$error.required">Select States</span>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<input type="submit" class="btn btn-sm btn-success pull-right" value="{{ValidAction}}" ng-class="SaveAndSubmit()" />
#* <input type="button" class="btn btn-sm pull-right" value="Cancel" id="BtnCancel" />*#
</div>
</form>
</div>
</div>
</div>
</div>
</div>

MVC Razor Dropdownlist value get reset when clicking on WebGrid paging

I've been stuck almost two days now and still couldn't find a solution.
I have a WebGrid in a partial view, and I'm loading it inside the main view which has 4 search fields.
I'm using Request.IsAjaxRequest() to identify which view has to be loaded.
If it's an Ajax call I return the Partial View else the Main View. If I return the "Main View" the Dropdownlist value get reset as it refresh. I want to keep the Dropdownlist value selected by the user after the results has been loaded.
Here's my Main View,
<div class="row">
#if (Model != null)
{
<div class="col-md-4 col-lg-3">
<div class="well well-sm well-min-height well-panel-remove-top-padding">
<div class="form-group">
#Html.Label("Search by State", new { #class = "form-font-size label-margin-top" })
#Html.DropDownList("stateList", (SelectList)ViewBag.StatesList, "ALL", new { #class = "form-control", #id = "ddlState" })
#*<select class="form-control" id="ddlState">
<option value="0">ALL</option>(SelectList)ViewBag.StatesList
<option value="1">NT</option>
<option value="2">WA</option>
<option value="3">QLD</option>
</select>*#
</div>
</div>
</div>
<div class="col-md-4 col-lg-3">
<div class="well well-sm well-min-height well-panel-remove-top-padding">
<div class="form-group">
#Html.Label("Search by Job Id", new { #class = "form-font-size label-margin-top" })
<input type="text" value="#ViewBag.JobId" id="txtName" class="form-control uppercase" />
#*<div class="col-sm-7 col-md-6">
<input type="text" id="txtName" class="form-control uppercase form-control-search-panel-textbox-height" />
</div>*#
</div>
</div>
</div>
<div class="col-md-4 col-lg-3">
<div class="well well-sm well-min-height well-panel-remove-top-padding">
<div class="form-group">
#Html.Label("Search by Client", new { #class = "form-font-size label-margin-top" })
<input type="text" value="#ViewBag.Client" id="txtClientName" class="form-control uppercase" />
#*<div class="col-sm-7 col-md-6">
<input type="text" id="txtClientName" class="form-control uppercase form-control-search-panel-textbox-height" />
</div>*#
</div>
</div>
</div>
<div class="col-md-4 col-lg-3">
<div class="well well-sm well-min-height well-panel-remove-top-padding">
<div class="form-group">
#Html.Label("Search by Location", new { #class = "form-font-size label-margin-top" })
<input type="text" value="#ViewBag.Location" id="txtLocation" class="form-control uppercase" />
#*<div class="col-sm-7 col-md-6">
<input type="text" id="txtClientName" class="form-control uppercase form-control-search-panel-textbox-height" />
</div>*#
</div>
</div>
</div>
<div class="col-xs-12 col-sm-8 increase-bottom-padding">
<span class="glyphicon glyphicon-search glyphicon-margin-right"></span>All Jobs
<span class="glyphicon glyphicon-search glyphicon-margin-right"></span>My Jobs
</div>
<div id="grid">
#Html.Partial("_JobInstructionWebGridPartial")
</div>
}
else
{
<div class="col-xs-12 col-sm-8 increase-bottom-padding-job remove-left-right-padding">
<span class="glyphicon glyphicon-search glyphicon-margin-right"></span>All Jobs
</div>
#:<div class="col-md-12 alert alert-danger"><strong>You don't have any jobs, If you want to search any Job please click on "'All Jobs'" ..</strong></div>
}
</div>
Here's my Partial View
#model IEnumerable<SurveyManagement.Models.Job.ViewModel_JobInstruction_WebGrid>
#{
if (Model != null)
{
var grid = new WebGrid(source: Model, canPage: true, canSort: false, rowsPerPage: 10, ajaxUpdateContainerId: "jobgridcontent");
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="table-responsive">
<div class="table" id="tbljobbook">
#grid.GetHtml(tableStyle: "table table-striped table-bordered table-hover",
headerStyle: "jobinstruction-webgrid-header",
footerStyle: "webgrid-footer",
alternatingRowStyle: "webgrid-alternating-row",
selectedRowStyle: "webgrid-selected-row",
rowStyle: "webgrid-row-style",
columns:
grid.Columns(
grid.Column("JobId", header: "Job Id", style: "jobinstruction-row-style col-md-1", format: #<text><label class="lblJobId">#item.JobId</label> </text>),
grid.Column("ClientName", header: "Client Name", style: "col-md-2 job-webgrid-column-max-width uppercase"),
grid.Column("JobLocation", header: "Job Location", style: "col-md-2 job-webgrid-column-max-width"),
grid.Column("JobDescription", header: "Job Description", style: "col-md-2 job-webgrid-column-max-width"),
grid.Column("JobStatus", header: "Job Status", style: "jobinstruction-row-style col-md-1 uppercase"),
grid.Column("Action", format: #<text>
<button type="button" class="edit-user btn btn-info btn-social-icon btn-sm" data-placement="top" data-toggle="tooltip" title="Edit Job"><i class="fa fa-list"></i></button>
<button type="button" class="job-entry-swr btn btn-tumblr btn-social-icon btn-sm" data-placement="top" data-toggle="tooltip" title="SWR List"><i class="fa fa-list"></i></button>
<button type="button" class="job-entry-swr-new btn btn-facebook btn-social-icon btn-sm" data-placement="top" data-toggle="tooltip" title="New SWR"><i class="fa fa-list"></i></button>
<button type="button" class="job-entry-view btn btn-primary btn-social-icon btn-sm" data-placement="top" data-toggle="tooltip" title="Field Entry List"><i class="fa fa-list"></i></button>
<button type="button" class="job-entry-create btn btn-warning btn-social-icon btn-sm" data-placement="top" data-toggle="tooltip" title="New Field Entry"><i class="fa fa-list"></i></button>
<button type="button" class="job-entry-admin btn btn-danger btn-social-icon btn-sm" data-placement="top" data-toggle="tooltip" title="Admin"><i class="fa fa-list"></i></button></text>, style: "col-md-4 jobinstruction-row-style", canSort: false)
))
</div>
</div>
</div>
}
Calling the Controller Action on Dropdownlist change event,
$(document).ready(function () {
$('#ddlState').change(function () {
$.ajax({
type: "GET",
url: '#Url.Action("SearchJobDetails")',
data: { jobId: $('#txtName').val(), client: $('#txtClientName').val(), location: $('#txtLocation').val(), state: $("#ddlState option:selected").text() },
success: function (data) {
$('#grid').html(data);
}
});
});
});
Here is my Controller Action,
public ActionResult SearchJobDetails(string jobId = null, string client = null, string location = null, string state = null)
{
try
{
ViewBag.IsRecordsSave = false;
ViewBag.sectionid = 1;
ViewBag.Location = location;
ViewBag.Client = client;
ViewBag.JobId = jobId;
List<States> StateList = Enum.GetValues(typeof(States)).Cast<States>().ToList();
ViewBag.StatesList = new SelectList(StateList);
ViewBag.SelectedState = state;
if (Request.IsAjaxRequest())
{
return PartialView("_JobInstructionWebGridPartial", GetJobDetails(jobId, client, 0, location, state));
}
else
{
return View("JobInstructionsDetails", GetJobDetails(jobId, client, 0, location, state));
}
}
}
As you can see in the above controller, ViewBag.StatesList is where I assign the States in my Enum. If I return the View (else part), the dropdownlist value get reset. I managed to keep the input text box values by putting value="#ViewBag.Location" so it set the values back from ViewBag. How do I do that for the Dropdownlist? Please help.
You need to use Html.DropdownlistFor Just modify the code as shown in the example below.where m.jobID is the selected value. To keep the value after postback its wise to use Model always.
#Html.DropDownListFor(m => m.jobID, new SelectList(Model.Clients, "ID", "ClientName"),new { #class = "form-control" })

ASP.Net MVC Show/Hide Content

Ok I have the following View
#model IEnumerable<WebApplication3.Models.user>
#{
ViewBag.Title = "Password Management";
Layout = "~/Views/Shared/_Layout.cshtml";
}
#section title {<h1>#ViewBag.Title</h1>}
<div id="page-block" class="page-block-three row">
<div style="margin-top: 30px;" class="col-lg-offset-2 col-lg-8">
#using (Html.BeginForm())
{
<div class="input-group">
#Html.TextBox("SearchString", null, new { #class = "form-control ccl-form", #style = "z-index: 10", #placeholder = "Enter Username"})
<div class="input-group-btn">
<button class="btn ccl-btn ccl-btn-red ccl-btn-search" type="submit"><i class="fa fa-search"></i></button>
</div>
</div>
}
</div>
<div class="col-lg-offset-3 col-lg-6">
#foreach (var item in Model)
{
<div class="details-block">
#Html.DisplayFor(modelItem => item.UserName)
<button type="button" class="btn ccl-btn ccl-btn-green ccl-btn-search pull-right">Select User</button>
</div>
}
</div>
</div>
What I want to be able to do is hide the following div
<div class="col-lg-offset-3 col-lg-6">
#foreach (var item in Model)
{
<div class="details-block">
#Html.DisplayFor(modelItem => item.UserName)
<button type="button" class="btn ccl-btn ccl-btn-green ccl-btn-search pull-right">Select User</button>
</div>
}
</div>
Then show that Div when the submit button is clicked
My Controller looks like the following
public class PasswordController : Controller
{
private CCLPasswordManagementDBEntities db = new CCLPasswordManagementDBEntities();
public ActionResult Search(string searchString)
{
var users = from x in db.users select x;
if (!String.IsNullOrEmpty(searchString))
{
users = users.Where(x => x.UserName.ToUpper().Contains(searchString.ToUpper()));
}
return View(users);
}
}
At the moment the div is constantly shown and updates when the submit button is pressed but I want to hide that div until someone presses the submit button then it can show.
Thanks in advance for the help.
Change your code in the controller to this:
public ActionResult Search(string searchString)
{
var users = from x in db.users select x;
ViewBag.ShowList = false;
if (!String.IsNullOrEmpty(searchString))
{
ViewBag.ShowList = true;
users = users.Where(x => x.UserName.ToUpper().Contains(searchString.ToUpper()));
}
return View(users);
}
And change your view to this:
#model IEnumerable<WebApplication3.Models.user>
#{
ViewBag.Title = "Password Management";
Layout = "~/Views/Shared/_Layout.cshtml";
}
#section title {<h1>#ViewBag.Title</h1>}
<div id="page-block" class="page-block-three row">
<div style="margin-top: 30px;" class="col-lg-offset-2 col-lg-8">
#using (Html.BeginForm())
{
<div class="input-group">
#Html.TextBox("SearchString", null, new { #class = "form-control ccl-form", #style = "z-index: 10", #placeholder = "Enter Username"})
<div class="input-group-btn">
<button class="btn ccl-btn ccl-btn-red ccl-btn-search" type="submit"><i class="fa fa-search"></i></button>
</div>
</div>
}
</div>
#if(ViewBag.ShowList){
<div class="col-lg-offset-3 col-lg-6">
#foreach (var item in Model)
{
<div class="details-block">
#Html.DisplayFor(modelItem => item.UserName)
<button type="button" class="btn ccl-btn ccl-btn-green ccl-btn-search pull-right">Select User</button>
</div>
}
</div>
}
</div>
You can try having a flag (ViewBag.isShown = false;)
When the page refreshes, it will show your div.
Code should be like below:
if (ViewBag.isShown == true)
{
..your for each block..
}

Bootstrap : accordion-toggle doesn't work

I have a problem with my accodion-toggle . I put it in my code but it doesn't work my title stay in blue and with nothing near of my title.
This is my code :
#{string module_origine = "";
int step = 0;
}
<div class="accordion" id="accordion2">
#foreach (var test in Model)
{
if (module_origine != test.module)
{
module_origine = test.module;
step = step + 1;
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapse_#step">
#Html.DisplayFor(ModelItem => test.module)
</a>
</div>
<div id="Collapse_#step" class="accordion-body collapse in">
<div class="accordion-inner ">
#foreach (var item in Model.Where(item => item.module == module_origine))
{
<form method="get" action="/#Html.DisplayFor(modelItem =>item.droit)">
<button type="submit" class="btn btn-primary" title="#Html.DisplayFor(ModelItem => item.description)">#Html.DisplayFor(modelItem => item.menunom)</button>
</form>
}
</div>
</div>
</div>
}
}
</div>
I don't understand why my class accordion-toggle doesn't work so I hope I can understand why and help me think you !
to get a panel it's easy just change that :
#{string module_origine = "";
int step = 0;
}
**<div class="panel-group" id="accordion">** //add that to create panel
#foreach (var test in Model)
{
if (module_origine != test.module)
{
module_origine = test.module;
step = step + 1;
<div class="panel panel-success ">
<div class="panel-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapse_#step">
#Html.DisplayFor(ModelItem => test.module)
</a>
</div>
<div id="Collapse_#step" class="accordion-body collapse in">
<div class="accordion-inner ">
#foreach (var item in Model.Where(item => item.module == module_origine))
{
<form method="get" action="/#Html.DisplayFor(modelItem =>item.droit)">
<button type="submit" class="btn btn-primary" title="#Html.DisplayFor(ModelItem => item.description)">#Html.DisplayFor(modelItem => item.menunom)</button>
</form>
}
</div>
</div>
</div>
}
}
</div>
I just remove the accordion content it's not wooking on my thing

Resources