Partial View Render

Partial View Render - c#

I am new to the world of MVC programming with C #, I already read the topic, made some examples and of course with the guide of StackOverflow I think I'm doing well.
However I find myself with an exercise that I want to perform and from which I have seen several answers but none has worked for me, and I come to you asking for the support.
Index
#{
ViewBag.Title = "Bienvenido";
}
<div class="container-fluid">
<div class="row">
<div class="col-md-3" id="menu">
<ul class="nav nav-pills nav-stacked">
<li role="presentation" class="active">Inicio</li>
<li role="presentation">Datos Generales</li>
<li role="presentation">Datos Curriculares</li>
<li role="presentation">Experiencia Laboral</li>
<li role="presentation">Datos Laborales</li>
<li role="presentation">Cónyuge y Dependientes</li>
<li role="presentation">Inmuebles</li>
<li role="presentation">Vehículos</li>
<li role="presentation">Muebles</li>
<li role="presentation">Inversiones</li>
<li role="presentation">Adeudos</li>
<li role="presentation">Posible Conflicto de Intereses</li>
<li role="presentation">Observaciones</li>
</ul>
</div>
<div class="col-md-9">
<div class="row" id="opciones">
</div>
<div class="row" id="crear">
</div>
<div class="row" id="registros">
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#dependientes').click(function () {
$.get('#Url.Action("Create","Dependientes")', function (data) {
$('#crear').replaceWith(data);
});
});
});
$(function () {
$('#dependientes').click(function () {
$.get('#Url.Action("Mostrar","Dependientes")', function (data) {
$('#registros').replaceWith(data);
});
});
});
</script>
Partial View _Mostrar
#model List<projectD.Models.dependiente>
#{
ViewBag.Title = "_Mostrar";
}
<br />
<div class="container">
<div class="row">
#foreach (var item in Model)
{
<div class="card" style="width: 20rem; display:inline-block; margin-top:10px">
<img class="card-img-top" src="~/Content/images/familia.png" alt="Card image cap" width="50" height="50">
<div class="card-block">
<h4 class="card-title">Dependiente</h4>
<p class="card-text">
#item.nombre
<br />
#item.apellidoPaterno
<br />
#item.apellidoMaterno
<br />
#item.CURP
</p>
#Html.ActionLink("Detalle", "Details", new { id = item.idDependiente }, new {#class= "btn btn-primary"})
</div>
</div>
}
</div>
</div>
I have a project with a main view, which has a menu to the left when selecting each option to the right render two partial views each with its controller the first to add records and the second to display them.
main screen
What I want to do is that when I click on add record, only the partial views are updated and the URL is not reloaded since I would lose the menu option in which I am.
I hope you can support me

Related

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>

Getting 500 Error on Home page when publishing ASP.Net Core Web App with class library to Azure

