ViewBag does not show messege in view - asp.net-mvc-3

I created 2 div's inside a view.
to display content inside that i have used partial view and to show errors i am using Viewbag and displayed it as follows:
<div id="tabs">
<ul>
<li>Publish Exhibition</li>
<li>Edit Existing Exhibition</li>
</ul>
<div id="tabs-1" style=" width:900px; height:400px;">
<font color="red">#ViewBag.msg1</font>
#{Html.RenderPartial("PubExhi", Model);}
</div>
<div id="tabs-2">
#{Html.RenderPartial("EditExhi");}
</div>
</div>
I'm calling this view as
ViewBag.msg1 = "record not updated!!!!";
modelList = setIndex();
return View("Index", modelList);
evry thing is working fine except the viewbag
it is not displaying any msgs
When i debugged it, i can see the viewbag containing appropriate value
but it is not displaying on the page
I also tried to display it from the partial view but not getting any message
Can any body help me

Use #Html.Raw(ViewBag.msg1) to display.....

It should work, i tried exactly similar thing and it is working for me -
<div id="tabs">
<ul>
<li>Tab 1</li>
<li>Tab 2</li>
</ul>
<div id="HWTab">
<font color="red">#ViewBag.msg</font>
#{Html.RenderPartial("_HardwareAssetView", Model.hardwareAssetVM);}
</div>
<div id="AdminTab">
#{Html.RenderPartial("_AdminAssetView", Model.adminAssetVM);}
</div>

you need to assign it to the view you are sending in your server method: let's say my viewresult is Details, but you are sending view DetailingList, then you need to assign this view's viewbag the message you want:
var partialViewRes = new PartialViewResult();
partialViewRes.ViewName = "DetailingList";
partialViewRes.ViewData.Model = list;
partialViewRes.ViewBag.ErrorMessage = "Error on loading";
Hope this helps someone.

Related

Viewing all photos of post using UIKIT using Lightbox Panel Options "items"

I am using UIKIT Lightbox to display post images like Facebook as below:
Controller
$postImages = postsImages::where('postId', $post->postId)->limit(3)->get();
Blade
<div class="uk-child-width-1-3#m" uk-grid uk-lightbox="animation: slide">
#foreach ($postImages as $postImage)
<div>
<a class="uk-inline" href="{{$postImage->imageLink}}">
<img src="{{$postImage->imageLink}}">
#if ($loop->last && $post->hasImage > 3)
<div class="uk-overlay-default uk-position-cover more">
<div class="uk-position-center">
<h1>+{{$post->hasImage - 3}}</h1>
</div>
</div>
#endif
</a>
</div>
#endforeach
</div>
I limited the image thumbnails to 3 and the rest will be shown as +number_of_remaining_photos same like Facebook.
The problem is that when I click on a thumbnail to make it large and view the rest then I can see only those three images which I limited.
I went through UIKIT lighbox documentation and I found items option but I don't know how to use it in order to view all the images of that post by creating another query like below:
$postImages = postsImages::where('postId', $post->postId)->get();
to get all images there and showing it in the lightbox.
P.S. I am not sure, that is item option for that purpose or not. )
This is a practical solution.
1- Make another query without limit.
$postImagesAll = postsImages::where('postId', $post->postId)->get();
2- Add data-uk-lightbox="{group:'my-group'}" attribute to the result of both queries like below and everything will work fine:
<div class="uk-grid-collapse" uk-grid uk-lightbox="animation: slide;">
#foreach ($postImages as $postImage)
<div>
<a class="uk-inline" href='/storage/posts/{{$postImage->imageLink}}' data-uk-lightbox="{group:'my-group'}">
<img src="{{$postImage->imageLink}}"/>
#if ($loop->last && $post->hasImage > 3)
<div class="uk-overlay-default uk-position-cover more">
<div class="uk-position-center">
<h1>+{{$post->hasImage - 3}}</h1>
</div>
</div>
#endif
</div>
</a>
</div>
#endforeach
#foreach ($postImagesAll as $postImage)
<a class="uk-hidden" href="{{$postImage->imageLink}}" data-uk-lightbox="{group:'my-group'}"></a>
#endforeach
</div>

WebAPI Knockout JS Image Binding

