Develop Reference

Search with multiple fields in asp.net core mvc

I create form where I get data from database using sql queries in asp.net core mvc. Now I want to search data with multiple fields like price, area, areaUnit . I am new to c# Kindly help me to search data and display. Data display in other div. In that div I make cards and get data from database using foreachloop.
MY view :
#model IEnumerable<eHouse.Models.RentModel>
<form>
<div class="wrap">
<div class="search">
<input type="text" class="searchTerm" style="width: 700px; color:#000000; text-align: left;" placeholder="Search Houses" onclick="filterfunction()">
<button type="submit" class="searchButton" >
<i class="fa fa-search"></i>
</button>
</div>
<div id="filter">
<select>
<option value="Kanal">Kanal</option>
<option value="Marla">Marla</option>
<option value="Square Feet">Square Feet</option>
<option value="Square Meter">Square Meter</option>
<option value="Square Yards">Square Yards</option>
</select>
<input type="text" placeholder="area" />
<input type="text" placeholder="price" />
</div>
</div>
</form>
<div class="property_information" >
#foreach (var item in Model)
{
<div class="home-info">
<span id="houseid">
</span>
<a href="#" class="home-images">
<img src="#item.pic1" />
</a>
<div class="home-data">
<div class="home-name">
<p>#item.tittle</p>
</div>
<div class="price">
<p>#item.price</p>
</div>
<div class="features">
<span>
#item.bedroom
</span>
<span>
#item.bathroom
</span>
<span>
2
</span>
</div>
<div class="desc">
#item.descrip
</div>
<div class="contact-save">
<a href="#" class="phone_number" id="favorite" onclick="Fav(this)" data-id="#item.id" >
<i class="fas fa-heart" style=" color: white;"></i>
</a>
<div class="popup" onclick="myFunction()">
<a href="tel:+928754756478" class="phone_number" onclick="call()">
</a>
</div>
<div class="popupmsg" onclick="myFunctionmsg()">
<a href="#" class="phone_number open_message" onclick="msg()">
</a>
</div>
<a href="#" class="phone_number" onclick="del(this)" data-id="#item.id">
<i class="fas fa-trash-alt" style=" color: white;"></i>
</a>
</div>
</div>
</div>
}
</div>
My Controller:
public IActionResult Rent(int PageNumber = 1)
{
var data = rdb.GetDataHouse();
var datas = rdb.GetDataHouse();
ViewBag.Data = datas.ToList().Take(6);
ViewBag.Totalpages = Math.Ceiling(data.Count()/6.0);
data = data.Skip((PageNumber - 1) * 6).Take(6).ToList();
return View(data);
}

Pass the filter data through a input submit in the form. You will need new viewModel with your data, input for post and filterList
You need something like this,
#model YourViewModel;
//Your form
<label asp-for="Input.Name"></label>
<select asp-for="Input.Name" asp-items="#(new SelectList(Model.SearchList))" class="form-control">
<option></option>
</select>
<span asp-validation-for="Input.Name" class="text-danger"></span>
<input type="submit" value="Search" class="btn btn-primary"/>
//your loop
#foreach (var item in Model.Data)
//Contoller
public IActionResult Rent(int PageNumber = 1, InputModel input)
{
var data = rdb.GetDataHouse();
var datas = rdb.GetDataHouse();
ViewBag.Data = datas.ToList().Take(6);
ViewBag.Totalpages = Math.Ceiling(data.Count()/6.0);
if(!string.InNullOrEmpty(input.Name))
{
data = data.Where(x => x.Name == input.Name).ToList();
}
data = data.Skip((PageNumber - 1) * 6).Take(6).ToList();
var viewModel = new YourViewModel
{
Data = data // data,
SearchList = your List<string>(), //for dropdown
Input = new YourInputModel(),
}
return View(viewModel);
}
//Input model
public class YourInputModel
{
public string Name { get; set; }
}
//View model
public class YourViewModel
{
public YourDataType Data{ get; set; }
public List<strings> SearchList { get; set; }
public YourInputModel Input { get; set; }
}
You also need some other things, which I hope you will handle

MVC C# show two items from database in one slide carousel

I am able to retrieve data from database and displaying it in Carousel, one item at a time, but my requirement is to show multiple item (2 items) at a time in one slide. I have tried but could not achieve it. Below is my code for reference:
<div class="container">
<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="2000"
data-pause="hover" data-wrap="true">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
#{int i = 0; }
#foreach (var item in Model)
{
i++;
var active = i == 1 ? "active" : "";
<div class="item #active">
<img src="#Url.Content(item.AchievementCategory.Cat_Img)" alt="#item.A_Title" class="img-responsive" />
<div class="carousel-caption d-none d-md-block">
<h5>#item.A_Title</h5>
<p>Some representative placeholder content for the first slide.</p>
</div>
</div>
}
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
Controller:
public ActionResult
{
var list = db.Achievements.OrderByDescending(x => x.A_Id).ToList();
return View(list);
}