I've been trying to deploy my web application to Azure but I get a 500 Error on the first page. I am assuming this is because of an issue with the model that I am referencing on the first page, which is being referenced to a class library in my solution.
Here's how the project looks
I've had some issues with referencing the class library before but I have been able to remedy those issues and build both projects successfully so far. And the project runs just fine in IISExpress. But when I try to deploy it to Azure, I get a 500 Error on my Home page. Here's the code for it:
#using LNCLibrary.Models.HomeViewModel
#model HomeViewModel
#{
ViewData["Title"] = "Home Page";
}
#inject SignInManager<ApplicationUser> SignInManager
#inject UserManager<ApplicationUser> UserManager
<!--
Au<!--
Author: W3layouts
Author URL: http://w3layouts.com
License: Creative Commons Attribution 3.0 Unported
License URL: http://creativecommons.org/licenses/by/3.0/
-->
<!DOCTYPE HTML>
<html>
<head>
<title>New Shop a E-Commerce Online Shopping Category Flat Bootstrap Responsive Website Template | Home :: w3layouts</title>
<!--css-->
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/font-awesome.css" rel="stylesheet">
<!--css-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="New Shop Responsive web template, Bootstrap Web Templates, Flat Web Templates, Android Compatible web template,
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyEricsson, Motorola web design" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<script src="js/jquery.min.js"></script>
<link href='//fonts.googleapis.com/css?family=Cagliostro' rel='stylesheet' type='text/css'>
<link href='//fonts.googleapis.com/css?family=Open+Sans:400,800italic,800,700italic,700,600italic,600,400italic,300italic,300' rel='stylesheet' type='text/css'>
<!--search jQuery-->
<script src="js/main.js"></script>
<!--search jQuery-->
<script src="js/responsiveslides.min.js"></script>
<script>
$(function () {
$("#slider").responsiveSlides({
auto: true,
nav: true,
speed: 500,
namespace: "callbacks",
pager: true,
});
});
</script>
<!--mycart-->
<script type="text/javascript" src="js/bootstrap-3.1.1.min.js"></script>
<!-- cart -->
<script src="js/simpleCart.min.js"></script>
<!-- cart -->
<!--start-rate-->
<script src="js/jstarbox.js"></script>
<link rel="stylesheet" href="css/jstarbox.css" type="text/css" media="screen" charset="utf-8" />
<script type="text/javascript">
jQuery(function () {
jQuery('.starbox').each(function () {
var starbox = jQuery(this);
starbox.starbox({
average: starbox.attr('data-start-value'),
changeable: starbox.hasClass('unchangeable') ? false : starbox.hasClass('clickonce') ? 'once' : true,
ghosting: starbox.hasClass('ghosting'),
autoUpdateAverage: starbox.hasClass('autoupdate'),
buttons: starbox.hasClass('smooth') ? false : starbox.attr('data-button-count') || 5,
stars: starbox.attr('data-star-count') || 5
}).bind('starbox-value-changed', function (event, value) {
if (starbox.hasClass('random')) {
var val = Math.random();
starbox.next().text(' ' + val);
return val;
}
})
});
});
</script>
<!--//End-rate-->
</head>
<body>
<!--header-->
<div class="header">
<div class="header-top">
<div class="container">
<div class="top-left">
Help <i class="glyphicon glyphicon-phone" aria-hidden="true"></i> +0123-456-789
<a asp-controller="Admin" asp-action="Index">Administration</a>
</div>
<div class="top-right" style="padding-right:1em;">
<ul>
#await Html.PartialAsync("_LoginPartial")
</ul>
</div>
<div class="clearfix"></div>
</div>
</div>
<div class="heder-bottom">
<div class="container">
<div class="logo-nav">
<div class="logo-nav-left">
<h1>New Shop <span>Shop anywhere</span></h1>
</div>
<div class="logo-nav-left1">
<nav class="navbar navbar-default">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header nav_2">
<button type="button" class="navbar-toggle collapsed navbar-toggle1" data-toggle="collapse" data-target="#bs-megadropdown-tabs">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="bs-megadropdown-tabs">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<!-- Mega Menu -->
<li class="dropdown">
Women<b class="caret"></b>
<ul class="dropdown-menu multi-column columns-3">
<div class="row">
<div class="col-sm-3 multi-gd-img">
<ul class="multi-column-dropdown">
<li>Clothing</li>
<li>Wallets</li>
<li>Shoes</li>
<li>Watches</li>
<li> Underwear </li>
<li>Accessories</li>
</ul>
</div>
<div class="col-sm-3 multi-gd-img">
<ul class="multi-column-dropdown">
<h6>Submenu2</h6>
<li>Sunglasses</li>
<li>Wallets,Bags</li>
<li>Footwear</li>
<li>Watches</li>
<li>Accessories</li>
<li>Jewellery</li>
</ul>
</div>
<div class="col-sm-3 multi-gd-img">
<img src="images/woo.jpg" alt=" " />
</div>
<div class="col-sm-3 multi-gd-img">
<img src="images/woo1.jpg" alt=" " />
</div>
<div class="clearfix"></div>
</div>
</ul>
</li>
<li class="dropdown">
Men <b class="caret"></b>
<ul class="dropdown-menu multi-column columns-3">
<div class="row">
<div class="col-sm-3 multi-gd-img">
<ul class="multi-column-dropdown">
<li>Clothing</li>
<li>Wallets</li>
<li>Shoes</li>
<li>Watches</li>
<li> Underwear </li>
<li>Accessories</li>
</ul>
</div>
<div class="col-sm-3 multi-gd-img">
<ul class="multi-column-dropdown">
<li>Sunglasses</li>
<li>Wallets,Bags</li>
<li>Footwear</li>
<li>Watches</li>
<li>Accessories</li>
<li>Jewellery</li>
</ul>
</div>
<div class="col-sm-3 multi-gd-img">
<img src="images/woo3.jpg" alt=" " />
</div>
<div class="col-sm-3 multi-gd-img">
<img src="images/woo4.jpg" alt=" " />
</div>
<div class="clearfix"></div>
</div>
</ul>
</li>
<li>Short Codes</li>
<li>Mail Us</li>
</ul>
</div>
</nav>
</div>
#*<div class="logo-nav-right">
<ul class="cd-header-buttons">
<li><a class="cd-search-trigger" href="#cd-search"> <span></span></a></li>
</ul> cd-header-buttons
<div id="cd-search" class="cd-search">
<form action="#" method="post">
<input name="Search" type="search" placeholder="Search...">
</form>
</div>
</div>*#
#*<div class="header-right2">
<div class="cart box_1">
<a href="checkout.html">
<h3>
<div class="total">
<span class="simpleCart_total"></span> (<span id="simpleCart_quantity" class="simpleCart_quantity"></span> items)
</div>
<img src="images/bag.png" alt="" />
</h3>
</a>
<p>Empty Cart</p>
<div class="clearfix"> </div>
</div>
</div>*#
<div class="clearfix"> </div>
</div>
</div>
</div>
</div>
<!--header-->
<!--banner-->
<div class="banner-w3">
<div class="demo-1">
<div id="example1" class="core-slider core-slider__carousel example_1">
<div class="core-slider_viewport">
<div class="core-slider_list">
<div class="core-slider_item">
<img src="images/b1.jpg" class="img-responsive" alt="">
</div>
<div class="core-slider_item">
<img src="images/b2.jpg" class="img-responsive" alt="">
</div>
<div class="core-slider_item">
<img src="images/b3.jpg" class="img-responsive" alt="">
</div>
<div class="core-slider_item">
<img src="images/b4.jpg" class="img-responsive" alt="">
</div>
</div>
</div>
<div class="core-slider_nav">
<div class="core-slider_arrow core-slider_arrow__right"></div>
<div class="core-slider_arrow core-slider_arrow__left"></div>
</div>
<div class="core-slider_control-nav"></div>
</div>
</div>
<link href="css/coreSlider.css" rel="stylesheet" type="text/css">
<script src="js/coreSlider.js"></script>
<script>
$('#example1').coreSlider({
pauseOnHover: false,
interval: 3000,
controlNavEnabled: true
});
</script>
</div>
<!--banner-->
<!--content-->
<div class="content">
<!--banner-bottom-->
<div class="ban-bottom-w3l">
<div class="container">
<div class="col-md-6 ban-bottom">
<div class="ban-top">
<img src="images/p1.jpg" class="img-responsive" alt="" />
<div class="ban-text">
<h4>Men’s Clothing</h4>
</div>
<div class="ban-text2 hvr-sweep-to-top">
<h4>50% <span>Off/-</span></h4>
</div>
</div>
</div>
<div class="col-md-6 ban-bottom3">
<div class="ban-top">
<img src="images/p2.jpg" class="img-responsive" alt="" />
<div class="ban-text1">
<h4>Women's Clothing</h4>
</div>
</div>
<div class="ban-img">
<div class=" ban-bottom1">
<div class="ban-top">
<img src="images/p3.jpg" class="img-responsive" alt="" />
<div class="ban-text1">
<h4>T - Shirt</h4>
</div>
</div>
</div>
<div class="ban-bottom2">
<div class="ban-top">
<img src="images/p4.jpg" class="img-responsive" alt="" />
<div class="ban-text1">
<h4>Hand Bag</h4>
</div>
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
<!--banner-bottom-->
<!--new-arrivals-->
<div class="new-arrivals-w3agile">
<div class="container">
<h2 class="tittle">New Arrivals</h2>
<div class="arrivals-grids">
#foreach (var item in Model.ShopProducts)
{
<div class="col-md-3 arrival-grid simpleCart_shelfItem" style="padding-bottom:1em;"
price="#item.Price" id="#item.ID" name="#item.ProductName" profilepicture="#item.ProfilePicture">
<div class="grid-arr">
<div class="grid-arrival">
<figure>
<a href="#" class="new-gri" data-toggle="modal" data-target="#myModal1">
<div class="grid-img">
<img src="~/ProductPictures/#item.ProfilePicture" class="img-responsive" alt="">
</div>
<div class="grid-img">
<img src="~/ProductPictures/#item.ProfilePicture" class="img-responsive" alt="">
</div>
</a>
</figure>
</div>
#*<div class="ribben">
<p>NEW</p>
</div>
<div class="ribben1">
<p>SALE</p>
</div>*#
<div class="block">
<div class="starbox small ghosting"> </div>
</div>
<div class="women">
<h6>#item.ProductName</h6>
<span class="size">XL / XXL / S </span>
<p>#*<del>$100.00</del>*#<em class="item_price">$#item.Price</em></p>
Add To Cart
</div>
</div>
</div>
}
<div class="clearfix"></div>
</div>
</div>
</div>
I'm sure that it must be an issue with the model i'm using for the page because it resides in the Web app project but references a model in the class library, and so I'm thinking it's another issue with the library or reference. But the problem is I can't figure out how to debug in Azure to see what the actual issue is due to the 500 error. Here's the ViewModel, Model and Controller:
ViewModel:
using System;
using System.Collections.Generic;
using System.Text;
namespace LNCLibrary.Models.HomeViewModel
{
public class HomeViewModel
{
public ICollection<Product> ShopProducts { get; set; }
}
}
Model:
using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.Text;
namespace LNCLibrary.Models
{
public enum Category
{
Shirts,
Accesories,
}
public enum Gender
{
Men,
Women,
Both
}
public class Product
{
public int ID { get; set; }
[Display(Name ="Name")]
public string ProductName { get; set; }
public int Price { get; set; }
[Display(Name = "Gender")]
public Gender GenderOption { get; set; }
public int Quantity { get; set; }
public Category Category { get; set; }
[Display(Name ="Created")]
public DateTime DateCreated { get; set; }
[Display(Name = "Description")]
public string ProductDescription { get; set; }
public ICollection<Size> AvailableSizes { get; set; }
[Display(Name = "Profile Picture")]
public string ProfilePicture { get; set; }
}
}
Controller:
private readonly ApplicationDbContext _context;
public HomeController(ApplicationDbContext context)
{
_context = context;
}
public async Task<IActionResult> Index()
{
HomeViewModel HVM = new HomeViewModel();
HVM.ShopProducts = await _context.Products.ToListAsync();
return View(HVM);
}
Any ideas? I'm stumped.