I am using Knockoutjs to render a user profile page. For which I am calling a Web API service which returns User details with its Profile Picture.
var MessageFrom = {
FromUserProfileId: self.FromUserProfileId,
FromUserName: self.FromUserName,
FromUserPictURL: self.FromUserPictURL
}
<div id="comments" class="comments" data-bind="with: viewModel">
<div class="comment clearfix" data-bind="foreach: Messages">
<div class="comment-avatar">
<img class="img-circle" data-bind="attr:{'src': FromUserPictURL}" alt="avatar">
</div>
<header>
<h3 data-bind="text: FromUserName"></h3>
<div class="comment-meta"><p data-bind="text: moment(DatePosted).format('LLL')"></p> </div>
</header>
<div class="comment-content">
<div class="comment-body clearfix">
<p data-bind="text: MessageBody"></p>
</div>
</div>
</div>
</div>
The URL of the Image returned from WebAPI is Relative URL like ~/Content/Member/Image1.jpg. While its bind with Image URL shows like "http://sitename.com/profile/~/Content/Member/Image1.jpg".
Everything works great accept Profile Picture
I need to work something on binding as as I cannot change the Path coming from Database.
Appreciate your suggestions.
Regards,
Your binding looks okay. For starters I would use your IE or Chrome developer tools ( F12 ) and change the src manually of the image to find out what exactly works for you.
You say you recieve this: ~/Content/Member/Image1.jpg
Setting the src to this should work: /Content/Member/Image1.jpg
You can change your message object client-side like this, once you're sure what is needed, but I think this should suffice:
var MessageFrom = {
FromUserProfileId: self.FromUserProfileId,
FromUserName: self.FromUserName,
FromUserPictURL: self.FromUserPictURL.replace('~','')
}

Laravel 4 View Nesting Main Layout Subviews Content and Sidebar

This is my first post so please be gentle with me.
I have set my master layout to call "main"
<div class="row">
{{$main}}
</div>
and I have a view called home.blade
<div class="col-md-9">
<div class="content">
{{$content}}
</div>
</div>
<div class="col-md-3">
<aside class="sidebar">
{{$sidebar}}
</aside>
</div>
and in my controller I have:-
$this->layout->main = View::make('home')->nest('content', 'property.viewmany', compact('properties'));
This works for the content variable, but at this point I'm stumped at how to get the sidebar variable to work. Is there a way to nest the two variables into the home.blade from the controller?
I've attempt various, albeit, shots in the dark, but I always get either content not defined or sidebar not defined.
You can put a first variable in the first view like this:
$this->layout->main = View::make('home', compact('sidebar'))->nest('content', 'property.viewmany', compact('properties'));

Creating a Hovercard with jQuery Hovercard and custom data attributes

I need some help about creating more HoverCards with this plugin (download). I just created a code demo on JSFiddle. Do you have any recommendations about this?
JavaScript:
$('.babe-hover').hovercard({
detailsHTML: $(this).attr('data-control').html(),
width:278
});
HTML:
<ul class="demo">
<li>
<span class="babe-hover" data-control="control-01">William Johnson</span>
<div id="control-01" style="display: none;">
<p class="s-desc">Address: 64 Newman Street.</p>
<ul class="s-stats">
<li>Tweets<br><span class="s-count">1337</span></li>
</ul>
</div>
</li>
<li>
<span class="babe-hover" data-control="control-02">Hanson Thomas</span>
<div id="control-02" style="display: none;">
<p class="s-desc">Address: 64 Newman Street.</p>
<ul class="s-stats">
<li>Tweets<br><span class="s-count">1337</span></li>
</ul>
</div>
</li>
​
Now it working with some help from the author
$('.babe-hover').each(function(){
var $this = $(this),
myControlId = $this.attr('data-control'),
htmlForHovercard = $('#'+ myControlId).html();
$this.hovercard({
detailsHTML: htmlForHovercard,
width:278
});
});
anyway thank #egasimus for ur suggest :)
I suppose you're asking: why doesn't this work?
You're trying to call the .html() method on what $(this).attr('data-control') returns. $(this).attr('data-control'), however, only returns a string, and you need to obtain the corresponding element in order to use .html(). The following code works for me:
$("#" + $(this).attr('data-control')).html()
I.e., "select the element whose id equals this element's data-control attribute, and call .html() on it."

Show dynamic li with jquery mobile style in Ajax call

I am having left side ul and right side ul. When i am clicking left side li making an ajax call in that ajax call i am adding a dynamic li in right side ul. The content was coming but the jquery mobile design was missing. I searched i got a solution like add $("#ul_id").listview('refresh') but it's not working for me.
$.post('/app/Unit/unit_detail', {item_id : task_id},
function(data){
$('#right_ul').html(data);
$("#right_ul").listview('refresh');
});
In my unit_detail.erb i am having the following code
<li class="showDetails" style="list-style:none;" data-theme="b">
<a href="#">
<div class="ui-grid-b">
<div class="ui-block-a"><div><%= unit_detail.name %></div></div>
<div class="ui-block-b"><div><%= unit_detail.description %> </div></div>
<div class="ui-block-c"><div><%= unit_detail.accessories %> </div></div>
</div>
</a>
</li>
In some place i found first find the id of ul in div and refresh the list view
$("#rigth_pane_content_footer").find("#right_ul").listview('refresh');
I tried that also not working.
In my page i am having the following
<div id="rigth_pane_content_footer">
<ul data-role="listview" id="right_ul">
</ul>
</div>
Any suggestions?
try this
$.post('/app/Unit/unit_detail', {item_id : task_id},
function(data){
var container = document.getElementById('right_ul');
var new_element = document.createElement('li');
new_element.innerHTML =data;
container.appendChild(new_element);
$(container).listview("refresh");
});

Resources