It's ugly solution and has redundant code, but works I think.
The idea is to have how many slider containers equal to models and each of them has one 'current' element and the next one.
Active class is set on the parent of two items.
The view
#model List<WebApplication1.Controllers.ModelModel>;
#{
ViewData["Title"] = "Home Page";
}
<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
#for (var index=0; index< Model.Count; index++)
{
var item1 = Model[index];
var item2 = Model[index+1<Model.Count?index+1: 0 ];
var active = index == 0 ? "active" : string.Empty;
<div class="carousel-item #active">
<div class="wrapper">
<div class=" half-item">
<div>#item1.Title</div>
<div>#item1.Desc </div>
</div>
<div class=" half-item">
<div>#item2.Title</div>
<div>#item2.Desc </div>
</div>
</div>
</div>
}
</div>
</div>
<style>
.wrapper {
display:flex;
justify-content:space-between;
}
.half-item {
width:49%;
border:1px solid black;
}
</style>
and controller method (easy part)
public IActionResult Index()
{
var model = Enumerable.Range(1, 4).Select(x => new ModelModel() {
Title = $"Title{x}",
Desc =$"Description{x}{x}"
}).ToList();
return View(model);
}

Well, I have used the logic suggested by # benuto and added little bit of modification and it worked. I am posting the answer for if anyone needs it.
<div class="carousel-inner" role="listbox" style="border:2px solid red;">
#foreach (var item in Model)
{
for (var index = 0; index < Model.Count; index++)
{
var item1 = Model[index];
//var item2 = Model[index + 1 < Model.Count ? index + 1 : 0];
var active = index == 0 ? "active" : string.Empty;
<div class="item #active">
<div class="row">
<div class="col-xs-3">
<img src="#Url.Content(item.AchievementCategory.Cat_Img)" alt="#item.A_Title" class="img-responsive" />
</div>
<div class="col-xs-3">
<img src="#Url.Content(item1.AchievementCategory.Cat_Img)" alt="#item1.A_Title" class="img-responsive" />
</div>
</div>
</div>
}
}
</div>
public ActionResult CAchievements()
{
var list = db.Achievements.OrderByDescending(x => x.A_Id).ToList();
return View(list);
}

The top of the page is displayed for a fraction of second when trying to set focus to a <div> in $.ajax success

I have different categories on my Index.cshtml and on clicking of any of the categories, I am displaying the products of that category. The html containing the product list is updated with a partial view on the success of $.ajax. The products are displayed according to the category selected, but for a fraction of a second the top part of the view is displayed before the updating of the <div>.
My Index page.
<section id="portfolio" class="section-bg">
<div class="container" id="focusdiv" tabindex="-1">
<header class="section-header">
<h3 class="section-title">Our Portfolio</h3>
</header>
<div id="listproducts" class="text-center">
<ul id="portfolio-flters">
<li><a id="all" href="#">All </a></li>
<li>
<a id="inserts" href="#" data-toggle="popover" title="The optimum usage of the Insert has to be determined by having a controlled low flank wear to reuse the Insert.
Reworking can be done only on Inserts with minimum Flank Wear or regular Flank Wear.">
Inserts
</a>
</li>
<li><a id="cutters" href="#">Cutters</a></li>
<li><a id="angular" href="#">Angular Heads</a></li>
<li><a id="special" href="#">Specialized-Customized</a></li>
<li><a id="dialholders" href="#">Dial Holders</a></li>
</ul>
<input id="currentcategory" type="hidden" value="all" />
</div>
<div id="displayproducts">
#{Html.RenderAction("AllProducts" );}
</div>
</div>
</section><!-- #portfolio -->
My partial view
#model Monotech.Models.ProductViewModel
#if (Model.Products != null)
{
<div id="firstdiv" class="container">
<div class="row">
#foreach (var product in Model.Products)
{
<div class="col-sm-4 col-lg-3">
<div class="product">
<a href="#" class="img-prod">
#if (product.ImageUrl != null)
{
<img class="img-fluid" src="#Url.Content(product.ImageUrl)">
}
</a>
<div class="portfolio-info">
<h4>#product.Name</h4>
</div>
</div>
</div>
}
</div>
</div>
<div>
<nav aria-label="Page navigation example">
<ul class="pagination">
#if (Model.Pager != null && Model.Pager.TotalPages > 1)
{
if (Model.Pager.CurrentPage > 1)
{
<li>
Previous
</li>
}
for (var page = Model.Pager.StartPage; page <= Model.Pager.EndPage; page++)
{
string activeClass = Model.Pager.CurrentPage == page ? "active bg-info" : string.Empty;
<li>
#page
</li>
}
if (Model.Pager.CurrentPage < Model.Pager.TotalPages)
{
<li>
Next
</li>
}
}
</ul>
</nav>
</div>
}
My $.ajax function():
$("#dialholders").click(function () {
var category = 'dialholders';
$("#currentcategory").val(category);
$.ajax({
url: "/Home/ToolsCategory",
type: "GET",
data: {
category: category
},
success: function (data) {
$("#displayproducts").html(data);
$("#focusdiv").attr("tabindex", -1).focus();
// $('body').scrollTo('#focusdiv');
},
});
});
The action method of the Home controller
[HttpGet]
public ActionResult ToolsCategory(string category, int? pageNo)
{
ProductViewModel products = new ProductViewModel();
ProductView productview = new ProductView();
var pageSize = 10;
int totalRecords;
pageNo = pageNo.HasValue ? pageNo.Value > 0 ? pageNo.Value : 1 : 1;
if (category == "all" || category == null)
{
totalRecords = productview.GetAllProductsCount();
products.Products = productview.GetAllProducts(pageNo.Value, pageSize);
}
else
{
totalRecords = productview.GetProductsCategoryCount(category);
products.Products = productview.GetProductsCategoryWise(category, pageNo.Value);
}
products.Categories = productview.GetCategories();
products.Pager = new Pager(totalRecords, pageNo, pageSize);
return PartialView("_Products", products);
}
Please help me understand why this is happening.