After you pusblished Azure App Service with the Publish dialog box in VS, open Server Explorer (View > Server Explorer), right-click on the App Service instance and choose Attach Debugger.
In the running ASP.NET application, reproduce the error or set a breakpoint before.
The breakpoint should be hit in Visual Studio.
Like locally!

In starup.cs there is a method Configure. Enable app.UseDeveloperExceptionPage() and app.UseDatabaseErrorPage() to see errors in detail.
public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
if (env.IsDevelopment())
{
app.UseDeveloperExceptionPage();
app.UseDatabaseErrorPage();
}
else
{
//app.UseExceptionHandler("/Home/Error");
app.UseDeveloperExceptionPage(); // add this to see error
app.UseDatabaseErrorPage(); // add this to see error
}
}

Bootstrap slider in ASP.NET MVC from SQL Server database

I tried to make Bootstrap carousel slider for news from SQL Server database
I want the slider to look like this: https://www.w3schools.com/bootstrap/bootstrap_carousel.asp
But the role said
The .active class needs to be added to one of the slides. Otherwise, the carousel will not be visible.
but I did not know how to use .active class to one of my news because it is foreach loop.
All of my news has been under each other also, the left and right controls not working
Here is a screenshot of news slider result now
The code now:
HomeController.cs
public ActionResult Index()
{
return View(db.News.ToList());
}
Index.cshtml
#model IEnumerable<Project.Models.News>
#{
ViewBag.Title = "Home Page";
Layout = "~/Views/Shared/_Layout.cshtml";
}
#Scripts.Render("~/bundles/bootstrap")
<!--Start slide code-->
<div class="container imgs">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- 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 -->
#foreach (var item in Model)
{
<div class="carousel-inner">
<div class="item active"> //My mistake is here, how to make first news of class active?
<div class="item ">
#{ string imageBase64 = Convert.ToBase64String(item.newImg);
string imageSrc = string.Format("data:image/gif;base64,{0}", imageBase64);
<img src="#imageSrc" />
}
<div class="carousel-caption">
<h3>#item.newName</h3>
Read More
#*<button type="button" class="btn btn-default">Read More</button>*#
</div>
</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>
Any help?

