i'm having a detail view in which there will be a conversation, and even comment box in conversation. I had a comment box in partial view. but had an issue when decided to refresh just the conversation on creating comment.
I know i can bind below code in partial view. but i have difficulty in calling action method for it.
So it will have details view code and then below code
<div class="row">
<div class="panel-group" id="accordion">
#foreach (var convo in Model.TicketConversation.OrderByDescending(x => x.LastUpdatedTimestamp))
{
<div class="col-md-10 col-md-offset-1" style="padding-bottom: 5px;">
<div class="panel panel-default">
<div class="panel-heading removePaddingBottom" data-toggle="collapse" data-target="#accord-convo-#convo.id" style="background-color: inherit;" id="accordHeading-#convo.id" onclick="javascript:showHideLastConvoMsg(#convo.id)">
<a style="text-decoration: none !important; color: inherit; width: 100px;">
<span style="font-size: 16px; font-weight: bold; vertical-align: middle !important;"><i class="fa fa-chevron-right" id="accord-heading-icon-#convo.id"></i> #convo.Subject</span>
</a>
#{ var lastmessage = convo.ConversationComments.First(); }
<div class="row">
<div id="accord-lastmsg-#convo.id" style="margin-top: 15px;">
<div class="#lastmessage.DisplayCssClass">
<div class="row">
<div class="col-md-offset-1 col-md-10 removePadding" style="margin-bottom: 5px; margin-top: 10px;">
<strong>#lastmessage.TypeOfContact</strong>
</div>
<div class="col-md-offset-1 col-md-10 removePadding" style="margin-bottom: 10px;">
#lastmessage.Message
</div>
</div>
<div class="row">
<div class="col-md-offset-6 col-md-5 text-right text-muted" style="margin-bottom: 10px;">
<small>
<em>Posted by #lastmessage.CommenterName ## #lastmessage.MessageTimestamp</em>
</small>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="accord-convo-#convo.id" class="panel-collapse collapse">
<div class="panel-body" style="padding: 0;">
#if (convo.IsReadOnly == false #*&& Model.IsClosed == false*#)
{
<div class="row">
#*<div class="col-md-12" style="padding-bottom: 3px; padding-top: 3px;">
<i class="fa fa-reply"></i> Reply
</div>*#
---- here i'm calling partial view for comment box---
}
#foreach (var item in convo.ConversationComments)
{
<div>
<div class="message-border #item.DisplayCssClass">
<div class="row">
<div class="col-md-offset-1 col-md-10 removePadding" style="margin-bottom: 5px;">
<strong>#item.TypeOfContact</strong>
</div>
<div class="col-md-offset-1 col-md-10 removePadding" style="margin-bottom: 10px;">
#item.Message
</div>
</div>
<div class="row">
<div class="col-md-5 text-right text-muted">
<small>
<em>Posted by #item.CommenterName ## #item.MessageTimestamp</em>
</small>
</div>
</div>
</div>
</div>
}
</div>
</div>
</div>
</div>
}
</div>
</div>
which method can be called to get conversation list?? do i need to write a new action method.
You can create a Action method that return a partial view for the conversation you have. For ex:
public class SomeCtrlController : Controller
{
public PartialViewResult Conversation(int id)
{
List<Conversation> conversations = new List<Conversation>();
//Use id to create your Model and pass it to Partial View
conversations = PopulateConversations(id);
// The below code search for Conversation.cshtml inside Views\SomeCtrl folder
return PartialView(conversations);
}
}
Then from your cshtml (razor view) you can call it like for first time loading:
#{ Html.RenderAction("Conversation", "SomeCtrl", new { id = 1 /*this will be id for which conversion have to load */ });}
Then to refresh just conversations you can use jQuery ajax or get method. This will refresh only section of the which you have specified. See example below
<script>
var conversationData = {
"id": 1 /*this will be id for which conversion have to load */
};
$.get("/SomeCtrl/Conversation", conversationData,
function (returnedHtml) {
$("#placeHolderDivToHaveConversation").html(returnedHtml);
});
</script>
when I need to do this, I work with jquery ajax. For example:
I need to load this div below dynamically:
Button View
<button id="buscarVideos" class="btn">Buscar</button>
I call my ajax in one event and load de result there:
Success ajax
$("#partial_video").html(data);
Partial
<div class="col-lg-12">
<div id="partial_video">
#*#Html.Partial("_Player")*#
</div>
</div>
Return on Controller:
return PartialView("_Player", video);
Related
As my title already explains
I am building a small Twitter Clone for a school project and while i want to go to someones profile page if i click on the poster name.
<a asp-area="" asp-controller="Home" asp-action="Profile">#userController.GetUser(post.UserId).DisplayName</a><a asp-area="" asp-controller="Home" asp-action="Profile">#userController.GetUser(post.UserId).DisplayName</a>
This only gets me so far that i can get the logged in username id via url and looking at it's own profile. well nice but i need to be able to get to other profiles aswell
I've also tried this
<a asp-area="" asp-controller="Home" asp-action="Profile" asp-route-userId="#post.UserId">#userController.GetUser(post.UserId).DisplayName</a>
But everytime i do that my url routing is off it will be like this:
Profile/3c126298-32f8-471e-8597-69c71c333df8?userId=f5c01788-97d9-4426-881a-53469e8c44f8
And it immediatly errors ofcourse.
Does anybody know how I can resolve this issue because i've tried searching for it on the Interwebz but i dont know how to fomulate the question so im not getting any results
Controller code:
[Route("Profile/{id}")]
public IActionResult Profile(string userId)
{
return View(userId);
}
Razor Page
#using SpackkApiMVC.Controllers
#model SpackkApiMVC.Models.PostModel
<style>
.scrollable {
background-color: rgba(255, 230, 204, 0.2);
}
.container {
margin: 0 auto;
width: 70%;
}
</style>
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-9">
<!-- User profile -->
<div class="panel panel-default">
<div class="panel-body">
<div class="profile__avatar">
<img src="https://bootdey.com/img/Content/avatar/avatar5.png" alt="...">
</div>
<div class="profile__header">
<h4>#user.DisplayName <small>Administrator</small></h4>
</div>
</div>
</div>
<!-- User info -->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">User info</h4>
</div>
<div class="panel-body">
<table class="table profile__table">
<tbody>
<tr>
<th><strong>Location</strong></th>
<td>United States</td>
</tr>
<tr>
<th><strong>Company name</strong></th>
<td>Simpleqode.com</td>
</tr>
<tr>
<th><strong>Position</strong></th>
<td>Front-end developer</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- Community -->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">Community</h4>
</div>
<div class="panel-body">
<table class="table profile__table">
<tbody>
<tr>
<th><strong>Comments</strong></th>
<td>58584</td>
</tr>
<tr>
<th><strong>Member since</strong></th>
<td>Jan 01, 2016</td>
</tr>
<tr>
<th><strong>Last login</strong></th>
<td>1 day ago</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- Latest posts -->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">Latest posts</h4>
</div>
#foreach (PostModel post in postController.GetPosts(user.Id))
{
<div class="scrollable">
<h5 class="card-title"><a asp-area="" asp-controller="Home" asp-action="Profile" >#userController.GetUser(post.UserId).DisplayName</a></h5>
<div class="card-body">
<p class="card-text" name="post.id">
#post.Body <br/><br/>
<img src="../images/upvote.png" height="15" width="15"/> #postController.GetLikeCount(post.Id)
#if (postController.IsLiked(user.Id, post.Id))
{
<a asp-area="" asp-controller="Post" asp-action="UnLike" asp-route-userId="#user.Id" asp-route-postId="#post.Id"class="btn-link" >UnLike</a>
}
else
{
<a asp-area="" asp-controller="Post" asp-action="Like" asp-route-userId="#user.Id" asp-route-postId="#post.Id" class="btn-link" >Like</a>
}
<br/>
<small class="text-muted">#post.Date.ToShortDateString() - #post.Date.ToShortTimeString()</small>
<hr>
</p>
</div>
</div>
}
</div>
</div>
<div class="col-xs-12 col-sm-3">
</div>
</div>
</div>
The problem is that your route param name and action param names are not consistent. You have {id} in your route, but then userId in your action signature. They should be named the same. The route would be correct, technically if you specified asp-route-id, instead of asp-route-userId:
<a asp-area="" asp-controller="Home" asp-action="Profile" asp-route-id="#post.UserId">#userController.GetUser(post.UserId).DisplayName</a>
That would then give you a URL like:
Profile/f5c01788-97d9-4426-881a-53469e8c44f8
However, since the param name doesn't line up, userId would be null.
I have the following code in my View which should iterate over a collection and i should see 14 images with different Names. But it will only show the last item in the collection.
Code i am using to display the images
IEnumerable<Sector> sector = ViewBag.Sectors;
<div id="js-grid-lightbox-gallery" class="cbp cbp-ready cbp-caption-active cbp-caption-overlayBottomAlong" style="height: 896px; margin:.5px 0px 0px 50px">
<div class="cbp-wrapper-outer">
<div class="cbp-wrapper">
#foreach (var item in sector)
{
<div class="cbp-item web-design graphic print motion" style="width: 389px; left: 0px; top: 0px;">
<div class="cbp-item-wrapper" style="">
<a href="ajax-lightbox-gallery/project1.html" class="cbp-caption cbp-singlePageInline" data-title="World Clock<br>by Paul Flavius Nechita" rel="nofollow">
<div class="cbp-caption-defaultWrap">
<img src="https://placeimg.com/380/285/arch" alt="">
</div>
<div class="cbp-caption-activeWrap">
<div class="cbp-l-caption-alignLeft">
<div class="cbp-l-caption-body">
<div class="cbp-l-caption-title">#item.Name</div>
</div>
</div>
</div>
</a>
</div>
</div>
}
</div>
</div>
</div>
Code i am using to get the data.
public IActionResult Experience(string sectorid)
{
IEnumerable<Sector> sector = sectorRepository.AllActive().ToList();
ViewBag.Sectors = sector;
return View();
}
I cant See what i have done wrong. I have tried this as-well and i still get just the one image.
<div id="js-grid-lightbox-gallery" class="cbp cbp-ready cbp-caption-active cbp-caption-overlayBottomAlong" style="height: 896px; margin:.5px 0px 0px 50px">
<div class="cbp-wrapper-outer">
<div class="cbp-wrapper">
#foreach (var item in Model)
{
<div class="cbp-item web-design graphic print motion" style="width: 389px; left: 0px; top: 0px;">
<div class="cbp-item-wrapper" style="">
<a href="ajax-lightbox-gallery/project1.html" class="cbp-caption cbp-singlePageInline" data-title="World Clock<br>by Paul Flavius Nechita" rel="nofollow">
<div class="cbp-caption-defaultWrap">
<img src="https://placeimg.com/380/285/arch" alt="">
</div>
<div class="cbp-caption-activeWrap">
<div class="cbp-l-caption-alignLeft">
<div class="cbp-l-caption-body">
<div class="cbp-l-caption-title">#item.Name</div>
</div>
</div>
</div>
</a>
</div>
</div>
}
</div>
</div>
</div>
public IActionResult Experience(string sectorid)
{
IEnumerable<Sector> sector = sectorRepository.AllActive().ToList();
return View(sector);
}
I have a main page:
#model List<NovoRelatorioWeb.Controllers.HomeController.Campo>
#{
ViewBag.Title = "Relatorio";
}
<div id="RelatorioTablet">
<div class="container">
<div class="row">
<div class="col-lg-8">
<div class="row">
<div class="col-sm-12">
#if (Model != null)
{
<span>
Relatório ELO > Versão 2.0 > #Model[0].Relatorio
</span>
}
</div>
</div>
<hr style="border: 1px solid orangered" />
<div class="row">
<div class="col-sm-2">
<br />
<input type="button" id="butSalvar" class="form-control" style="background-color:orangered" value="Salvar" />
</div>
</div>
<hr style="border: 1px solid orangered" />
</div>
<div class="col-lg-4">
<div>
#Html.Partial("~/Views/Home/PhonePreview.cshtml", Model)
</div>
</div>
</div>
</div>
</div>
#section scripts {
<script src="~/Scripts/relatorio_elo.js" type="text/javascript"></script>
}
and it calls another page:
#model List<NovoRelatorioWeb.Controllers.HomeController.Campo>
#{
Layout = null;
}
<div>
<div id="PhonePreview" style="border:1px solid black;font-size:20px;">
#if (Model != null)
{
<div class="container1" style="background-color:orangered;padding-top:5px;padding-bottom:5px;">
<div class="row" style="text-align:center;width:100%;">
<div class="col-sm-12" >
<span style="color:white;">
#ViewBag.Relatorio
</span>
</div>
</div>
</div>
foreach (var campo in Model)
{
if (campo.Tipo == "Text")
{
#Html.Partial("~/Views/Home/Controles/Text.cshtml", campo)
}
}
}
</div>
</div>
<style>
input[type=date]::-webkit-inner-spin-button {
-webkit-appearance: none;
display: none;
}
</style>
and it calls
#model NovoRelatorioWeb.Controllers.HomeController.Campo
<div class="1" style="padding-top:5px;padding-bottom:5px;">
<div class="row">
<div class="col-sm-5">
<span style="padding-left:5px;">
#Model.Nome:
</span>
</div>
<div class="col-sm-7" style="text-align:right;">
<input type="text" style="width:100%;" />
</div>
</div>
</div>
and im calling the controller via jquery ajax
var urlService = "/Home/Salvar";
var jsonobj = CriaArrayCampos();
jsonobj = JSON.stringify(jsonobj)
$.ajax({
url: urlService,
type: 'POST',
data: jsonobj,
datatype: 'json',
contentType: 'application/json',
beforeSend: function () {
},
complete: function () {
}
});
It means, a page who calls a partial view, and a partial view inside. OIk, everything works, but when i click save button, i call the controller, who returns a list with objects to update the partial view (i only update the name).. But dont update.. but im making with razor... I have tested and the values comes to the partial view... how can i achieve this?
thanks so much!
Rafael
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 ?
I'm using ASP.Net MVC5 with Razor engine, and I want to use a foreach in another foreach
#foreach(var item in Model.Table1)
{
....
#foreach(var item in Model.Table2)
{
...Bootstrap Carousel
}
}
outside foreach shows all items in Table1 but inside foreach shows some images in Table2.
I Don't know how do it :/
this is my code , but it don't work:
HTML:
#foreach (var item in Model.SubGoods)
{
<div style="background-color: #f5f5f5; text-align: center;padding:0px; " class="col-xs-12 col-sm-6 col-md-4 col-lg-3 text-center HoverBorder">
<div style="padding:10px;background-color:white;">
<div style="background-color: #f5f5f5; border: 3px solid #f5f5f5;">
<a href="#Url.Action("GoodDetails", "Home", new { id = #item.SubGoodID })">
<img class="img-responsive" src="#Url.Content(item.SubGoodImage.ToString())" />
</a>
</div>
<div style="border: 3px solid #f5f5f5;">
<h5 class="h">modelNumber : #item.SubGoodModelNumber</h5>
<h5 class="h">Type : #item.SubGoodGender</h5>
<hr style="background-color: #f5f5f5; height: 0.5px; width: 100%" />
<h5 class="h">#item.SubGoodName</h5>
<h5 class="h">#item.SubGoodInfo</h5>
<h5 class="h div2"> #item.NishtmanCode</h5>
<span class="div1">:ProductCode</span>
</div>
</div>
</div>
//----------------------
<div class="col-md-6 col-md-offset-3">
<div class="carousel slide" id="myCarousel">
<div class="carousel-inner">
#foreach (var item1 in Model.GoodDetails)
{
if (item1 == Model.GoodDetails.FirstOrDefault())
{
<div class="item active">
<div class="col-xs-3"><img style="width:40px;height:40px;" src="#item1.DetailsImage" class="img-responsive"></div>
</div>
}
else
{
<div class="item">
<div class="col-xs-3"><img style="width:40px;height:40px;" src="#item1.DetailsImage" class="img-responsive"></div>
</div>
}
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
<a class="right carousel-control" href="#myCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
</div>
</div>
//----------------------
}
Also I don't know where write query for some images in inside foreach
HomeController :
public ActionResult Goods(int id)
{
HomeVM vm = new HomeVM();
vm.SocialNetworks = blSocialNetwork.select();
var goods = db.SubGoods.Where(p => p.FKMainGoodID == id).ToList();
vm.SubGoods = goods;
return View(vm);
}
I want something like this :