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);
}
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 a group of checkboxes which are populated dynamically from database using AngularJs. Now, on edit I want to check the checkboxes whose value is stored in database. Below is the sample code:
<div class="row" >
<div class="col-sm-2">
<label>Select Metal :</label><label style="color:red">* </label>
</div>
<div class="col-sm-8">
<div ng-repeat="names in MetalTypes" class="checkbox-inline" id="MetalDiv" style="font-size: larger; margin-left: 20px !important; margin-top: -10px !important;">
<div style="margin:10px 10px 10px; margin-left:-16px;">
<input type="checkbox" value="{{names.Id}}" ng-model="names.SELECTED" ng-checked="object[names.Id]" ng-true-value="'Y'" ng-false-value="'N'" style="margin-top:2px;" ng-change="getSelectedMetal()" />{{names.Name}}
</div>
</div>
</div>
</div>
I have a table which displays rows of database table. The table also contains an edit button at each row. On clicking the edit button the values should get auto populated in the form. Everything else is working fine, but, I am not able to set the checkboxes as checked which are saved in database.
HTML Code:
<div class="row" id="domainForm">
<div class="row">
<div class="col-sm-2">
<label style="color:red">* </label><label>Domain Name :</label>
</div>
<div class="col-sm-4">
<input id="domainName" type="text" placeholder="Enter the name of Domain" value=""/>
</div>
<div class="col-sm-2">
<label style="color:red">* </label><label>Domain Code :<br/>[Alias Name]</label>
</div>
<div class="col-sm-4">
<input id="aliasDomainName" type="text" placeholder="Enter the code/alias name for Domain" value=""/>
</div>
</div>
<div class="row" style="margin-top:20px;">
<div class="col-sm-2">
<label>Select Business Type :</label><label style="color:red">* </label>
</div>
<div class="col-sm-4">
<div ng-repeat="names in BusinessTypes" class="checkbox-inline" id="BusinessDiv" style="font-size: larger; margin-left: 20px !important; margin-top: -10px !important;">
<div style="margin:10px 10px 10px; margin-left:-16px;">
<input type="checkbox" value="{{names.Id}}" ng-model="names.SELECTED" ng-true-value="'Y'" ng-false-value="'N'" style="margin-top:2px;" />{{names.Name}}
</div>
</div>
</div>
</div>
<div class="row" >
<div class="col-sm-2">
<label>Select Metal :</label><label style="color:red">* </label>
</div>
<div class="col-sm-8">
<div ng-repeat="names in MetalTypes" class="checkbox-inline" id="MetalDiv" style="font-size: larger; margin-left: 20px !important; margin-top: -10px !important;">
<div style="margin:10px 10px 10px; margin-left:-16px;">
<input type="checkbox" value="{{names.Id}}" ng-model="names.SELECTED" ng-checked="object[names.Id]" ng-true-value="'Y'" ng-false-value="'N'" style="margin-top:2px;" ng-change="getSelectedMetal()" />{{names.Name}}
</div>
</div>
</div>
</div>
<div class="row" ng-show="showMetalTone">
<div class="col-sm-2">
<label>Select Metal Tone:</label><label style="color:red">* </label>
</div>
<div class="col-sm-8">
<div ng-repeat="names in MetalToneTypes" class="checkbox-inline" id="MetalToneDiv" style="font-size: larger; margin-left: 20px !important; margin-top: -10px !important;">
<div style="margin:10px 10px 10px; margin-left:-16px;">
<input type="checkbox" value="{{names.Name}}" ng-model="names.SELECTED" ng-true-value="'Y'" ng-false-value="'N'" style="margin-top:2px;" />{{names.Name}}
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-2">
<label>Select Stone :</label><label style="color:red">* </label>
</div>
<div class="col-sm-8">
<div ng-repeat="names in StoneTypes" class="checkbox-inline" id="StoneDiv" style="font-size: larger; margin-left: 20px !important; margin-top: -10px !important;">
<div style="margin:10px 10px 10px; margin-left:-16px;">
<input type="checkbox" value="{{names.Id}}" ng-model="names.SELECTED" ng-true-value="'Y'" ng-false-value="'N'" style="margin-top:2px;" />{{names.Name}}
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-3">
<input type="button" value="Add Domain" ng-click="AddDomain()" />
</div>
<div class="col-sm-3">
<input type="button" value="Set Margin" data-toggle="modal" data-target="#myModal" />
</div>
</div>
</div>
<div class="row" style="margin-top:10px;">
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>Domain Name</th>
<th>Alias Name</th>
<th>Business Type</th>
<th>Metal(s)</th>
<th style="width:35%">Metal Tone(s)</th>
<th>Stone(s)</th>
<th></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in domainList">
<td>{{item.WebsiteName}}</td>
<td>{{item.WebsiteCode}}</td>
<td>{{item.Business_Name}}</td>
<td>{{item.Metal_Name}}</td>
<td>{{item.MetalTone_Name}}</td>
<td>{{item.Stone_Name}}</td>
<td><button class="btn btn-sm btn-primary" ng-click="setDomainDetails(item)">Edit</button></td>
</tr>
</tbody>
</table>
</div>
I want to show checkboxes of "domainForm" as checked in it's edit mode. Please Help.
Thanks in advance.
In edit for your input type checkbox add a ng-checked condition where you have to pass the value true if it is stored in database else false. If true then the checkbox gets checked.
i create a project to show data from database to gridview with a code like this
this is for approval.html
<style type="text/css">
.auto-style4 {
width: 260px;
height: 50px;
}
.auto-style5 {
width: 292px;
height: 50px;
}
.auto-style6 {
width: 850px;
height: 50px;
}
.auto-style13 {
width: 260px;
height: 54px;
}
.auto-style14 {
width: 292px;
height: 54px;
}
.auto-style15 {
width: 850px;
height: 54px;
}
</style>
<style>
.panel-default > .panel-heading {
color: #f5ffff;
background-color: #6d1014;
}
.auto-style20 {
width: 260px;
height: 64px;
}
.auto-style21 {
width: 292px;
height: 64px;
}
.auto-style22 {
width: 850px;
height: 64px;
}
.auto-style23 {
width: 260px;
height: 10px;
}
.auto-style25 {
width: 129px;
}
.auto-style26 {
width: 292px;
height: 10px;
}
</style>
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-10">
<div class="panel panel-default" style="width: 900px;">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
Approval
</a>
</h4>
</div>
<div id="collapseTwo" class="collapse in">
<div class="panel-body">
<div class="row">
<div class="col-md-1">
<table>
<tr>
<td></td>
</tr>
</table>
</div>
<div class="col-lg-10">
<form class="form-horizontal">
<div class="form-group">
<br />
<!--ROW 1 = Period -->
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-2">
<label for="labelPeriod" class="control-label">Period</label>
</div>
<div class="col-md-4">
<input id="txtOldDate" max="txtNewDate" type="date" class="datepicker" />
</div>
<div class="col-md-1">
<label for="labelTo" class="control-label">To</label>
</div>
<div class="col-md-4">
<input id="txtNewDate" min="txtOldDate" type="date" class="datepicker" />
</div>
<div class="col-md-4"></div>
</div>
<br />
<!--ROW 2 = Department-->
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-2">
<label for="labelDepartment" class="control-label">Department</label>
</div>
<div class="col-md-5">
<div class="side-by-side clearfix">
<div class="dropdown">
<select id="ddlDepartment" class="form-control">
<option>EDP Department</option>
<option>Departemen 2</option>
<option>Departemen 3</option>
</select>
</div>
</div>
</div>
<div class="col-md-5"></div>
</div>
<!--ROW 3 = Employee-->
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-2">
<label for="labelEmployee" class="control-label">Employee</label>
</div>
<div class="col-md-5">
<div class="side-by-side clearfix">
<div class="dropdown">
<select id="ddlManagerApproval" class="form-control">
<option>Manager 1</option>
<option>Manager 2</option>
<option>Manager 3</option>
</select>
</div>
</div>
</div>
<div class="col-md-5"></div>
</div>
<br />
<!--ROW 4 = Button Show Data-->
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-2">
<input id="btnSubmit" type="button" class="btn btn-primary" value="Show" />
</div>
<div class="col-md-9"></div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<!--ROW 5 = Gridview-->
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-2"></div>
<div class="col-md-5"></div>
</div>
<br />
<div ng-controller="approvalCtrl" class="row">
<div class="col-md-1"></div>
<div class="col-md-10">
<table class="table table-bordered table-hover">
<tr style="background-color:#6d1014; color:#FFFFFF">
<th>Ticket Number</th>
<th>Requester Account</th>
<th>Category</th>
<th>Sub Category</th>
<th>Subject</th>
<th>Body</th>
<th>FIle Name</th>
<th>Assigned To</th>
</tr>
<tbody ng-repeat="e in requestList">
<tr>
<td>{{e.TICKET_NUMBER}}</td>
<td>{{e.REQUESTER}}</td>
<td>{{e.CATEGORY}}</td>
<td>{{e.SUBCATEGORY}}</td>
<td>{{e.SUBJECT}}</td>
<td>{{e.BODY}}</td>
<td>{{e.CATEGORY}}</td>
<td>{{e.FILE_NAME}}</td>
<td>{{e.ASSIGNED_TO}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
this is approvalCtrl.js
(function (app) {
'use strict';
app.controller('approvalCtrl', function ($scope, GetDataService) {
function getAllDataRequest() {
GetDataService.getRequestData().then(function (emp) {
$scope.requestList = emp.data;
}, function (error) {
alert('failed to fetch data');
});
}
})(angular.module('myapplication'));
});
This is the approvalController.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace MyApplication.Service.Controllers
{
public class ApprovalController : Controller
{
// GET: Approval
public ActionResult Index()
{
return View();
}
public JsonResult GetAll()
{
List<TRN_SERVICE_REQUEST> reqdata = new List<TRN_SERVICE_REQUEST>();
using (RREntities ed = new RREntities())
{
reqdata = ed.TRN_SERVICE_REQUEST.ToList();
return new JsonResult { Data = reqdata, JsonRequestBehavior = JsonRequestBehavior.AllowGet };
}
}
}
}
This is the app.js
(function () {
'use strict';
var app = angular.module('myapplication', ['common.core', 'common.ui'])
.config(config)
.run(run);
config.$inject = ['$routeProvider'];
function config($routeProvider) {
$routeProvider
.when("/", {
templateUrl: "scripts/spa/home/index.html",
controller: "indexCtrl"
})
.when("/entry", {
templateUrl: "scripts/spa/entry/entry.html",
controller: "entryCtrl"
})
.when("/approval", {
templateUrl: "scripts/spa/approval/Approval.html",
controller: "approvalCtrl"
});
}
run.$inject = ['$rootScope', '$location', '$cookieStore', '$http'];
function run($rootScope, $location, $cookieStore, $http) {
// handle page refreshes
$rootScope.repository = $cookieStore.get('repository') || {};
if ($rootScope.repository.loggedUser) {
$http.defaults.headers.common['Authorization'] = $rootScope.repository.loggedUser.authdata;
}
$(document).ready(function () {
$(".fancybox").fancybox({
openEffect: 'none',
closeEffect: 'none'
});
$('.fancybox-media').fancybox({
openEffect: 'none',
closeEffect: 'none',
helpers: {
media: {}
}
});
$('[data-toggle=offcanvas]').click(function () {
$('.row-offcanvas').toggleClass('active');
});
});
}
})();
The page result is shown in this image
Result Page
Why the result is getting an error is not a function?
Thanks in advance
It seems to me that you've written the self-invoking function wrong. The arguments weren't placed rightly. Should've been one line below.
(function (app) {
'use strict';
app.controller('approvalCtrl', function ($scope, GetDataService) {
function getAllDataRequest() {
GetDataService.getRequestData().then(function (emp) {
$scope.requestList = emp.data;
}, function (error) {
alert('failed to fetch data');
});
}
});
})(angular.module('myapplication'));
You need to define the app in your HTML
<div ng-app = "myapplication"></div>
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 :
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);