To add class="active" to the first element in the list you can either:
#{int v = 0;}
#foreach (var item in Model)
{
<div class="carousel-inner">
<div class="item#(v == 0 ? " active" : "")">
#item.newName
</div>
</div>
v++;
}
Or:
#foreach (var item in Model.Select((value, i) => new { i, value }))
{
<div class="carousel-inner">
<div class="item#(item.i == 0 ? " active" : "")">
#item.value.newName
</div>
</div>
}

pass a list of object to modal popup in ASP.net MVC

I want to pass a list of objects to modal popup which is represented as view in a separate .cshtml file
here what I did :
first, I have the following index.cshtml view:
#model E_Voucher.Models.Contract
#{
ViewBag.Title = "Details";
Layout = "~/Areas/Admin/Views/Shared/_Layout.cshtml";
}
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="portlet box blue">
<div class="portlet-title">
<div class="caption">
Contract #Html.DisplayFor(model => model.ContractId) Details
</div>
</div>
<div class="portlet-body">
<div class="tabbable-line">
<ul class="nav nav-tabs ">
<li class="active">
Info
</li>
<li>
Projects
</li>
<li>
Devices
</li>
<li>
Cards
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab_info">
#1 Tab
</div>
<div class="tab-pane" id="tab_project">
#2 Tab
</div>
<div class="tab-pane" id="tab_devices">
<div class="portlet light bordered">
<div class="portlet-title">
<div class="actions" style="padding-left:5px">
<a class="btn btn-circle btn-outline red" data-target="#AssignDeviceModal" data-toggle="modal">
<i class="fa fa-plus"></i>
<span class="hidden-sm hidden-xs">Assign Device </span>
</a>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="tab_cards">
#4Tab
</div>
</div>
</div>
</div>
</div>
<div class="modal fade" id="AssignDeviceModal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
#Html.Action("AssignDevice")
</div>
</div>
</div>
</div>
</div>
the index.cshtml view contains 4 tabs, in the device_tab there is a button which is responsible to show a modal popup contains all the available device to the user, as you can see in the div with id=AssignDeviceModal I put a #Html.Action("AssignDevice") to call the Action Method AssignDevice which fetch the devices from DB, and render the following AssignDevice.cshtml view:
#model IEnumerable<E_Voucher.Models.Device>
<div class="modal-header">
<h4 class="modal-title">Assign Device</h4>
</div>
<div class="modal-body">
#*for example print the brand of device*#
#foreach (var item in Model)
{
<li>#item.Brand</li>
}
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary">Save</button>
<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
</div>
and here is the Action Method AssignDevice:
public ActionResult AssignDevice()
{
List<Device> _dev = new List<Device>();
Device dev1 = new Device();
dev1.Brand = "Samasung";
_dev.Add(dev1);
Device dev2 = new Device();
dev1.Brand = "SONY";
_dev.Add(dev2);
return View(_dev);
}
the problem is, when I click the button, the popup modal is shown and disappeared immediately !
how to fix this ?

