layout difficulty in MVC3 - asp.net-mvc-3

I am having a login page. In the login Page I don`t have any menu and based upon the user login a menu appear on the Home page.
My problem is how not to display the menu only in my login page?
I am having a page MenuControlPartial.cshtml as follows for the menu:
<li>Admin
<ul>
<li>TimeKeeper</li>
<li>AAA</li>
<li>BBB</li>
<li>CCC</li>
</ul>
</li>
<li>Settings
<ul>
<li>VV</li>
<li>XX</li>
</ul>
</li>
</ul>
My _layout.cshtml is as as follows:
<div id="page">
<div id="header">
<div id="title">
<br />
</div>
#if (Request.IsAuthenticated)
{
<div id="loginInfo">
#Html.Partial("_LogOnPartial")
</div>
<div class="clear">
</div>
<div id="menucontainer">
#Html.Partial("MenuControlPartial")
</div>
<div class="clear"></div>
}
</div>
<div id="content">
#RenderBody()
</div>
</div>
}
</body>

You could test the current controller and action
#if (!(Html.ViewContext.RouteData.GetRequiredString("controller") == "Login" && Html.ViewContext.RouteData.GetRequiredString("action") == "Index")) {
<div id="menucontainer">
#Html.Partial("MenuControlPartial")
</div>
}
And to avoid this ugliness write a helper:
public static bool ShouldDisplayMenu(this HtmlHelper htmlHelper)
{
var routeData = htmlHelper.ViewContext.RouteData;
var controller = routeData.GetRequiredString("controller");
var action = routeData.GetRequiredString("action");
return !(controller == "Login" && action == "Index");
}
and then:
#if (Html.ShouldDisplayMenu()) {
<div id="menucontainer">
#Html.Partial("MenuControlPartial")
</div>
}

Related

Ajax not triggering for Partial view

I am adding Partial view in to my main view , the partial view code snippet is:
<li class="item-#j deeper parent active">
<a class="" href="">
<span data-toggle="collapse" data-parent="#menu-group-1" href="#sub-item-#j" class="sign"><i class="icon-plus icon-white"></i></span>
<span class="lbl">Brands</span>
</a>
<ul class="children nav-child unstyled small collapse" id="sub-item-#j">
#foreach (var brand in Model.BrandList)
{
<li class="item-#j deeper parent active">
<div class="checkbox">
<label>
<input type="checkbox" value="#brand._id">
#*<a class="" href="#Url.Action("FilterData", "ShopWindow", new {shopKey=house._id,houseKey=house._id,houseName = house.House})">*#
<span class="lbl">#brand.Brand</span>
#*</a>*#
</label>
</div>
</li>
j++;
}
</ul>
</li>
in my main view I have a script to get all the check boxes that user have selected, the script snippet :
<script type="text/javascript">
var selectedBrand=[];
$("input[type='checkbox']").change(function () {
$('#brand input:checked').each(function () {
selectedBrand.push($(this).attr('value'));
alert("Test");
})
sendAjaxRequest();
});
When I select any check box from the partial view the script's change function is not getting triggered. This change function triggers if I check any checkbox in the main page but not for checkboxes belongs to partial view .
Any idea?
Thanks
I found the solution :
changed
$("input[type='checkbox']").change(function () {
to
$(document).on('change', '.checkbox', function() {

Dynamically bind data with button in Knockout.js?

I'm using MVC3 with Knockout.js and want to attach some data from the api to my button with data-bind=addContribute in a template. This button should open a pop up box and I need the attached button data on that pop up. How can I do this?
My template:
<div>
<ul data-bind="template: {name: 'membersTemplate', foreach: viewModel.membersList}">
</ul>
</div>
<script id="membersTemplate" type="text/html">
<li>
<div class="fl width165">
<img src=" ${ image } " width="33" height="34" />
<span> ${ memberName } </span>
${ memberType }
</div>
<aside class="fr margint10">
<label> ${ contributions } </label>
<a href="#" class="sprite-add_img" id="openContribute" title="Add Contributes to Goals" data-bind="click: viewModel.addContribute" ></a>
</aside>
</li>
</script>
<script id="membersTemplate" type="text/html">
<li>
<div class="fl width165">
<img data-bind="attr : {src : img}" width="33" height="34" />
<span data-bind="text : memberName"></span>
<span data-bind="text : memberType"></span>
</div>
<aside class="fr margint10">
<label data-bind="text : contributions"></label>
<a href="#" class="sprite-add_img" id="openContribute" title="Add Contributes to Goals" data-bind="click: addContribute" ></a>
</aside>
</li>
</script>
membersList varibale in you code should be next
function SingleMember(img, name, type, contr)
{
var self = this
self.img = ko.observable(img)
self.memberName = ko.observable(name)
self.memberType = ko.observable(type)
self.contributions = ko.observable(contr)
self.addContribute = function() {
//
}
}
window.viewModel = new function()
{
var self = this
self.membersList = ko.observableArray()
self.membersList.push(new SingleMember(/*.... params1*/))
self.membersList.push(new SingleMember(/*.... params2*/))
}

How to modify HTTP Response Using Filters in MVC 3 Razor?

HtML section in _Layout.cshtml
<div id="header">
<div class="logo"><img src="#Url.Content("~/!(IMAGEPATH)!/logo.png")" alt="" /></div>
<div class="fb_like"><img src="#Url.Content("~/!(IMAGEPATH)!/fb_like_btn.png")" alt="" /></div>
<div class="google_plus"><img src="#Url.Content("~/!(IMAGEPATH)!/google_plus.png")" alt="" /></div>
<div class="header_rt">
<ul>
<li>Call us: 1500 258 789</li>
<li>Live chat</li>
<li>My Account</li>
<li>Sign in</li>
</ul>
<div class="search">
<input type="text" value="Type your keyword..." class="srh_txt" />
<input name="Submit" type="submit" value="Submit" class="srh_btn" />
</div>
</div>
</div>
<div id="main">
#RenderBody()
</div>
Html section in Index.cshtml
#{
ViewBag.Title = "Home Page";
}
<div class="clr"></div>
<div id="banner">
<div id="slider"><img src="#Url.Content("~/!(IMAGEPATH)!/banner.jpg")" alt="" /></div>
<div class="banner_rt">
<div class="adv1"><img src="#Url.Content("~/!(IMAGEPATH)!/adv1.jpg")" alt="" /></div>
<div class="adv2"><img src="#Url.Content("~/!(IMAGEPATH)!/adv2.jpg")" alt="" /></div>
</div>
Using bellow code I able to Replace !(IMAGEPATH)! only in _Layout.cshtml
void Application_PostReleaseRequestState(object sender,EventArgs e)
{
if(string.CompareOrdinal(Response.ContentType,"text/html") == 0)
{
Response.Filter = new ResponseFilter(Response.Filter);
}
}
But above described code not affecting child pages like Index.cshtml. Please tell me any event in ASP.NET MVC3 like old protected override void OnPreInit(EventArgs e) of Classic ASP.NET !!!!
I want to know which event effecting all the child pages before rendering in MVC3 ?
Within Base Controller, write the bellow code
protected override void OnResultExecuting(ResultExecutingContext filterContext)
{
var response = filterContext.HttpContext.Response;
if (string.CompareOrdinal(response.ContentType, "text/html") == 0)
{
response.Filter = new ResponseFilter(response.Filter);
}
base.OnResultExecuting(filterContext);
}

Append to newly created div

I have a question to those jquery/ajax/javascript veterans, im creating a skill calculator for a certain game... everything is working fine up until this:
this is the ajax output:
{"skills":{"skill_id_1":"skill_name_1","skill_id_2":"skill_name_2"}}
this is my ajax:
function setOutput(){
if(httpObject.readyState == 4){
var results = eval('('+httpObject.responseText+')');
if (results['skills']){
$('#skilldiv').empty(); // empty div
$.each(results['skills'], function(key, value)
{
$("<div></div>").appendTo("#skilldiv").attr({class: "skilldesc"});
$("<div> </div>").appendTo(".skilldesc").attr({class: "skillinfo"});
$("<div> </div>").appendTo(".skilldesc").attr({class: "skilltxt"});
});
}
}
}
this is my div:
<div id="wrapper">
<ul>
<li id="skilldiv"></li>
</ul>
</div
so my problem is.. how can i append skillinfo & skilltxt to skilldesc which is just appended to skilldiv...
i tried this:
$.each(results['skills'], function(key, value)
{
$("<div></div>").appendTo("#skilldiv").attr({class: "skilldesc"});
$("<div> </div>").appendTo(".skilldesc").attr({class: "skillinfo"});
$("<div> </div>").appendTo(".skilldesc").attr({class: "skilltxt"});
});
but all results go into the first skilldesc,
im trying to get these:
<div id="wrapper">
<ul>
<li id="skilldiv">
<div class="skilldesc">
<div class="skillinfo">Some Info of skill 1 here</div>
<div class="skilltxt">Name of skill 1 here</div>
</div>
<div class="skilldesc">
<div class="skillinfo">Some Info of skill 2 here</div>
<div class="skilltxt">Name of skill 2 here</div>
</div>
</li>
</ul>
</div>
but i get this instead;
<div id="wrapper">
<ul>
<li id="skilldiv">
<div class="skilldesc">
<div class="skillinfo">Some Info of skill 1 here</div>
<div class="skilltxt">Name of skill 1 here</div>
<div class="skillinfo">Some Info of skill 2 here</div>
<div class="skilltxt">Name of skill 2 here</div>
</div>
<div class="skilldesc"></div>
</li>
</ul>
</div>
any help would be very much appreciated . . . thx
Because .skilldesc selects the first div too.
You can try this,
$.each(results['skills'], function(key, value)
{
$skilldesc = $("<div></div>").attr({class: "skilldesc"});
$("<div> </div>").appendTo($skilldesc).attr({class: "skillinfo"});
$("<div> </div>").appendTo($skilldesc).attr({class: "skilltxt"});
$skilldiv.appendTo("#skilldiv");
});
Also, you should to manipulations in objects in memory (not in dom).

create a html helper for mvc

I am new to mvc so not sure if this is possible.
I have some html that basically uses some images to create a nice looking rounded corners box.
Is it possible in mvc3 to create a helper function that will allow me to call the helper and insert any content I want into the main area of the div tags.
this is my html
<div class="rounded">
<div class="top">
<div class="right">
</div>
</div>
<div class="middle">
<div class="right">
<div class="content">
Some how allow me to insert data into here
<div class="Clear">
</div>
</div>
</div>
<div class="bottom">
<div class="right">
</div>
</div>
</div>
</div>
I dont want to have to copy this everywhere I want to use this styling so I am hoping I can create some type of helper and call it whenever I need to use this box and allow me to insert html into
<div class="content">
Some how allow me to insert data into here
<div class="Clear">
</div>
Does anyone have any suggestions?
Thank you
Seems like an excellent scenario for a custom html helper:
public class RoundedCorner : IDisposable
{
private readonly ViewContext _viewContext;
private bool _disposed = false;
public RoundedCorner(ViewContext viewContext)
{
_viewContext = viewContext;
}
public void Dispose()
{
Dispose(true);
GC.SuppressFinalize(this);
}
protected virtual void Dispose(bool disposing)
{
if (!_disposed)
{
_disposed = true;
_viewContext.Writer.Write(
#"<div class=""Clear"">
</div>
</div>
</div>
<div class=""bottom"">
<div class=""right"">
</div>
</div>
</div>
</div>"
);
}
}
}
public static class HtmlExtensions
{
public static RoundedCorner RoundedCorner(this HtmlHelper htmlHelper)
{
htmlHelper.ViewContext.Writer.Write(
#"<div class=""rounded"">
<div class=""top"">
<div class=""right"">
</div>
</div>
<div class=""middle"">
<div class=""right"">
<div class=""content"">"
);
return new RoundedCorner(htmlHelper.ViewContext);
}
}
and in your view simply:
#using (Html.RoundedCorner())
{
<div>Some how allow me to insert data into here</div>
}
which would generate (I know, what an ugly formatting but perfectly valid HTML, I am too lazy to fix it at the moment):
<div class="rounded">
<div class="top">
<div class="right">
</div>
</div>
<div class="middle">
<div class="right">
<div class="content"> <div>Some how allow me to insert data into here</div>
<div class="Clear">
</div>
</div>
</div>
<div class="bottom">
<div class="right">
</div>
</div>
</div>
</div>
I like the solution above provided by Darin. The only changes I would make is to have two private methods in the RoundedCorner class that write the opening and closing tags to the view context, rather than having part of it in the class and the other part in the helper. Then the helper just returns a new instance of RoundedCorner.

Resources