How can i use Bootstrap Carousel As a list for db records?

i was searching a bit and i really need to know how to use the bootstrap 4 class Carousel As a list of some model data ?
i tried to manage in my own and i made something like this in the view :
#model IEnumerable<ElMatrodySite.Models.NewsData>
<link href="~/Content/Home.css" rel="stylesheet" />
#{
ViewBag.Title = "Home Page";
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<style>
/* Make the image fully responsive */
.carousel-inner img {
width: 100%;
height: 100%;
}
</style>
<div class="container">
<div style="width:100%;height:150px;padding-top:0px; direction:rtl;">
<div class="row">
<div class="col-xl-4">
<img src="~/photos/Logo.png" class="mx-auto d-block" style="height:250px;"/>
</div>
<div class="col-xl-8" style="text-shadow:0px 4px 10px #808080; color:#352c5e;">
<br />
#if (Request.IsAuthenticated)
{
ElMatrodySite.Models.ApplicationUser Apps = new ElMatrodySite.Models.ApplicationUser();
<h2 class="mx-auto d-block text-center" id="ccword">مرحبًا بك #Apps.Firstname في موقع أسرة المطرودي !</h2>
}
else
{
<h2 class="mx-auto d-block text-center" id="ccword">مرحبًا بكم في الموقع الرسمي الجديد لأسرة المطرودي !</h2>
}
</div>
</div>
</div>
</div>
<div class="row" style="direction:rtl;">
<div class="container">
<div class="col-xl-6" style="padding-top:150px;" id="xcard">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
#{
int i = 0;
}
#foreach (var item in Model)
{
<li data-target="#myCarousel" data-slide-to="#i" class="#(i == 0 ? "active" : "")"></li>
i++;
}
</ol>
<div class="carousel-inner">
#{
i = 0;
}
#foreach (var item in Model)
{
<div class="item #(i == 0 ? "active" : "")">
<img src="~/NewsPhotos/#item.file" class="image img-responsive">
<div class="carousel-caption">
<h3>#item.ArticleTitle</h3>
</div>
</div>
i++;
}
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>
that's wrong because every item in the list needs an id in the data-slide-to
and also one of them have to be active but it's possible while working with foreach to get the list of data.
this is the code in the controller :
[HttpGet]
public ActionResult Index()
{
List<NewsData> slideList = new List<NewsData>();
using (MatrodyEntities db = new MatrodyEntities())
{
var type = new NewsData();
slideList = db.NewsData.Where(xx => xx.ArticleID == type.ArticleID).Take(5).ToList();
return View(from NewsData in db.NewsData.ToList() select NewsData);
}
}
As i'm taking the latest 5 items added to the database.
so i need a small tutorial to make a Carousel list with asp.net mvc without destroying the whole design.