Show bootstrap panel in a row inside foreach loop

Here is my code, what should I do to show 3 panels in a row. Is there any way to do this?
Its showing in the same row but the next panel starts slightly below the previous one I'll be really thankful to you for your help
#foreach (DEProperty.Web.Models.PlotsViewModelSearchResult c in Model)
{
<div class="col-md-4">
<div class="panel panel-info">
<div class="panel-heading text-center">
<h4>#c.PhaseText, #c.SectorText-#c.PlotAddress</h4>
</div>
<div class="panel-body text-center">
<p class="lead">
<img src="~/images/plot...image.jpg" />
</p>
</div>
<ul class="list-group list-group-flush text-center">
<li class="list-group-item" style="border:none">
#c.AreaText
</li>
<li class="list-group-item" style="border:none">
Facing Park
</li>
<li class="list-group-item text-center" style="border:none">
Near Mosque
</li>
<li class="list-group-item" style="border:none">
Near Commercial
</li>
<li class="list-group-item" style="border:none">
Corner
</li>
</ul>
<div class="panel-footer">
<a class="btn btn-lg btn-block btn-info">Detail View</a>
</div>
</div>
</div>

Just Add <div class="row"> like this:
<div class="row">
#foreach (DEProperty.Web.Models.PlotsViewModelSearchResult c in Model)
{
....
}
</div>

Develop Reference

C# (C-Sharp) is a programming language developed by Microsoft that runs on the .NET Framework.

Partial View Render - c#

Related

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

Getting 500 Error on Home page when publishing ASP.Net Core Web App with class library to Azure

Bootstrap slider in ASP.NET MVC from SQL Server database

pass a list of object to modal popup in ASP.net MVC

Show bootstrap panel in a row inside foreach loop

Categories

Resources