As I understand, you want to get list of data from the database and want to use bootstrap Carousel. As i noticed in your action method, you are getting latest 5 records and not passing same to view, instead of this you are using
return View(from NewsData in db.NewsData.ToList() select NewsData);
You can use directly
return View(slideList);
And in your view you can use model list as below
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
#{
int i = 1;
}
#foreach (var item in Model)
{
<li data-target="#myCarousel" data-slide-to="#i" class="#(i == 1 ? "active" : "")"></li>
i++;
}
</ol>
<div class="carousel-inner">
#{
i = 1;
}
#foreach (var item in Model)
{
<div class="item #(i == 1 ? "active" : "")">
<img src="#item.ImagePath" class="image img-responsive">
<div class="carousel-caption">
<h3>#item.Title</h3>
</div>
</div>
i++;
}
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>

I tried to render partial view inside my view with jquery , but the the part of partial view dosen't appear in run time

these are the actions in controller:
public ActionResult AdminRoles(int? selectedValue)
{
if (!LogedUser.InRole(Functions.User, Roles.View)) return RedirectToAction("Login");
return View(db.Users.Where(u => u.Id != 1));
}
[HttpGet]
public ActionResult GetAdminRoles(int Id)
{
var secRole = db.SecurityRoles.Where(s => s.AdminId == Id);
var func = db.SystemFunctions.ToList();
if (func.Count() > secRole.Count())
{
foreach (var item in func)
{
if (secRole.Where(s => s.SystemFunctionId == item.Id).Count() <= 0)
{
SecurityRoles sec = new SecurityRoles();
sec.AdminId = Id; sec.SystemFunctionId = item.Id;
sec.CanView = false; sec.CanAdd = false; sec.CanEdit = false; sec.CanDelete = false;
db.SecurityRoles.Add(sec);
db.SaveChanges();
}
}
}
return PartialView("GetAdminRoles",db.SecurityRoles.Where(s => s.AdminId == Id));
}
[HttpPost]
public ActionResult GetAdminRoles(int hdnAdminIDs, int[] CanView, int[] CanAdd, int[] CanEdit, int[] CanDelete)
{
var list = db.SecurityRoles.Where(o => o.AdminId == hdnAdminIDs).ToList();
foreach (var item in list)
{
if (CanView != null && CanView.Contains(item.Id))
item.CanView = true;
else
item.CanView = false;
if (CanAdd != null && CanAdd.Contains(item.Id))
item.CanAdd = true;
else
item.CanAdd = false;
if (CanEdit != null && CanEdit.Contains(item.Id))
item.CanEdit = true;
else
item.CanEdit = false;
if (CanDelete != null && CanDelete.Contains(item.Id))
item.CanDelete = true;
else
item.CanDelete = false;
}
db.SaveChanges();
return RedirectToAction("AdminRoles");
}
the following is the AdminRoles() action which include the JQuery scripts that would bring the partial view GetAdminRoles
NOTE : I tried several scripts ( between the comment marks)
#model IEnumerable<Arabawy.Models.User>
#{
ViewBag.Title = "ContactusMessages";
Layout = "~/Views/Shared/_LayoutAdmin.cshtml";
ViewBag.CurrentURI = "/IWS/adminroles".ToLower();
}
<script>
$(function () {
#*$.get('#Url.Content("~/IWS/GetAdminRoles/")' + "?Id=" + $('#AdminIDs').val(), function (data) {
/* data is the pure html returned from action method, load it to your page */
$('#partialPlaceHolder').html(data);
/* little fade in effect */
$('#partialPlaceHolder').fadeIn('fast');
});*#
$('#AdminIDs').change(function () {
debugger
/* Get the selected value of dropdownlist */
var selectedID = $(this).val();
/* Request the partial view with .get request. */
$.get('#Url.Content("~/IWS/GetAdminRoles/")' + "?Id=" + selectedID, function (data) {
/* data is the pure html returned from action method, load it to your page */
$('#partialPlaceHolder').html(data);
/* little fade in effect */
$('#partialPlaceHolder').fadeIn('fast');
});
});
});
</script>
<div class="pages_inner_content">
<div class="title_page_start">
<div class="right_title">
<h2>صلاحيات المشرفين</h2>
<h2><span>تحديث صلاحيات المشرفين</span></h2>
</div>
<div class="left_lisks">
<ul class="links_buttons">
#{if (Arabawy.LogedUser.IsLoged() &&
Arabawy.LogedUser.InRole(Arabawy.Controllers.IWSController.Functions.User, Arabawy.Roles.Edit))
{
<li class="add_fo">
<span> حفظ </span>
</li>
}}
<li class="exit">
خروج
</li>
</ul>
</div>
</div><!--title_page_start-->
<div class="bread_cramb bread_cramb_akh_ed">
<h3> أدوات الأداره <span> صلاحيات المشرفين </span> </h3>
</div> <!--bread_cramb-->
<div class="block_in_editor">
<h3>صلاحيات المشرفين</h3>
<div style="clear:both"></div>
<div class="add_khaber_form">
#Html.ValidationSummary(false)
<hr />
<div class="blog_form_input">
<label>اختر : </label>
<select class="select" id="AdminIDs" name="AdminIDs">
<option value="" selected>< اختر المشرف ></option>
#{foreach (var item in Model)
{
<option value="#item.Id">#item.DisplayName</option>
}}
</select>
</div>
<br />
<div id="partialPlaceHolder" style="display:none;"> </div>
</div><!--add_khaber_form-->
</div><!--block_in_editor-->
</div><!--pages_inner_content-->
this is the view of GetAdminRoles
#model IEnumerable<Arabawy.Models.SecurityRoles>
<script>
function submitForm() {
$("#hdnAdminIDs").val($("#AdminIDs").val());
$('#formID').attr('target', '_self');
$("#formID").submit();
}
</script>
<form action="#Url.Action("GetAdminRoles")" target="_self" id="formID" method="post" enctype="multipart/form-data">
#Html.Hidden("hdnAdminIDs")
<div class="block_in_adv">
<div style="clear:both"></div>
<div style="clear:both"></div>
<div class="table_adv_show">
<div class="row_first color_row">
<div class="cols_mos_2">اسم الصفحة</div>
<div class="cols_mos_3">امكانية رؤية الصفحة</div>
<div class="cols_mos_3">امكانية الأضافة </div>
<div class="cols_mos_3">امكانية التعديل </div>
<div class="cols_mos_3">امكانية المسح</div>
</div><!--main_row_opi-->
<ul class="list_pages_web sortable list" id="itemContainer">
#Html.Hidden("DeletedID")
#foreach (var item in Model)
{
<li class="zoomInUp">
<div class="block_row_table">
<div class="main_row_opi_res ">
<div class="cols_mos_2">اسم الصفحة</div>
<div class="cols_mos_3">امكانية رؤية الصفحة</div>
<div class="cols_mos_3">امكانية الأضافة </div>
<div class="cols_mos_3">امكانية التعديل </div>
<div class="cols_mos_3">امكانية المسح</div>
</div><!--main_row_opi-->
<div class="main_row_opi">
<div class="cols_mos_2">#item.SystemFunction.PageName</div>
#{
string canView = item.CanView ? "checked" : "";
string CanEdit = item.CanEdit ? "checked" : "";
string CanAdd = item.CanAdd ? "checked" : "";
string CanDelete = item.CanDelete ? "checked" : "";
}
<div class="cols_mos_3">
<input type="checkbox" name="CanView" id=#string.Format("CanView" + item.Id) class="css-checkbox9 all_check" value="#item.Id" #canView /><label for=#string.Format("CanView" + item.Id) class="css-label9" checked="checked"> </label>
</div>
<div class="cols_mos_3">
<input type="checkbox" name="CanAdd" id=#string.Format("CanAdd" + item.Id) class="css-checkbox9 all_check" value="#item.Id" #CanAdd /><label for=#string.Format("CanAdd" + item.Id) class="css-label9" checked="checked"> </label>
</div>
<div class="cols_mos_3">
<input type="checkbox" name="CanEdit" id=#string.Format("CanEdit" + item.Id) class="css-checkbox9 all_check" value="#item.Id" #CanEdit /><label for=#string.Format("CanEdit" + item.Id) class="css-label9" checked="checked"> </label>
</div>
<div class="cols_mos_3">
<input type="checkbox" name="CanDelete" id=#string.Format("CanDelete" + item.Id) class="css-checkbox9 all_check" value="#item.Id" #CanDelete /><label for=#string.Format("CanDelete" + item.Id) class="css-label9" checked="checked"> </label>
</div>
</div><!--main_row_opi-->
</div><!--/*block_row_table*/-->
</li>
}
</ul>
<div class="holder"></div>
</div><!--table_adv_show-->
</div><!--block_in_adv-->
so , why my partial view does not appear in run time ???!!!!
Is there any thing wrong ???!!
please help me !!!!!!!!!!!!!!!!!!!!!

Navigate to that partial view using your browser to ascertain it is returning what you expect. Once you have made sure that is returning the expected HTML, then your code should work.